import 'dart:io';
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:path_provider/path_provider.dart';
import 'package:share/share.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:tangheem/api/admin_configuration_api_client.dart';
import 'package:tangheem/api/tangheem_user_api_client.dart';
import 'package:tangheem/app_state/app_state.dart';
import 'package:tangheem/classes/colors.dart';
import 'package:tangheem/classes/consts.dart';
import 'package:tangheem/classes/utils.dart';
import 'package:tangheem/extensions/string_extensions.dart';
import 'package:tangheem/models/aya_tangheem_type_mapped.dart';
import 'package:tangheem/models/discussion_model.dart';
import 'package:tangheem/ui/dialogs/discussion_input_dialog.dart';
import 'package:tangheem/widgets/aya_player_widget.dart';
import 'package:tangheem/widgets/aya_record_widget.dart';
import 'package:tangheem/widgets/text_highlight_widget.dart';

import 'login_screen.dart';

class TangheemDetailParams {
  final String selectedTangheemTypeId;
  final List<AyatTangheemTypeMappedData> ayatTangheemTypeMappedDataList;

  TangheemDetailParams({@required this.selectedTangheemTypeId, @required this.ayatTangheemTypeMappedDataList});
}

class TangheemDetailScreen extends StatefulWidget {
  static const String routeName = "/tangheem_detail";
  final TangheemDetailParams tangheemDetailParams;

  TangheemDetailScreen({Key key, this.tangheemDetailParams}) : super(key: key);

  @override
  _TangheemDetailScreenState createState() {
    return _TangheemDetailScreenState();
  }
}

