tangheem/lib/ui/screens/quran_screen.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:shared_preferences/shared_preferences.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/int_extensions.dart';
import 'package:tangheem/extensions/string_extensions.dart';
import 'package:tangheem/extensions/widget_extensions.dart';
import 'package:tangheem/models/aya_model.dart';
import 'package:tangheem/models/aya_tangheem_type_mapped.dart';
import 'package:tangheem/models/bookmark_model.dart';
import 'package:tangheem/models/surah_model.dart';
import 'package:tangheem/widgets/common_dropdown_button.dart';
import 'package:tangheem/widgets/new/CommonHeader.dart';

import 'tangheem_detail_screen.dart';

class QuranScreen extends StatefulWidget {
  static const String routeName = "/quran";
  final BookMarkModel bookmark;

  QuranScreen({Key key, this.bookmark}) : super(key: key);

  @override
  _QuranScreenState createState() {
    return _QuranScreenState(bookmark);
  }
}

class _QuranScreenState extends State<QuranScreen> {
  int _selectedSurah = -1;
  int _selectedFromAya = -1;
  int _selectedToAya = -1;

  int _currentSurahIndex = -1;
  int _currentPage = 0;

  List<String> _surahList = [];
  List<int> _fromAyaList = [];
  List<int> _toAyaList = [];

  SurahModel _surahModel;
  AyatTangheemTypeMapped _ayatTangheemTypeMapped;
  AyaModel _ayaModel;

  List<String> _tangheemWords = [];

  _QuranScreenState(this._selectedAyaForBookmark);

  @override
  void initState() {
    super.initState();
    getBookMark();
    getPrefs();
    getSurah();
  }

  int fontSize = 18;

  SharedPreferences prefs;

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

  void getSurah() async {
    try {
      if (AppState().getSurahModel == null) {
        Utils.showLoading(context);
        _surahModel = await TangheemUserApiClient().getSurahs();
        AppState().setSurahModel(_surahModel);
      } else {
        _surahModel = AppState().getSurahModel;
      }
      _surahList = _surahModel.data.map((element) => element.nameAR).toList();
      _currentPage = widget.bookmark?.page ?? 1;
      Utils.hideLoading(context);
    } catch (ex) {
      Utils.hideLoading(context);
      if (mounted) Utils.handleException(ex, null);
    }
    setState(() {});
    getQuranByPageNo();
    // getTangheemBySurahId();
  }

  List<BookMarkModel> _bookMark = [];

  void getBookMark() async {
    _bookMark = await BookMarkModel.getFromPrefs();
    if (_bookMark.length == 1) {
      _selectedAyaForBookmark = _selectedAyaForBookmark ?? _bookMark.first;
    } else if (_bookMark.length > 1) {
      _selectedAyaForBookmark = _selectedAyaForBookmark ?? _bookMark.last;
    }
    setState(() {});
  }

  int numberOfAyah = 0;
  var filteredAyahList = [];

  void filterData() {
    numberOfAyah = _surahModel?.data[_selectedSurah]?.numberOfAyahs ?? 0;
    filteredAyahList = List.generate(numberOfAyah, (index) => index + 1).toList().where((element) => element == 1 || (element % 5) == 0 || element == numberOfAyah).toList() ?? [];
    _fromAyaList = filteredAyahList.getRange(0, filteredAyahList.length - 1)?.toList() ?? [];

    setState(() {});
  }

  Future<List<AyatTangheemTypeMappedData>> getTangheemBySurahId(int surahId, int numberInSurah) async {
    Utils.showLoading(context);
    try {
      AyatTangheemTypeMapped _ayatTangheemTypeMapped = await TangheemUserApiClient().getTangheemBySurah(surahId, numberInSurah);
      Utils.hideLoading(context);
      return _ayatTangheemTypeMapped.data;
    } catch (ex) {
      Utils.hideLoading(context);
      // if (mounted) Utils.handleException(ex, null);
      return [];
    }
  }

  void getAyaByRange() async {
    Utils.showLoading(context);
    try {
      _ayaModel = await TangheemUserApiClient().getAyaByFilter(_selectedSurah + 1, _fromAyaList[_selectedFromAya], _toAyaList[_selectedToAya]);
    } catch (ex) {
      if (mounted) Utils.handleException(ex, null);
    } finally {
      Utils.hideLoading(context);
    }
    setState(() {});
  }

