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/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/auto_scroll_view/aya_scroll_view.dart';
import 'package:tangheem/widgets/auto_scroll_view/scroll_id.dart';
import 'package:tangheem/widgets/aya_player_widget.dart';
import 'package:tangheem/widgets/common_dropdown_button.dart';
import 'package:tangheem/widgets/text_highlight_widget.dart';

import 'tangheem_detail_screen.dart';

class QuranScreen extends StatefulWidget {
  static const String routeName = "/surah";
  final BookMarkModel bookmark;
  QuranScreen({Key key, this.bookmark}) : super(key: key);

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

class _QuranScreenState extends State<QuranScreen> {
  GlobalKey _globalKey = GlobalKey();
  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();
    scrollToId = ScrollToId(scrollController: scrollController);
    getBookMark();
    getPrefs();
    getSurah();
  }

  double fontSize = 18;

  SharedPreferences prefs;
  void getPrefs() async {
    prefs = await SharedPreferences.getInstance();
    fontSize = (prefs.getInt(GlobalConsts.fontZoomSize) ?? 18) + 0.0;
    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);
      //filterData();
    } catch (ex, tr) {
      Utils.hideLoading(context);
      Utils.handleException(ex, null);
    }
    setState(() {});
    getQuranByPageNo();
    getTangheemBySurahId();
  }

  List<BookMarkModel> _bookMark = [];
  void getBookMark() async {
    _bookMark = await BookMarkModel.getFromPrefs();
    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(getNextMultiple(numberOfAyah), (index) => index + 1).toList().where((element) => element == 1 || (element % 5) == 0).toList() ?? [];
    _fromAyaList = filteredAyahList.getRange(0, filteredAyahList.length - 1)?.toList() ?? [];

    // _toAyaList = filteredAyahList.getRange(1, filteredAyahList.length)?.toList() ?? [];
    // _currentPage = 0;
    // _selectedFromAya = 0;
    // _selectedToAya = 0;
    setState(() {});
    // getTangheemBySurahId();
  }

  void getTangheemBySurahId() async {
    //Utils.showLoading(context);
    try {
      _ayatTangheemTypeMapped = await TangheemUserApiClient().getTangheemBySurah(_selectedSurah + 1);
      _tangheemWords = _ayatTangheemTypeMapped?.data?.map((e) => e.highlightText)?.toList() ?? [];
    } catch (ex, tr) {
      Utils.handleException(ex, null);
    } finally {
      //Utils.hideLoading(context);
    }
    setState(() {});
    //getAyaByRange();
  }

  void getAyaByRange() async {
    Utils.showLoading(context);
    try {
      _ayaModel = await TangheemUserApiClient().getAyaByFilter(_selectedSurah + 1, _fromAyaList[_selectedFromAya], _toAyaList[_selectedToAya]);
      //setState(() {});
    } catch (ex, tr) {
      Utils.handleException(ex, null);
    } finally {
      Utils.hideLoading(context);
    }
    getTangheemBySurahId();
    scrollToId.animateTo("$_currentPage", duration: Duration(milliseconds: 300), curve: Curves.ease);
  }

  void getQuranByPageNo() async {
    Utils.showLoading(context);
    try {
      _ayaModel = await TangheemUserApiClient().getQuranByPageNo(_currentPage);
      Utils.hideLoading(context);
      setState(() {});
    } catch (ex, tr) {
      Utils.handleException(ex, null);
      Utils.hideLoading(context);
    }
    scrollToId.animateTo("$_currentPage", duration: Duration(milliseconds: 300), curve: Curves.ease);
  }

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

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

  final ScrollController scrollController = ScrollController();
  ScrollToId scrollToId;

  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";
  }

  String getNotNullValue(List<String> list, int index) {
    try {
      return list[index];
    } catch (ex) {
      return "";
    }
  }

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

  @override
  Widget build(BuildContext context) {
    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";

    return Container(
      padding: EdgeInsets.fromLTRB(16, 24, 16, 0),
      width: double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "اقرأ القرآن الكريم",
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1),
          ),
          SizedBox(height: 16),
          Row(
            children: [
              Expanded(
                child: CommonDropDownButton(_selectedSurah, hintText: "اختر السورة", list: _surahList, onSelect: (index) {
                  if (_selectedSurah != index) {
                    _selectedSurah = index;
                    _selectedToAya = -1;
                    _selectedFromAya = -1;
                    _toAyaList = [];
                    filterData();
                  }
                }),
              ),
              SizedBox(width: 4),
              Expanded(
                child: CommonDropDownButton(_selectedFromAya, hintText: "من الاية", list: _fromAyaList.map((e) => "من الاية" + " $e").toList(), onSelect: (index) {
                  if (_selectedFromAya != index) {
                    _selectedFromAya = index;
                    var abc = filteredAyahList.indexOf(_selectedFromAya);
                    print("index:$abc");
                    _toAyaList = filteredAyahList.getRange(_selectedFromAya + 1, filteredAyahList.length)?.toList() ?? [];
                    setState(() {});
                  }
                }),
              ),
              SizedBox(width: 4),
              Expanded(
                child: CommonDropDownButton(_selectedToAya, hintText: "الى الاية", list: _toAyaList.map((e) => "الى الاية" + " $e").toList(), onSelect: (index) {
                  if (_selectedToAya != index) {
                    _selectedToAya = index;
                    setState(() {});
                  }
                }),
              ),
            ],
          ),
          SizedBox(height: 8),
          Row(
            children: [
              commonIconButton("عرض", "assets/icons/go_forward.svg", () {
                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;
                  }
                }
              }),
              // SizedBox(width: 8),
              // commonIconButton(
              //     "مسح البحث",
              //     "assets/icons/cancel.svg",
              //     (_selectedSurah == -1 || _selectedFromAya == -1 || _selectedToAya == -1)
              //         ? null
              //         : () {
              //             _clearFilterAndRefreshData();
              //           }),
            ],
          ),
          SizedBox(height: 16),
          if (_surahAya.isNotEmpty)
            Expanded(
              child: Container(
                margin: EdgeInsets.only(top: 4, bottom: 4),
                padding: EdgeInsets.only(top: 16, bottom: 4, right: 16, left: 16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        nextOptionButton(
                            "assets/icons/prev.svg",
                            _currentSurahIndex <= 0 ? "" : getNotNullValue(_surahList, _currentSurahIndex - 1),
                            _currentSurahIndex <= 0
                                ? null
                                : (value) {
                                    _currentPage = _surahModel?.data?.elementAt(_surahList.indexOf(value))?.startPageNo ?? _currentPage;
                                    _clearFilterAndRefreshData();
                                  }),
                        previousOptionButton(
                            "assets/icons/next.svg",
                            _currentSurahIndex >= (_surahList.isNotEmpty ? (_surahList.length - 1) : 0) ? "" : getNotNullValue(_surahList, _currentSurahIndex + 1),
                            _currentSurahIndex >= (_surahList.isNotEmpty ? (_surahList.length - 1) : 0)
                                ? null
                                : (value) {
                                    _currentPage = _surahModel?.data?.singleWhere((element) => element.nameAR == value)?.startPageNo ?? _currentPage;
                                    _clearFilterAndRefreshData();
                                  }),
                      ],
                    ),
                    Expanded(
                      child: SingleChildScrollView(
                        physics: BouncingScrollPhysics(),
                        child: RepaintBoundary(
                          key: _globalKey,
                          child: Material(
                            color: Colors.white,
                            child: ListView(
                              physics: NeverScrollableScrollPhysics(),
                              shrinkWrap: true,
                              padding: EdgeInsets.only(top: 16, bottom: 8),
                              children: [
                                // Text(
                                //   "بسم الله الرحمن الرحيم",
                                //   textAlign: TextAlign.center,
                                //   style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1),
                                // ),
                                // SizedBox(height: 8),
                                Container(padding: EdgeInsets.only(left: 4, right: 4), child: quranText()
                                    // Text(
                                    //   _surahAya,
                                    //   textAlign: TextAlign.center,
                                    //   style: TextStyle(
                                    //     fontFamily: "UthmanicHafs",
                                    //     fontSize: 18,
                                    //     color: ColorConsts.primaryBlue,
                                    //     fontWeight: FontWeight.bold,
                                    //   ),
                                    // ),
                                    // todo "sikander" : lines commented for future
                                    //     TextHighLightWidget(
                                    //   text: _surahAya,
                                    //   valueColor: ColorConsts.primaryBlue,
                                    //   highLightColor: ColorConsts.primaryBlue,
                                    //   highlights: _tangheemWords,
                                    //   onTap: (value) {
                                    //     List<AyatTangheemTypeMappedData> _ayatList = _ayatTangheemTypeMapped.data?.where((element) => element.highlightText == value)?.toList() ?? [];
                                    //     if (_ayatList.length > 1) {
                                    //       _selectTangheemType(_ayatList);
                                    //     } else {
                                    //       Navigator.pushNamed(context, TangheemDetailScreen.routeName, arguments: _ayatList.first);
                                    //     }
                                    //   },
                                    //   style: TextStyle(
                                    //     fontFamily: "UthmanicHafs",
                                    //     fontSize: 18,
                                    //     fontWeight: FontWeight.bold,
                                    //   ),
                                    // ),
                                    ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 4),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        nextOptionButton(
                            "assets/icons/prev_single.svg",
                            "الصفحة السابقة",
                            _currentPage <= 1
                                ? null
                                : (value) {
                                    _currentPage = _currentPage - 1;
                                    _clearFilterAndRefreshData();
                                  }),
                        previousOptionButton(
                            "assets/icons/next_single.svg",
                            "الصفحة التالية",
                            _currentPage == 604
                                ? null
                                : (value) {
                                    _currentPage = _currentPage + 1;
                                    _clearFilterAndRefreshData();
                                  }),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          // AyaPlayerWidget(surahName: _surahList.isNotEmpty ? _surahList[_selectedSurah] : "", globalKey: _globalKey)
        ],
      ),
    );
  }

  Widget commonIconButton(String title, String iconString, VoidCallback callback) {
    return InkWell(
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
      onTap: callback,
      child: Container(
        height: 36,
        decoration: BoxDecoration(
          color: callback == null ? ColorConsts.secondaryPink.withOpacity(.5) : ColorConsts.secondaryPink,
          borderRadius: BorderRadius.circular(6),
        ),
        padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              title,
              maxLines: 1,
              style: TextStyle(fontSize: 12, color: Colors.white),
            ),
            SizedBox(width: 12),
            SvgPicture.asset(iconString, width: 20, height: 20, color: Colors.white),
          ],
        ),
      ),
    );
  }

  Widget nextOptionButton(String icon, String text, Function(String) onPressed) {
    return InkWell(
      onTap: () => onPressed(text),
      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),
                ),
              ],
            ),
    );
  }

  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 = _ayatTangheemTypeMapped?.data?.where((element) => element.tangheemTypeName == e)?.toList() ?? [];
                  Navigator.pushNamed(context, TangheemDetailScreen.routeName, arguments: list);
                },
              ))
          .toList(),
    );

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

  Widget previousOptionButton(String icon, String text, Function(String) onPressed) {
    return InkWell(
      onTap: () => onPressed(text),
      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),
              ],
            ),
    );
  }

  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.reverseAyatNumber();

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

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

    textSpanList.add(
      TextSpan(
        text: "\n" + "$_currentPage",
        style: TextStyle(
          fontFamily: "UthmanicHafs",
          fontSize: fontSize,
          color: ColorConsts.primaryBlue,
          fontWeight: FontWeight.bold,
        ),
      ),
    );

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

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

  void showAyaOptions() {
    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 = _ayatTangheemTypeMapped?.data?.where((element) => element.ayahNo == _selectedAyaForBookmark.ayahID)?.toList() ?? [];
                      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;
                      }
                      Navigator.pushNamed(context, TangheemDetailScreen.routeName, arguments: list);
                    },
                    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("اضافة الأية كمرجع؟")],
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }
}