tangheem/lib/ui/screens/quran_screen.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_svg/flutter_svg.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/utils.dart';
import 'package:tangheem/models/aya_model.dart';
import 'package:tangheem/models/aya_tangheem_type_mapped.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 String query;

  QuranScreen({Key key, @required this.query}) : super(key: key);

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

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 = [];

  @override
  void initState() {
    super.initState();
    scrollToId = ScrollToId(scrollController: scrollController);
    getSurah();
  }

  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 = 1;
      Utils.hideLoading(context);
      //filterData();
    } catch (ex, tr) {
      Utils.handleException(ex, null);
      Utils.hideLoading(context);
    }
    setState(() {});
    getQuranByPageNo();
  }

  int numberOfAyah = 0;
  void filterData() {
    numberOfAyah = _surahModel?.data[_selectedSurah]?.numberOfAyahs ?? 0;
    var 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;
    });

    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;
                    filterData();
                  }
                }),
              ),
              SizedBox(width: 4),
              Expanded(
                child: CommonDropDownButton(_selectedFromAya, hintText: "من الاية", list: _fromAyaList.map((e) => "من الاية" + " $e").toList(), onSelect: (index) {
                  if (_selectedFromAya != index) {
                    _selectedFromAya = index;
                    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;
                }
                if (_selectedFromAya < 0) {
                  Utils.showToast("لم تحدد بداية الآية");
                  return;
                }
                if (_selectedToAya < 0) {
                  Utils.showToast("لم تحدد الآية المنتهية");
                  return;
                }
                getAyaByRange();
              }),
              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:

                                      // 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: 8),
                    // AyaScrollViewer(
                    //   scrollDirection: Axis.horizontal,
                    //   scrollToId: scrollToId,
                    //   children: <ScrollContent>[
                    //     for (int i = 0; i < _fromAyaList.length; i++)
                    //       ScrollContent(
                    //         id: '$i',
                    //         child: Text(
                    //           " ${i + 1} ",
                    //           style: TextStyle(fontSize: 16, color: _currentPage == i ? ColorConsts.secondaryOrange : ColorConsts.textHintGrey),
                    //         ),
                    //       ),
                    //   ],
                    // ),
                    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<AyatTangheemTypeMappedData> list) async {
    SimpleDialog dialog = SimpleDialog(
      title: Text(
        'اختر نوع تنغيم',
        textDirection: TextDirection.rtl,
        style: TextStyle(color: ColorConsts.primaryBlack),
      ),
      children: list
          .map((e) => SimpleDialogOption(
                child: Text(
                  e.tangheemTypeName,
                  textDirection: TextDirection.rtl,
                  style: TextStyle(color: ColorConsts.primaryBlue),
                ),
                onPressed: () {
                  Navigator.pop(context);
                  Navigator.pushNamed(context, TangheemDetailScreen.routeName, arguments: e);
                },
              ))
          .toList(),
    );

    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),
              ],
            ),
    );
  }
}