  void getQuranByPageNo() async {
    Utils.showLoading(context);
    try {
      _ayaModel = await TangheemUserApiClient().getQuranByPageNo(_currentPage);
      //  await getTangheemBySurahId();
      Utils.hideLoading(context);
      setState(() {});
    } catch (ex) {
      if (mounted) Utils.handleException(ex, null);
      Utils.hideLoading(context);
    }
  }

  int getNextMultiple(int num) {
    int multipleOf = 5;
    int nextDiff = multipleOf - (num % multipleOf);
    int total = num + nextDiff;
    return total;
  }

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

  String getBismillahWithSurahName(int _surahID, String _surahName, bool isShowBismillah, bool isFirstIsAya) {
    String _bismillah = "\n بِسۡمِ ٱللَّهِ ٱلرَّحۡمَٰنِ ٱلرَّحِيم";
    if (_surahID == 9) {
      _bismillah = "";
    }
    if (isFirstIsAya && isShowBismillah) {
      return "" + _surahName + "$_bismillah \n";
    } else if (isShowBismillah) {
      return "\n" + _surahName + "$_bismillah \n";
    }
    return "" + _surahName + "\n";
  }

  void _clearFilterAndRefreshData() {
    _selectedSurah = -1;
    _selectedFromAya = -1;
    _selectedToAya = -1;
    getQuranByPageNo();
  }