class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
  GlobalKey _globalKey = GlobalKey();

  List<VoiceNote> voiceNoteList = [];

  List<AyatTangheemTypeMappedData> ayatTangheemTypeMappedDataList = [];

  List<AyatTangheemTypeMappedData> _dataList = [];

  int _discussionPage = -1;
  AyatTangheemTypeMappedData _ayatTangheemTypeMappedFirstData;
  DiscussionModel _discussionModel;

  bool showAyaPlayer = false;

  @override
  void initState() {
    super.initState();
    ayatTangheemTypeMappedDataList = widget.tangheemDetailParams.ayatTangheemTypeMappedDataList;
    _ayatTangheemTypeMappedFirstData = ayatTangheemTypeMappedDataList.first;
    filterVoiceListData();
    getPrefs();
    getTangheemDiscussionAndRelatedData();
  }

  int fontSize = 18;

  SharedPreferences prefs;

  void getPrefs() async {
    prefs = await SharedPreferences.getInstance();
    fontSize = (prefs.getInt(GlobalConsts.fontZoomSizeTangheem) ?? 18);
    setState(() {});
  }

  String getArabicIndexWord(int index) {
    if (index == 0) {
      return 'الأولى';
    } else if (index == 1) {
      return 'الثانية';
    } else if (index == 2) {
      return 'الثالثة';
    } else if (index == 3) {
      return 'الرابعة';
    } else if (index == 4) {
      return 'الخامسة';
    }
    return "";
  }

  void getTangheemDiscussionAndRelatedData() async {
    Utils.showLoading(context);
    try {
      _discussionModel = await TangheemUserApiClient().getDiscussionByTangheemID(_discussionPage, widget.tangheemDetailParams.selectedTangheemTypeId);
      if (!_ayatTangheemTypeMappedFirstData.ayatNumberInSurahs.contains(",")) {
        _dataList = await getTangheemRelatedData();
      }
      Utils.hideLoading(context);
      setState(() {});
    } catch (ex) {
      if (mounted) Utils.handleException(ex, null);
      Utils.hideLoading(context);
    }
  }

  Future<List<AyatTangheemTypeMappedData>> getTangheemRelatedData() async {
    _dataList = [];
    AyatTangheemTypeMapped _ayatTangheemTypeMapped =
        await TangheemUserApiClient().getAyaTangheemTypeMappedRelated(_ayatTangheemTypeMappedFirstData.surahNo, _ayatTangheemTypeMappedFirstData.ayatNumberInSurahs);
    _dataList = _ayatTangheemTypeMapped?.data ?? [];
    if (_dataList.isNotEmpty) {
      _dataList = _dataList.where((element) => element.tangheemTypeId != _ayatTangheemTypeMappedFirstData.tangheemTypeId)?.toList() ?? [];
      var _tempList = _dataList.map((e) => e.tangheemTypeId).toList().toSet().toList();
      var _dataTempList = <AyatTangheemTypeMappedData>[];
      _tempList.forEach((_tempElement) {
        _dataTempList.add(_dataList.firstWhere((element) {
          return !element.ayatNumberInSurahs.contains(",") && (element.tangheemTypeId == _tempElement);
        }, orElse: null));
      });
      _dataList = _dataTempList;
    }

    return _dataList;
  }

  void sendComment(String discussionText) async {
    Utils.showLoading(context);
    try {
      await AdminConfigurationApiClient().addDiscussion(discussionText, _ayatTangheemTypeMappedFirstData.ayaTangheemTypeId);
      Utils.showToast("تم إرسال التعليق ، سيكون مرئيًا بمجرد موافقة المسؤول عليه");
      Utils.hideLoading(context);
      Navigator.pop(context);
    } catch (ex) {
      if (mounted) Utils.handleException(ex, null);
      Utils.hideLoading(context);
    }
  }

  void filterVoiceListData() {
    ayatTangheemTypeMappedDataList.forEach((element) {
      voiceNoteList.addAll(element?.voiceNote ?? []);
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(16, 0, 16, 0),
      width: double.infinity,
      child: _ayatTangheemTypeMappedFirstData == null
          ? SizedBox()
          : Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  child: ListView(
                    physics: BouncingScrollPhysics(),
                    padding: EdgeInsets.only(bottom: 16, top: 16),
                    children: [
                      Text.rich(
                        TextSpan(
                          children: [
                            TextSpan(
                              text: _ayatTangheemTypeMappedFirstData.tangheemTypeName ?? "",
                              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1.5),
                            ),
                            WidgetSpan(
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  zoomButtons("assets/icons/reduce_size.svg", () {
                                    if (fontSize <= 12) {
                                      Utils.showToast("وصل حجم الخط إلى الحد الأدنى للحجم");
                                      return;
                                    }
                                    fontSize -= 2;
                                    prefs.setInt(GlobalConsts.fontZoomSize, fontSize);
                                    setState(() {});
                                  }),
                                  SizedBox(width: 4),
                                  zoomButtons("assets/icons/increase_size.svg", () {
                                    if (fontSize >= 36) {
                                      Utils.showToast("وصل حجم الخط إلى الحد الأقصى للحجم");
                                      return;
                                    }
                                    fontSize += 2;
                                    prefs.setInt(GlobalConsts.fontZoomSize, fontSize);
                                    setState(() {});
                                  }),
                                ],
                              ),
                            ),
                            WidgetSpan(
                              child: PopupMenuButton(
                                child: IconButton(
                                    highlightColor: Colors.transparent,
                                    splashColor: Colors.transparent,
                                    constraints: BoxConstraints(),
                                    padding: EdgeInsets.only(right: 2),
                                    icon: SvgPicture.asset("assets/icons/share_aya.svg", height: 16, width: 16),
                                    onPressed: null),
                                padding: EdgeInsets.fromLTRB(4, 4, 0, 4),
                                itemBuilder: (_) => <PopupMenuItem<int>>[
                                  PopupMenuItem(
                                    value: 1,
                                    child: Text(
                                      "مشاركة رابط",
                                      style: TextStyle(color: ColorConsts.primaryBlack),
                                    ),
                                  ),
                                  PopupMenuItem(
                                    value: 2,
                                    child: Text(
                                      "مشاركة صورة",
                                      style: TextStyle(color: ColorConsts.primaryBlack),
                                    ),
                                  )
                                ],
                                onSelected: (int value) {
                                  if (value == 1) {
                                    _shareAyaAsLink();
                                  } else {
                                    _shareAyaAsImage();
                                  }
                                },
                              ),
                            ),

                            // TextSpan(text: ' world!'),
                          ],
                        ),
                      ),
                      SizedBox(height: 8),
                      Text(
                        _ayatTangheemTypeMappedFirstData.tangheemTypeDescription ?? "",
                        style: TextStyle(fontSize: 14, color: ColorConsts.textGrey, height: 1.5),
                      ),
                      SizedBox(height: 8),
                      Container(
                        margin: EdgeInsets.only(top: 4, bottom: 4),
                        padding: EdgeInsets.only(top: 8, bottom: 8, right: 4, left: 4),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: SingleChildScrollView(
                          physics: NeverScrollableScrollPhysics(),
                          child: RepaintBoundary(
                            key: _globalKey,
                            child: Material(
                              color: Colors.white,
                              child: ListView.builder(
                                  physics: NeverScrollableScrollPhysics(),
                                  shrinkWrap: true,
                                  itemCount: ayatTangheemTypeMappedDataList.length > 5 ? 5 : ayatTangheemTypeMappedDataList.length,
                                  itemBuilder: (context, index) {
                                    final _ayatTangheemTypeMappedData = ayatTangheemTypeMappedDataList[index];
                                    _ayatTangheemTypeMappedData.property?.sort((a, b) => a.orderNo.compareTo(b.orderNo));
                                    List<TangheemProperty> _tangheemInsideTableList = [];
                                    List<TangheemProperty> _tangheemAboveTableList = [];
                                    List<TangheemProperty> _tangheemBelowTableList = [];
                                    List<String> _tangheemWords = [];

                                    List<TangheemProperty> _tempPropertyList = [];
                                    _tempPropertyList.addAll(_ayatTangheemTypeMappedData?.property ?? <TangheemProperty>[]);
                                    int firstIndex = _tempPropertyList.indexWhere((element) => element.isInsideTable);

                                    if (firstIndex >= 0) {
                                      var _tempPropertyListTop = _tempPropertyList.take(firstIndex);
                                      _tempPropertyListTop = _tempPropertyListTop.where((element) => (element.propertyValue ?? "").isNotEmpty)?.toList() ?? [];
                                      _tangheemAboveTableList = _tempPropertyListTop;
                                      _tempPropertyListTop.forEach((element) {
                                        _tempPropertyList.remove(element);
                                      });
                                      var _tempPropertyListInside = _tempPropertyList?.where((element) => (element.isInsideTable))?.toList() ?? [];
                                      _tempPropertyListInside.forEach((element) {
                                        _tempPropertyList.remove(element);
                                      });
                                      _tempPropertyListInside = _tempPropertyListInside.where((element) => (element.propertyValue ?? "").isNotEmpty)?.toList() ?? [];
                                      _tangheemInsideTableList = _tempPropertyListInside;
                                      var _tempPropertyListBelow = _tempPropertyList;
                                      _tempPropertyListBelow = _tempPropertyListBelow.where((element) => (element.propertyValue ?? "").isNotEmpty)?.toList() ?? [];
                                      _tangheemBelowTableList = _tempPropertyListBelow;
                                    }

                                    _tangheemWords.add(_ayatTangheemTypeMappedData.highlightText ?? "");
                                    // _tangheemInsideTableList =
                                    //     _ayatTangheemTypeMappedData?.property?.where((element) => (element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? [];
                                    // _tangheemAboveTableList =
                                    //     _ayatTangheemTypeMappedData?.property?.where((element) => (!element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? [];
                                    //
                                    //

                                    var _tempTangheemIndexWord = "";
                                    if (ayatTangheemTypeMappedDataList.length == 1) {
                                      _tempTangheemIndexWord = "";
                                    } else {
                                      _tempTangheemIndexWord = getArabicIndexWord(index) + " ";
                                    }

                                    return ListView(
                                      physics: NeverScrollableScrollPhysics(),
                                      shrinkWrap: true,
                                      padding: EdgeInsets.all(4),
                                      children: [
                                        Row(
                                          children: [
                                            Text(
                                              " جملة ${_ayatTangheemTypeMappedData.tangheemTypeName} $_tempTangheemIndexWord",
                                              style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, backgroundColor: ColorConsts.primaryBlue),
                                            ),
                                            Expanded(
                                              child: Container(height: 2, color: ColorConsts.primaryBlue),
                                            ),
                                          ],
                                        ),
                                        SizedBox(height: 8),
                                        TextHighLightLengthWidget(
                                          text: _ayatTangheemTypeMappedData.reverseAyatNumber(),
                                          startIndex: _ayatTangheemTypeMappedData.startIndex,
                                          endIndex: _ayatTangheemTypeMappedData.endIndex,
                                          textAlign: TextAlign.start,
                                          fontSize: fontSize.toDouble(),
                                          highlightAya: _ayatTangheemTypeMappedData.highlightText,
                                          highlightAyaNos: _ayatTangheemTypeMappedData.highlightAyaNos ?? "",
                                          ayahTextList: _ayatTangheemTypeMappedData.ayahTextList,
                                        ),
                                        // TextHighLightWidget(
                                        //   text: _ayatTangheemTypeMappedData.reverseAyatNumber() ?? "",
                                        //   valueColor: ColorConsts.primaryBlue,
                                        //   highlights: _tangheemWords,
                                        //   highLightFontSize: fontSize,
                                        //   style: TextStyle(
                                        //     fontFamily: "UthmanicHafs",
                                        //     fontSize: fontSize,
                                        //     fontWeight: FontWeight.bold,
                                        //   ),
                                        // ),
                                        SizedBox(height: 16),
                                        ListView.separated(
                                            itemCount: _tangheemAboveTableList.length,
                                            physics: NeverScrollableScrollPhysics(),
                                            shrinkWrap: true,
                                            separatorBuilder: (context, index) {
                                              return Divider(
                                                color: Colors.white,
                                                height: 4,
                                                thickness: 0,
                                              );
                                            },
                                            itemBuilder: (context, index) {
                                              return Row(
                                                children: [
                                                  Expanded(
                                                    child: Container(
                                                      height: 40,
                                                      padding: EdgeInsets.only(left: 4, right: 8),
                                                      alignment: Alignment.centerRight,
                                                      child: Text(
                                                        _tangheemAboveTableList[index].propertyText,
                                                        maxLines: 1,
                                                        style: TextStyle(fontWeight: FontWeight.bold, color: ColorConsts.secondaryOrange),
                                                      ),
                                                      color: ColorConsts.secondaryWhite,
                                                    ),
                                                  ),
                                                  SizedBox(width: 4),
                                                  Expanded(
                                                    child: Container(
                                                      color: ColorConsts.secondaryWhite,
                                                      padding: EdgeInsets.all(4),
                                                      child: Container(
                                                        color: Colors.white,
                                                        padding: EdgeInsets.only(left: 4, right: 8),
                                                        //   alignment: Alignment.centerRight,
                                                        child: Html(
                                                          data: _tangheemAboveTableList[index]?.propertyValue ?? "",
                                                          style: {
                                                            'html': Style(textAlign: TextAlign.left),
                                                          },
                                                        ),

                                                        // Text(
                                                        //   _tangheemAboveTableList[index].propertyValue,
                                                        //   maxLines: 1,
                                                        //   style: TextStyle(
                                                        //     color: Color(
                                                        //       Utils.stringToHex(_tangheemAboveTableList[index].textColor),
                                                        //     ),
                                                        //   ),
                                                        // ),
                                                      ),
                                                    ),
                                                  )
                                                ],
                                              );
                                            }),
                                        if (_tangheemInsideTableList.isNotEmpty)
                                          Container(
                                            color: ColorConsts.primaryBlue,
                                            margin: EdgeInsets.only(top: 8, bottom: 8),
                                            padding: EdgeInsets.all(8),
                                            child: Column(
                                              children: [
                                                Text(
                                                  "خط النبر و التنغيم ل${_ayatTangheemTypeMappedData.tangheemTypeName ?? ""}",
                                                  style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
                                                ),
                                                SizedBox(height: 8),
                                                tangheemInsideTablePropertyView(_tangheemInsideTableList)
                                              ],
                                            ),
                                          ),
                                        tangheemOutSideTablePropertyView(_tangheemBelowTableList)
                                      ],
                                    );
                                  }),
                            ),
                          ),
                        ),
                      ),
                      SizedBox(height: 8),
                      discussionView(_discussionModel?.data ?? []),
                      if (_dataList.isNotEmpty)
                        Container(
                          margin: EdgeInsets.only(top: 8),
                          padding: EdgeInsets.only(bottom: 20),
                          width: double.infinity,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(8),
                          ),
                          child: Column(
                            children: [
                              Container(
                                height: 60,
                                width: double.infinity,
                                margin: EdgeInsets.only(bottom: 8),
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                  color: ColorConsts.primaryBlue,
                                  borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(8),
                                    topRight: Radius.circular(8),
                                  ),
                                ),
                                child: Text(
                                  "قائمة الأساليب اللغوية في هذه الآية",
                                  style: TextStyle(fontSize: 16, color: Colors.white),
                                ),
                              ),
                              ListView.separated(
                                padding: EdgeInsets.fromLTRB(4, 8, 4, 4),
                                shrinkWrap: true,
                                physics: NeverScrollableScrollPhysics(),
                                itemCount: _dataList.length,
                                separatorBuilder: (context, index) => SizedBox(height: 16),
                                itemBuilder: (context, index) {
                                  return InkWell(
                                    onTap: () {
                                      List<AyatTangheemTypeMappedData> list = _dataList;
                                      var removedData = list[index];
                                      list.remove(removedData);
                                      list.insert(0, removedData);
                                      list = list?.where((element) => (element.ayahNos.contains(removedData.ayahNos)) && (element.tangheemTypeId == removedData.tangheemTypeId))?.toList() ?? [];

                                      TangheemDetailParams tangheem = TangheemDetailParams(selectedTangheemTypeId: _dataList[index].ayaTangheemTypeId, ayatTangheemTypeMappedDataList: list);
                                      Navigator.pushNamed(context, TangheemDetailScreen.routeName, arguments: tangheem);
                                    },
                                    child: Text(
                                      _dataList[index].tangheemTypeName,
                                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: ColorConsts.secondaryOrange, height: 1.5),
                                    ),
                                  );
                                },
                              ),
                            ],
                          ),
                        ),
                      SizedBox(height: 16),
                      AyaRecordWidget()
                    ],
                  ),
                ),
                if (MediaQuery.of(context).orientation == Orientation.portrait)
                  AyaPlayerWidget(
                      surahName: _ayatTangheemTypeMappedFirstData?.surahNameAr ?? "",
                      ayaTangheemTypeId: _ayatTangheemTypeMappedFirstData?.tangheemTypeId ?? "",
                      globalKey: _globalKey,
                      numberInSurah: _ayatTangheemTypeMappedFirstData?.ayatNumberInSurahs,
                      ayaNo: _ayatTangheemTypeMappedFirstData?.ayahNo,
                      surahNo: _ayatTangheemTypeMappedFirstData?.surahNo,
                      voiceNoteList: voiceNoteList),
                if (MediaQuery.of(context).orientation == Orientation.landscape)
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        height: 24,
                        margin: EdgeInsets.only(bottom: 8, top: 8),
                        // color: Colors.transparent,
                        child: TextButton(
                          onPressed: () {
                            setState(() {
                              showAyaPlayer = !showAyaPlayer;
                            });
                          },
                          child: Text(
                            showAyaPlayer ? "إخفاء التسجيلات" : "إظهار التسجيلات",
                            style: TextStyle(color: Colors.black87, fontSize: 12),
                          ),
                          style: TextButton.styleFrom(
                            backgroundColor: ColorConsts.gradientOrange,
                            primary: ColorConsts.primaryBlue,
                            padding: EdgeInsets.only(top: 4, bottom: 4, right: 8, left: 8),
                            textStyle: TextStyle(color: Colors.white, fontSize: 12),
                          ),
                        ),
                      ),
                      if (showAyaPlayer)
                        AyaPlayerWidget(
                            surahName: _ayatTangheemTypeMappedFirstData?.surahNameAr ?? "",
                            ayaTangheemTypeId: _ayatTangheemTypeMappedFirstData?.tangheemTypeId ?? "",
                            ayaNo: _ayatTangheemTypeMappedFirstData?.ayahNo,
                            numberInSurah: _ayatTangheemTypeMappedFirstData?.ayatNumberInSurahs,
                            surahNo: _ayatTangheemTypeMappedFirstData?.surahNo,
                            globalKey: _globalKey,
                            voiceNoteList: voiceNoteList),
                    ],
                  )
              ],
            ),
    );
  }

  Widget nextOptionButton(String icon, String text, VoidCallback onPressed) {
    return InkWell(
      onTap: onPressed,
      child: onPressed == null
          ? SizedBox()
          : Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                SvgPicture.asset(icon, height: 12, width: 12),
                SizedBox(width: 4),
                Text(
                  text,
                  style: TextStyle(color: ColorConsts.textGrey),
                ),
              ],
            ),
    );
  }

  Widget previousOptionButton(String icon, String text, VoidCallback onPressed) {
    return InkWell(
      onTap: onPressed,
      child: onPressed == null
          ? SizedBox()
          : Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  text,
                  style: TextStyle(color: ColorConsts.textGrey),
                ),
                SizedBox(width: 4),
                SvgPicture.asset(icon, height: 12, width: 12),
              ],
            ),
    );
  }

  Widget tangheemOutSideTablePropertyView(List<TangheemProperty> tangheemPropertyList) {
    return ListView.separated(
        itemCount: tangheemPropertyList.length,
        physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        separatorBuilder: (context, index) {
          return Divider(
            color: Colors.white,
            height: 4,
            thickness: 0,
          );
        },
        itemBuilder: (context, index) {
          return Row(
            children: [
              Expanded(
                child: Container(
                  height: 40,
                  padding: EdgeInsets.only(left: 4, right: 8),
                  alignment: Alignment.centerRight,
                  child: Text(
                    tangheemPropertyList[index].propertyText,
                    maxLines: 1,
                    style: TextStyle(fontWeight: FontWeight.bold, color: ColorConsts.secondaryOrange),
                  ),
                  color: ColorConsts.secondaryWhite,
                ),
              ),
              SizedBox(width: 4),
              Expanded(
                child: Container(
                  color: ColorConsts.secondaryWhite,
                  padding: EdgeInsets.all(4),
                  child: Container(
                    color: Colors.white,
                    padding: EdgeInsets.only(left: 4, right: 8),
                    //  alignment: Alignment.centerRight,
                    child: Html(
                      data: tangheemPropertyList[index]?.propertyValue ?? "",
                      style: {
                        'html': Style(textAlign: TextAlign.left),
                      },
                    ),
                    // Text(
                    //   tangheemPropertyList[index].propertyValue,
                    //   maxLines: 1,
                    //   style: TextStyle(
                    //     color: Color(
                    //       Utils.stringToHex(tangheemPropertyList[index].textColor),
                    //     ),
                    //   ),
                    // ),
                  ),
                ),
              )
            ],
          );
        });
  }

  Widget tangheemInsideTablePropertyView(List<TangheemProperty> tangheemPropertyList) {
    return Container(
        color: Colors.white,
        padding: EdgeInsets.all(2),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            for (var property in tangheemPropertyList)
              Expanded(
                child: Container(
                  //  color: ColorConsts.secondaryWhite,
                  //  padding: EdgeInsets.all(8),
                  margin: EdgeInsets.only(left: 2, right: 2),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        color: ColorConsts.secondaryWhite,
                        //height: 30,
                        alignment: Alignment.center,
                        padding: EdgeInsets.only(left: 2, right: 4),
                        width: double.infinity,
                        child: Text(
                          property.propertyText ?? "",
                          //  maxLines: 1,
                          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12, color: ColorConsts.secondaryOrange),
                        ),
                      ),
                      Container(width: double.infinity, height: 4, color: Colors.white),
                      if ((property?.propertyValue ?? "").length > 0)
                        Container(
                          color: ColorConsts.secondaryWhite,
                          padding: EdgeInsets.all(4),
                          child: Container(
                            color: Colors.white,
                            padding: EdgeInsets.only(left: 2, right: 4),
                            width: double.infinity,
                            child: Html(
                              data: property.propertyValue ?? "",
                              style: {
                                'html': Style(textAlign: TextAlign.left),
                              },
                            ),

                            // Text(
                            //   property.propertyValue ?? "",
                            //   maxLines: 1,
                            //   style: TextStyle(
                            //     fontSize: 12,
                            //     color: Color(
                            //       Utils.stringToHex(property.textColor),
                            //     ),
                            //   ),
                            // ),
                          ),
                        ),
                    ],
                  ),
                ),
              )
          ],
        )

        //@todo sikander :commented these line for later discussion
        // ListView.separated(
        //   itemCount: tangheemPropertyList.length,
        //   physics: NeverScrollableScrollPhysics(),
        //   padding: EdgeInsets.zero,
        //   shrinkWrap: true,
        //   separatorBuilder: (context, index) {
        //     return Divider(
        //       color: Colors.white,
        //       height: 1,
        //       thickness: 0,
        //     );
        //   },
        //   itemBuilder: (context, index) {
        //     return Container(
        //       color: ColorConsts.secondaryWhite,
        //       padding: EdgeInsets.all(8),
        //       child: Column(
        //         mainAxisSize: MainAxisSize.min,
        //         crossAxisAlignment: CrossAxisAlignment.start,
        //         mainAxisAlignment: MainAxisAlignment.center,
        //         children: [
        //           Text(
        //             tangheemPropertyList[index].propertyText ?? "",
        //             style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12, color: ColorConsts.secondaryOrange),
        //           ),
        //           SizedBox(height: 4),
        //           Text(
        //             tangheemPropertyList[index].propertyValue ?? "",
        //             style: TextStyle(
        //               fontSize: 12,
        //               color: Color(
        //                 Utils.stringToHex(tangheemPropertyList[index].textColor),
        //               ),
        //             ),
        //           ),
        //         ],
        //       ),
        //     );
        //   },
        // ),
        );
  }

  Widget discussionView(List<DiscussionModelData> _discussionList) {
    _discussionList = _discussionList.where((element) => element.status.toLowerCase() == "Accept".toLowerCase()).toList();
    return Stack(
      alignment: Alignment.bottomCenter,
      children: [
        Container(
          margin: EdgeInsets.only(top: 4, bottom: 25),
          padding: EdgeInsets.all(8),
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8),
          ),
          child: _discussionList.length > 0
              ? ListView.separated(
                  padding: EdgeInsets.only(top: 4, bottom: 24),
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: _discussionList.length,
                  separatorBuilder: (context, index) => SizedBox(height: 16),
                  itemBuilder: (context, index) {
                    return Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Row(
                          children: [
                            SvgPicture.asset(
                              "assets/icons/chat_user.svg",
                              width: 60,
                              height: 60,
                            ),
                            SizedBox(width: 8),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  "تعليق على الآية ${_ayatTangheemTypeMappedFirstData.ayatNumberInSurahs}",
                                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: ColorConsts.primaryBlue, height: 1.5),
                                ),
                                SizedBox(height: 4),
                                Directionality(
                                  textDirection: TextDirection.ltr,
                                  child: Text(
                                    _discussionList[index].date.toFormattedDate(),
                                    style: TextStyle(fontSize: 12, color: ColorConsts.textGrey, height: 1),
                                  ),
                                ),
                              ],
                            )
                          ],
                        ),
                        SizedBox(height: 4),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "تعليق من: " + _discussionList[index].userName,
                              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: ColorConsts.primaryBlue, height: 1.5),
                            ),
                            Text(
                              _discussionList[index].discussionText,
                              style: TextStyle(fontSize: 14, color: ColorConsts.textGrey, height: 1.4),
                            ),
                            if ((_discussionList[index]?.adminResponse ?? "").isNotEmpty) SizedBox(height: 4),
                            if ((_discussionList[index]?.adminResponse ?? "").isNotEmpty)
                              Text(
                                "رد من المسؤول: " + _discussionList[index].adminResponse,
                                style: TextStyle(fontSize: 14, color: ColorConsts.textGrey, height: 1.4),
                              ),
                          ],
                        )
                      ],
                    );
                  },
                )
              : Text(
                  "لا يوجد تعليقات",
                  style: TextStyle(fontSize: 12, color: ColorConsts.primaryBlue, height: 1.5),
                ),
        ),
        Positioned(
          bottom: 0,
          child: InkWell(
            borderRadius: BorderRadius.circular(30),
            onTap: () async {
              if (!AppState().isUserLogin) {
                Widget cancelButton = FlatButton(
                  child: Text("أرغب بالتسجيل"),
                  onPressed: () async {
                    Navigator.pop(context);
                    await Navigator.pushNamed(context, LoginScreen.routeName);
                    if (!AppState().isUserLogin) {
                      return;
                    }
                  },
                );
                Widget continueButton = FlatButton(
                  child: Text("استمرار كضيف"),
                  onPressed: () {
                    Navigator.pop(context);
                    return;
                  },
                );

                AlertDialog alert = AlertDialog(
                  content: Text("هذه الخاصية متاحه فقط للأعضاء المسجلين"),
                  actions: [
                    cancelButton,
                    continueButton,
                  ],
                );

                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return alert;
                  },
                );

                return;
              }
              showDialog(
                context: context,
                barrierColor: ColorConsts.secondaryWhite.withOpacity(0.8),
                builder: (BuildContext context) => DiscussionInputDialog(onCommentPress: (comment) {
                  sendComment(comment);
                }),
              );
            },
            child: Container(
              height: 40,
              padding: EdgeInsets.only(left: 24, right: 24),
              alignment: Alignment.centerRight,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30),
                color: ColorConsts.gradientPink,
                gradient: LinearGradient(
                  stops: [0.0, 0.5],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [ColorConsts.gradientPink, ColorConsts.gradientOrange],
                ),
              ),
              child: Text(
                "إضافة تعليق",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: Colors.white, height: 1.5),
              ),
            ),
          ),
        ),
      ],
    );
  }

  void _shareAyaAsLink() async {
    String _url =
        "${ApiConsts.baseUrl}/quran/tangheemtype?surahNo=${_ayatTangheemTypeMappedFirstData?.surahNo}&ayahNo=${_ayatTangheemTypeMappedFirstData?.ayahNo}&tanghemType=${_ayatTangheemTypeMappedFirstData?.tangheemTypeId}&numberinsurah=${_ayatTangheemTypeMappedFirstData?.ayatNumberInSurahs}";
    await Share.share(_url);
  }

  void _shareAyaAsImage() async {
    Utils.showLoading(context);
    try {
      RenderRepaintBoundary boundary = _globalKey.currentContext.findRenderObject();
      ui.Image image = await boundary.toImage(pixelRatio: 3.0);
      ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
      Uint8List pngBytes = byteData.buffer.asUint8List();

      final tempDir = await getTemporaryDirectory();
      final file = await File('${tempDir.path}/${DateTime.now().toString()}.png').create();
      await file.writeAsBytes(pngBytes);
      await TangheemUserApiClient().addStatistics(3);
      await Share.shareFiles(['${file.path}']);
      Utils.hideLoading(context);
    } catch (ex) {
      Future.delayed(Duration(seconds: 1), () {
        Utils.hideLoading(context);
      });
    }
  }

  Widget zoomButtons(String icon, VoidCallback onPressed, {double size, bool isAsset = true}) {
    return IconButton(
      highlightColor: Colors.transparent,
      splashColor: Colors.transparent,
      constraints: BoxConstraints(),
      padding: EdgeInsets.only(right: 2),
      icon: SvgPicture.asset(icon, height: size ?? 20, width: size ?? 20),
      onPressed: onPressed,
    );
  }
}
