import 'package:flutter/material.dart';
import 'package:initial_folder/main.dart';
import 'package:initial_folder/providers/qna_provider.dart';
import 'package:initial_folder/services/qna_service.dart';
import 'package:initial_folder/size_config.dart';
import 'package:initial_folder/theme.dart';
import 'package:initial_folder/providers/posting_qna_provider.dart';
import 'package:initial_folder/widgets/qna_user_page.dart';
import 'package:provider/provider.dart';
import 'package:quill_html_editor/quill_html_editor.dart';

class QuestAndAnswer extends StatefulWidget {
  const QuestAndAnswer({
    Key? key,
    required this.id,
    required this.idLesson,
  }) : super(key: key);

  final id;
  final idLesson;

  @override
  State<QuestAndAnswer> createState() => _QuestAndAnswerState();
}

class _QuestAndAnswerState extends State<QuestAndAnswer> {
  double value = 0;

  final _controllerTitle = TextEditingController();
  final _controller = TextEditingController();
  final QuillEditorController _controllerQuest = QuillEditorController();
  final customToolbar = [
    ToolBarStyle.headerOne,
    ToolBarStyle.headerTwo,
    ToolBarStyle.bold,
    ToolBarStyle.italic,
    ToolBarStyle.underline,
    ToolBarStyle.color,
    ToolBarStyle.listBullet,
    ToolBarStyle.listOrdered,
  ];