  @override
  Widget build(BuildContext context) {
    bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

    var tempList = _ayaModel?.data?.map((e) => e.surahNameAR)?.toList()?.toSet()?.toList() ?? [];
    String _surahName = "";
    _surahName = tempList.isEmpty ? "" : tempList?.last ?? "";
    int index = _surahList.indexWhere((element) => element == _surahName);
    if (index != null) {
      _currentSurahIndex = index;
    }
    String _surahAya = "";
    _ayaModel?.data?.forEach((element) {
      var temp = element.numberInSurah == 1
          ? getBismillahWithSurahName(element.surahID, element.surahNameAR, element.surahID != 1, _surahAya.length <= 1) + element.reverseAyatNumber()
          : element.reverseAyatNumber();
      _surahAya = _surahAya + temp + " ";
    });

    _surahAya = _surahAya + "\n" + "$_currentPage";
    // _surahAya = _surahAya + "\n" + "$_currentPage";

    List<Widget> widList = [
      "اقرأ القرآن الكريم".toText(30),
      8.height,
      "اختر السورة والآيات التي تريد قراءتها".toText(14),
      16.height,
      CommonDropDownButton(
          index: _selectedSurah,
          hintText: "اختر السورة",
          list: _surahList,
          onSelect: (index) {
            if (_selectedSurah != index) {
              _selectedSurah = index;
              _selectedToAya = -1;
              _selectedFromAya = -1;
              _toAyaList = [];
              filterData();
            }
          }).paddingOnly(left: 41, right: 41),
      10.height,
      Row(
        children: [
          Expanded(
            child: CommonDropDownButton(
                index: _selectedToAya,
                hintText: "إلى الآية",
                list: _toAyaList.map((e) => "إلى الآية" + " $e").toList(),
                onSelect: (index) {
                  if (_selectedToAya != index) {
                    _selectedToAya = index;
                    setState(() {});
                  }
                }),
          ),
          12.width,
          Expanded(
            child: CommonDropDownButton(
                index: _selectedFromAya,
                hintText: "من الآية",
                list: _fromAyaList.map((e) => "من الآية" + " $e").toList(),
                onSelect: (index) {
                  if (_selectedFromAya != index) {
                    _selectedFromAya = index;
                    _selectedToAya = -1;
                    filteredAyahList.indexOf(_selectedFromAya);
                    _toAyaList = filteredAyahList.getRange(_selectedFromAya + 1, filteredAyahList.length)?.toList() ?? [];
                    setState(() {});
                  }
                }),
          ),
        ],
      ).paddingOnly(left: 41, right: 41),
      10.height,
      commonIconButton(() {
        if (_selectedSurah < 0) {
          Utils.showToast("يرجى اختيار السورة");
          return;
        } else {
          if (_selectedFromAya < 0 && _selectedToAya < 0) {
            _currentPage = _surahModel?.data[_selectedSurah]?.startPageNo;
            getQuranByPageNo();
            return;
          }
          if (_selectedFromAya >= 0 && _selectedToAya >= 0) {
            getAyaByRange();
            return;
          }
        }
      }).paddingOnly(left: 41, right: 41),
    ];

    Widget quranTextView = SingleChildScrollView(
      physics: BouncingScrollPhysics(),
      child: Padding(
        padding: EdgeInsets.only(left: 4, right: 4),
        child: quranText(),
      ),
    );
    // if (MediaQuery.of(context).orientation == Orientation.portrait) {
    //   quranTextView = Expanded(child: quranTextView);
    // }

    Widget quranView = Container(
      margin: EdgeInsets.only(top: 28, bottom: 14),
      padding: EdgeInsets.only(top: 16, bottom: 12, right: 16, left: 16),
      decoration: BoxDecoration(
        color: ColorConsts.brownLightECColor,
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: ColorConsts.brownB7Color, width: 0.35),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              previousOptionButton(
                  Icons.arrow_back_ios_rounded,
                  _currentSurahIndex >= (_surahList.isNotEmpty ? (_surahList.length - 1) : 0) ? "" : Utils.getNotNullValue(_surahList, _currentSurahIndex + 1) ?? "",
                  _currentSurahIndex >= (_surahList.isNotEmpty ? (_surahList.length - 1) : 0)
                      ? null
                      : (value) {
                          _currentPage = _surahModel?.data?.singleWhere((element) => element.nameAR == value)?.startPageNo ?? _currentPage;
                          _clearFilterAndRefreshData();
                        }),
              nextOptionButton(
                  Icons.arrow_forward_ios_rounded,
                  _currentSurahIndex <= 0 ? "" : Utils.getNotNullValue(_surahList, _currentSurahIndex - 1) ?? "",
                  _currentSurahIndex <= 0
                      ? null
                      : (value) {
                          _currentPage = _surahModel?.data?.elementAt(_surahList.indexOf(value))?.startPageNo ?? _currentPage;
                          _clearFilterAndRefreshData();
                        }),
            ],
          ),
          quranText(),
          Row(
            children: [
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  SvgPicture.asset("assets/icons/new/dimension.svg", width: 12, color: ColorConsts.brownLightColor),
                  "ت".toText(12, color: ColorConsts.brownLightColor),
                ],
              ).onPress(() {
                if (fontSize <= 12) {
                  Utils.showToast("وصل حجم الخط إلى الحد الأدنى للحجم");
                  return;
                }
                fontSize -= 2;
                prefs.setInt(GlobalConsts.fontZoomSize, fontSize);
                setState(() {});
              }),
              12.width,
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  SvgPicture.asset("assets/icons/new/dimension.svg", width: 16, color: ColorConsts.brownLightColor),
                  "ت".toText(16, color: ColorConsts.brownLightColor),
                ],
              ).onPress(() {
                if (fontSize >= 36) {
                  Utils.showToast("وصل حجم الخط إلى الحد الأقصى للحجم");
                  return;
                }
                fontSize += 2;
                prefs.setInt(GlobalConsts.fontZoomSize, fontSize);
                setState(() {});
              })
            ],
          )
          //  quranTextView,
        ],
      ),
    );

    // if (MediaQuery.of(context).orientation == Orientation.portrait) {
    //   quranView = Expanded(child: quranView);
    // }
    List<Widget> finalViewList = <Widget>[] +
        widList +
        [
          if (_surahAya.isNotEmpty && _surahAya.length > 2) ...[
            quranView,
            if (_selectedFromAya == -1 && _selectedToAya == -1)
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  previousOptionButton(
                      Icons.arrow_back_ios_rounded,
                      "الصفحة التالية",
                      _currentPage == 604
                          ? null
                          : (value) {
                              _currentPage = _currentPage + 1;
                              _clearFilterAndRefreshData();
                            }),
                  nextOptionButton(
                      Icons.arrow_forward_ios_rounded,
                      "الصفحة السابقة",
                      _currentPage <= 1
                          ? null
                          : (value) {
                              _currentPage = _currentPage - 1;
                              _clearFilterAndRefreshData();
                            }),
                ],
              ),
          ]
        ];
    var multiModeView;
    // if (MediaQuery.of(context).orientation != Orientation.portrait) {
    //   multiModeView = Padding(
    //     padding: EdgeInsets.fromLTRB(16, 24, 16, 0),
    //     child: Column(
    //       crossAxisAlignment: CrossAxisAlignment.center,
    //       children: finalViewList,
    //     ),
    //   );
    // } else {
    //   multiModeView = ListView(
    //     padding: EdgeInsets.fromLTRB(16, 24, 16, 0),
    //     physics: BouncingScrollPhysics(),
    //     children: finalViewList,
    //   );
    // }

    multiModeView = SingleChildScrollView(
      padding: EdgeInsets.fromLTRB(24, isPortrait ? 96 : 50, 24, 140),
      physics: BouncingScrollPhysics(),
      child: Column(children: finalViewList),
    );

    return SizedBox(
      width: double.infinity,
      child: Stack(
        children: [
          SizedBox(
            width: double.infinity,
            child: AspectRatio(
              aspectRatio: 375 / 345,
              child: Image.asset(
                "assets/icons/new/quran_bg.jpg",
                fit: BoxFit.cover,
                alignment: Alignment(-0.7, 0.5),
              ),
            ),
          ),
          multiModeView
        ],
      ),
    );
  }

  Widget commonIconButton(VoidCallback callback) {
    return InkWell(
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
      onTap: callback,
      child: Container(
        height: 36,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: callback == null ? ColorConsts.brownLightColor.withOpacity(.5) : ColorConsts.brownLightColor.withOpacity(.5),
          borderRadius: BorderRadius.circular(10),
        ),
        padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            Transform.rotate(angle: 1, child: Icon(Icons.play_arrow_outlined, size: 20, color: ColorConsts.brownLightColor)),
            8.width,
            "البحث".toText(14, color: ColorConsts.brownLightColor),
          ],
        ),
      ),
    );
  }

  Widget nextOptionButton(IconData icon, String text, Function(String) onPressed) {
    return InkWell(
      onTap: () => onPressed(text),
      child: onPressed == null
          ? SizedBox()
          : Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                text.toText(10, color: ColorConsts.greyA7Color),
                Icon(icon, color: ColorConsts.greyA7Color, size: 10),
              ],
            ),
    );
  }

  void _selectTangheemType(List<String> list, List<AyatTangheemTypeMappedData> dataList) async {
    SimpleDialog dialog = SimpleDialog(
      title: Text(
        'اختر نوع تنغيم',
        textDirection: TextDirection.rtl,
        style: TextStyle(color: ColorConsts.primaryBlack),
      ),
      children: list
          .map((e) => SimpleDialogOption(
                child: Text(
                  e,
                  textDirection: TextDirection.rtl,
                  style: TextStyle(color: ColorConsts.primaryBlue),
                ),
                onPressed: () {
                  Navigator.pop(context);
                  var list = dataList.where((element) => element.tangheemTypeName == e)?.toList() ?? [];
                  var name = dataList.firstWhere((element) => element.tangheemTypeName == e, orElse: null);

                  TangheemDetailParams tangheem = TangheemDetailParams(selectedTangheemTypeId: name?.ayaTangheemTypeId ?? "", ayatTangheemTypeMappedDataList: list);
                  Navigator.pushNamed(context, TangheemDetailScreen.routeName, arguments: tangheem);
                },
              ))
          .toList(),
    );

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

  Widget previousOptionButton(IconData icon, String text, Function(String) onPressed) {
    return InkWell(
      onTap: () => onPressed(text),
      child: onPressed == null
          ? SizedBox()
          : Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(icon, color: ColorConsts.greyA7Color, size: 10),
                text.toText(10, color: ColorConsts.greyA7Color),
              ],
            ),
    );
  }

  BookMarkModel _selectedAyaForBookmark;

  Widget quranText() {
    List<InlineSpan> textSpanList = [];
    String _surahAya = "";
    _ayaModel?.data?.forEach((element) {
      var temp =
          element.numberInSurah == 1 ? getBismillahWithSurahName(element.surahID, element.surahNameAR, element.surahID != 1, _surahAya.length <= 1) + element.reverseAyatNumber() : element.ayahText;

      textSpanList.add(TextSpan(
        text: temp + " ",
        style: TextStyle(
          backgroundColor: _selectedAyaForBookmark?.ayahID == element.ayahID ? ColorConsts.secondaryOrange.withOpacity(.4) : Colors.transparent,
          fontFamily: "UthmanicHafs",
          fontSize: fontSize.toDouble(),
          color: ColorConsts.brownB6CColor,
          fontWeight: FontWeight.bold,
        ),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            setState(() {
              if (_selectedAyaForBookmark == null) {
                _selectedAyaForBookmark = BookMarkModel.fromJson(element.toJson());
                showAyaOptions(element);
                return;
              }
              _selectedAyaForBookmark = null;
            });
          },
      ));

      _surahAya = _surahAya + temp + " ";
    });

    // textSpanList.add(  // comment fot test
    //   TextSpan(
    //     text: "\n" + "$_currentPage",
    //     style: TextStyle(
    //       fontFamily: "BArabics",
    //       fontSize: fontSize.toDouble(),
    //       color: ColorConsts.primaryBlue,
    //       fontWeight: FontWeight.bold,
    //     ),
    //   ),
    // );

    _surahAya = _surahAya + "\n" + "$_currentPage";

    return RichText(
      textAlign: TextAlign.center,
      textWidthBasis: TextWidthBasis.parent,
      text: TextSpan(
        children: textSpanList,
      ),
    );
  }

  void showAyaOptions(AyaModelData ayaModelData) {
    showModalBottomSheet(
        context: context,
        backgroundColor: Colors.transparent,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
        builder: (context) {
          return Directionality(
            textDirection: TextDirection.rtl,
            child: Container(
              margin: EdgeInsets.all(16),
              padding: EdgeInsets.symmetric(vertical: 12, horizontal: 12),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  InkWell(
                    onTap: () async {
                      Navigator.pop(context);
                      List<AyatTangheemTypeMappedData> list = [];
                      list = await getTangheemBySurahId(ayaModelData.surahID, ayaModelData.numberInSurah);
                      if (list.isEmpty) {
                        Utils.showToast("لا توجد أساليب تنغيم في هذه الآية");
                        return;
                      }

                      List<String> tempList = list.map((element) => element.tangheemTypeName).toList().toSet().toList();

                      if (tempList.length > 1) {
                        _selectTangheemType(tempList, list);
                        return;
                      }

                      var name = list.firstWhere((element) => element.tangheemTypeName == tempList.first, orElse: null);
                      TangheemDetailParams tangheem = TangheemDetailParams(selectedTangheemTypeId: name?.ayaTangheemTypeId ?? "", ayatTangheemTypeMappedDataList: list);
                      Navigator.pushNamed(this.context, TangheemDetailScreen.routeName, arguments: tangheem);
                    },
                    child: Row(
                      children: [Text("تفاصيل الأساليب")],
                    ),
                  ),
                  SizedBox(height: 8),
                  InkWell(
                    onTap: () {
                      Navigator.pop(context);
                      var temp = _bookMark.firstWhere((element) => element.ayahID == _selectedAyaForBookmark.ayahID, orElse: () => null);
                      if (temp != null) {
                        Utils.showToast("هذه الآية مضافة سابقا");
                        return;
                      }
                      _bookMark.add(_selectedAyaForBookmark);
                      BookMarkModel.saveToPrefs(_bookMark);
                      Utils.showToast("تم إضافة الآية كمرجع");
                    },
                    child: Row(
                      children: [Text("إضافة الآية كمرجع")],
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }

  Widget zoomButtons(String icon, VoidCallback onPressed, {double size, bool isAsset = true}) {
    return IconButton(
      padding: EdgeInsets.zero,
      icon: SvgPicture.asset(icon, height: size ?? 24, width: size ?? 24),
      onPressed: onPressed,
    );
  }

  Widget CommonDropDownButton(
      {int index = 0, String hintText = "", String icon, Color iconColor, Color color, bool isDropDown = true, VoidCallback onPressed, Function(int) onSelect, double widthHeight, List<String> list}) {
    return InkWell(
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
      onTap: onPressed,
      child: Container(
        height: 34,
        decoration: BoxDecoration(
          color: Colors.transparent,
          borderRadius: BorderRadius.circular(10),
          border: Border.all(color: ColorConsts.borderDarkText, width: .75),
        ),
        padding: EdgeInsets.only(left: 17, right: 17),
        child: DropdownButtonHideUnderline(
          child: DropdownButton<int>(
            isExpanded: isDropDown,
            dropdownColor: ColorConsts.secondaryWhite,
            iconSize: 0,
            hint: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(Icons.arrow_drop_down_sharp, color: ColorConsts.borderDarkText),
                Text(
                  (list.isEmpty || index < 0) ? hintText : list[index],
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.end,
                  style: TextStyle(fontSize: 14, color: ColorConsts.brownColor),
                ).expanded,
              ],
            ),
            focusColor: Colors.white,
            style: TextStyle(color: Colors.white),
            items: !isDropDown
                ? []
                : [
                    for (int i = 0; i < list.length; i++)
                      DropdownMenuItem<int>(
                        value: i,
                        child: SizedBox(
                          width: double.infinity,
                          child: Text(
                            list[i],
                            maxLines: 1,
                            textDirection: TextDirection.rtl,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(fontSize: 14, color: ColorConsts.primaryBlack),
                          ),
                        ),
                      )
                  ],
            onChanged: onSelect,
          ),
        ),
      ),
    );
  }
}

class TangheemTemp {
  final String tangheemName;
  final String ayaTangheemId;

  TangheemTemp(this.tangheemName, this.ayaTangheemId);
}