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/surah_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 { GlobalKey _globalKey = GlobalKey(); int _selectedSurah = -1; int _selectedFromAya = -1; int _selectedToAya = -1; int _currentSurahIndex = -1; int _currentPage = 0; List _surahList = []; List _fromAyaList = []; List _toAyaList = []; SurahModel _surahModel; AyatTangheemTypeMapped _ayatTangheemTypeMapped; AyaModel _ayaModel; List _tangheemWords = []; @override void initState() { super.initState(); scrollToId = ScrollToId(scrollController: scrollController); getSurah(); } void getSurah() async { try { if (SurahAppState().getSurahModel == null) { Utils.showLoading(context); _surahModel = await TangheemUserApiClient().getSurahs(); SurahAppState().setSurahModel(_surahModel); } else { _surahModel = SurahAppState().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); } scrollToId.animateTo("$_currentPage", duration: Duration(milliseconds: 300), curve: Curves.ease); } void getQuranByPageNo() async { Utils.showLoading(context); try { // _currentPage = 603; _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(String _surahName, bool isShowBismillah, bool isFirstIsAya) { if (isFirstIsAya && isShowBismillah) { return "" + _surahName + "\n بِسۡمِ ٱللَّهِ ٱلرَّحۡمَٰنِ ٱلرَّحِيمِ \n"; } else if (isShowBismillah) { return "\n" + _surahName + "\n بِسۡمِ ٱللَّهِ ٱلرَّحۡمَٰنِ ٱلرَّحِيمِ \n"; } return "" + _surahName + "\n"; } String getNotNullValue(List 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.surahNameAR, element.surahID != 1, _surahAya.length <= 1) + element.ayahText : element.ayahText; _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, // highlights: _tangheemWords, // onTap: (value) { // List _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: [ // 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 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), ], ), ); } }