  @override
  void initState() {
    // TODO: implement initState
    QnaService().getMyQna(widget.id);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    PostingQnaProvider postingQnaProvider =
        Provider.of<PostingQnaProvider>(context);
    return SingleChildScrollView(
      child: GestureDetector(
        onTap: () => FocusScope.of(context).unfocus(),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              margin: EdgeInsets.symmetric(
                horizontal: getProportionateScreenWidth(16),
              ),
              child: Column(
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(
                        height: getProportionateScreenWidth(16),
                      ),
                      Text(
                        'Ajukan Pertanyaan',
                        style: thirdTextStyle.copyWith(
                          fontWeight: semiBold,
                          letterSpacing: 0.1,
                          fontSize: getProportionateScreenWidth(16),
                        ),
                      ),
                      SizedBox(
                        height: getProportionateScreenWidth(8),
                      ),
                      Container(
                        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                        width: double.infinity,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color:
                                Theme.of(context).colorScheme.primaryContainer,
                            boxShadow: [
                              BoxShadow(
                                  color: Colors.grey,
                                  blurRadius: 0.5,
                                  offset: Offset(0, 2),
                                  spreadRadius: 0.001)
                            ]),
                        child: TextField(
                          controller: _controllerTitle,
                          cursorColor: secondaryColor,
                          scrollPadding: EdgeInsets.zero,
                          decoration: InputDecoration(
                            filled: true,
                            fillColor:
                                Theme.of(context).brightness == Brightness.dark
                                    ? seventeenColor
                                    : Colors.grey[200],
                            border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(
                                  10,
                                ),
                                borderSide: BorderSide.none),
                            hintStyle: secondaryTextStyle.copyWith(
                              color: secondaryColor,
                              letterSpacing: 0.5,
                              fontSize: getProportionateScreenWidth(12),
                            ),
                            hintText: "Masukan Judul Pertanyaan",
                          ),
                        ),
                      ),
                      SizedBox(
                        height: getProportionateScreenWidth(18),
                      ),
                      ToolBar(
                        toolBarColor:
                            Theme.of(context).brightness == Brightness.dark
                                ? seventeenColor
                                : Colors.grey[200]!,
                        activeIconColor: primaryColor,
                        iconColor: secondaryColor,
                        padding: const EdgeInsets.all(8),
                        iconSize: 20,
                        controller: _controllerQuest,
                        toolBarConfig: customToolbar,
                      ),
                      Container(
                        height: 180,
                        width: double.infinity,
                        padding: EdgeInsets.all(15),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.only(
                              bottomLeft: Radius.circular(10),
                              bottomRight: Radius.circular(10),
                            ),
                            color:
                                Theme.of(context).colorScheme.primaryContainer,
                            boxShadow: [
                              BoxShadow(
                                  color: Colors.grey,
                                  blurRadius: 0.5,
                                  offset: Offset(0, 2),
                                  spreadRadius: 0.001)
                            ]),
                        child: Center(
                            child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Expanded(
                              child: QuillHtmlEditor(
                                hintText: 'Ketik pertanyaan mu',
                                controller: _controllerQuest,
                                isEnabled: true,
                                minHeight: 100,
                                backgroundColor: Theme.of(context).brightness ==
                                        Brightness.dark
                                    ? seventeenColor
                                    : Colors.grey[200]!,
                                textStyle: secondaryTextStyle.copyWith(
                                  color: secondaryColor,
                                  fontSize: getProportionateScreenWidth(16),
                                ),
                                hintTextStyle: secondaryTextStyle.copyWith(
                                  color: secondaryColor,
                                  fontSize: getProportionateScreenWidth(16),
                                ),
                                hintTextAlign: TextAlign.start,
                                padding: const EdgeInsets.all(3),
                                hintTextPadding: const EdgeInsets.all(0),
                                loadingBuilder: (context) {
                                  return const Center(
                                      child: CircularProgressIndicator(
                                    strokeWidth: 0.4,
                                  ));
                                },
                              ),
                            ),
                            // TextField(
                            //   controller: _controller,
                            //   cursorColor: secondaryColor,
                            //   scrollPadding: EdgeInsets.zero,
                            //   minLines: 2,
                            //   keyboardType: TextInputType.multiline,
                            //   maxLines: 2,
                            //   decoration: InputDecoration(
                            //     filled: true,
                            //     fillColor: Theme.of(context).brightness ==
                            //             Brightness.dark
                            //         ? seventeenColor
                            //         : Colors.grey[200],
                            //     border: OutlineInputBorder(
                            //         borderRadius: BorderRadius.circular(
                            //           10,
                            //         ),
                            //         borderSide: BorderSide.none),
                            //     hintStyle: secondaryTextStyle.copyWith(
                            //       color: secondaryColor,
                            //       letterSpacing: 0.5,
                            //       fontSize: getProportionateScreenWidth(12),
                            //     ),
                            //     hintText: "Ketikkan Pertanyaanmu disini",
                            //   ),
                            // ),
                            Align(
                              alignment: Alignment.topRight,
                              child: ElevatedButton(
                                onPressed: () async {
                                  if (await postingQnaProvider.postingQna(
                                      _controllerTitle.text,
                                      await _controllerQuest.getText(),
                                      widget.id,
                                      widget.idLesson)) {
                                    _controllerQuest.clear();
                                    _controllerTitle.clear();
                                    ScaffoldMessenger.of(
                                            globalScaffoldKey.currentContext!)
                                        .showSnackBar(
                                      SnackBar(
                                        duration: Duration(seconds: 2),
                                        backgroundColor: primaryColor,
                                        content: Text(
                                          'Pertanyaan berhasil dikirimkan',
                                          style: primaryTextStyle.copyWith(
                                            color: backgroundColor,
                                          ),
                                        ),
                                        behavior: SnackBarBehavior.floating,
                                        shape: RoundedRectangleBorder(
                                          borderRadius:
                                              BorderRadius.circular(5),
                                        ),
                                        action: SnackBarAction(
                                          label: 'Lihat',
                                          onPressed: () {
                                            ScaffoldMessenger.of(
                                                    globalScaffoldKey
                                                        .currentContext!)
                                                .hideCurrentSnackBar();
                                          },
                                        ),
                                      ),
                                    );
                                  } else {
                                    ScaffoldMessenger.of(
                                            globalScaffoldKey.currentContext!)
                                        .showSnackBar(
                                      SnackBar(
                                        duration: Duration(seconds: 2),
                                        backgroundColor: primaryColor,
                                        content: Text(
                                          'Terjadi kesalahan',
                                          style: primaryTextStyle.copyWith(
                                            color: backgroundColor,
                                          ),
                                        ),
                                        behavior: SnackBarBehavior.floating,
                                        shape: RoundedRectangleBorder(
                                          borderRadius:
                                              BorderRadius.circular(5),
                                        ),
                                      ),
                                    );
                                  }
                                },
                                child: Text(
                                  'Kirim',
                                  style: thirdTextStyle.copyWith(
                                    color: Colors.white,
                                    fontSize: SizeConfig.blockHorizontal! * 4,
                                  ),
                                ),
                                style: ElevatedButton.styleFrom(
                                  shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(12)),
                                  backgroundColor: primaryColor,
                                ),
                              ),
                            ),
                          ],
                        )),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 15,
            ),
            Container(
              margin: EdgeInsets.symmetric(
                horizontal: getProportionateScreenWidth(16),
              ),
              child: Text(
                'Pertanyaan Dan Jawaban',
                style: primaryTextStyle.copyWith(
                  fontWeight: semiBold,
                  letterSpacing: 1,
                  fontSize: getProportionateScreenWidth(16),
                ),
              ),
            ),
            SizedBox(
              height: getProportionateScreenHeight(14),
            ),
            QnaUserPage(idCourse: widget.id),
            SizedBox(
              height: getProportionateScreenHeight(14),
            ),
            // QandA(
            //   divider: Divider(),
            // ),
            // QandA(
            //   divider: Divider(),
            // ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();

    super.dispose();
  }
}