import 'package:boilerplate/core/styles/my_colors.dart';
import 'package:boilerplate/core/styles/my_dimensions.dart';
import 'package:boilerplate/core/styles/my_font.dart';
import 'package:boilerplate/presentation/widgets/base_scaffold.dart';
import 'package:boilerplate/presentation/widgets/ipm_textfield.dart';
import 'package:dialogflow_flutter/dialogflowFlutter.dart';
import 'package:dialogflow_flutter/googleAuth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class ChatScreen extends StatefulWidget {
  const ChatScreen({Key? key}) : super(key: key);

  @override
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen>
    with AutomaticKeepAliveClientMixin {
  final GlobalKey containerKey = GlobalKey();

  double chatHeight = 450;

  @override
  void initState() {
    super.initState();
  }

  final messageInsert = TextEditingController();
  List<Map> messsages = [];
  void response(query) async {
    AuthGoogle authGoogle = await AuthGoogle(
      fileJson: "assets/credentials/ipmart-5bc00-cdbbe4f80414.json",
    ).build();
    DialogFlow dialogflow = DialogFlow(authGoogle: authGoogle, language: "th");
    AIResponse aiResponse = await dialogflow.detectIntent(query);
    setState(() {
      messsages.insert(0, {
        "data": 0,
        "message":
            aiResponse.getListMessage()?[0]["text"]["text"][0].toString() ?? ''
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);

    return BaseScaffold(
      title: 'พูดคุย',
      body: InAppWebView(
        initialOptions: InAppWebViewGroupOptions(
          crossPlatform: InAppWebViewOptions(
            supportZoom: false,
          ),
        ),
        initialFile: 'assets/credentials/chat.html',
      ),
      // body: Column(
      //   children: <Widget>[
      //     Expanded(
      //       child: ListView.builder(
      //         padding: EdgeInsets.symmetric(horizontal: MyDimens.dimen16),
      //         reverse: true,
      //         itemCount: messsages.length,
      //         itemBuilder: (context, index) => chat(
      //           messsages[index]["message"].toString(),
      //           messsages[index]["data"],
      //         ),
      //       ),
      //     ),
      //     Container(
      //       child: Row(
      //         children: <Widget>[
      //           SizedBox(width: MyDimens.dimen16),
      //           Expanded(
      //             child: IPMTextField(
      //               controller: messageInsert,
      //               hintText: 'พิมพ์ข้อความ',
      //               maxLines: 1,
      //               borderColor: MyColor.orange,
      //             ),
      //           ),
      //           Container(
      //             child: IconButton(
      //               icon: Icon(
      //                 Icons.send,
      //                 size: MyDimens.dimen24,
      //               ),
      //               onPressed: () {
      //                 if (messageInsert.text.isEmpty) {
      //                   print("empty message");
      //                 } else {
      //                   setState(() {
      //                     messsages.insert(
      //                         0, {"data": 1, "message": messageInsert.text});
      //                   });
      //                   response(messageInsert.text);
      //                   messageInsert.clear();

      //                   FocusScope.of(context).requestFocus(FocusNode());
      //                 }
      //               },
      //             ),
      //           )
      //         ],
      //       ),
      //     ),
      //     SizedBox(
      //       height: MyDimens.dimen8,
      //     ),
      //   ],
      // ),
    );
  }

  Widget chat(String message, int data) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment:
          data == 1 ? MainAxisAlignment.end : MainAxisAlignment.start,
      children: [
        Flexible(
          child: Container(
            margin: EdgeInsets.symmetric(vertical: MyDimens.dimen6),
            padding: EdgeInsets.symmetric(
              vertical: MyDimens.dimen10,
              horizontal: MyDimens.dimen16,
            ),
            decoration: BoxDecoration(
              color: data == 1 ? Colors.blue[300] : MyColor.orange,
              borderRadius: BorderRadius.circular(100),
            ),
            child: Text(
              message,
              style: MyFont.medium16,
            ),
          ),
        ),
      ],
    );
  }

  @override
  bool get wantKeepAlive => true;
}
