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/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 SurahModel surahModel;
  final String query;

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

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

class _QuranScreenState extends State<QuranScreen> {
  GlobalKey _globalKey = GlobalKey();
  int _selectedSurah = 0;
  int _selectedFromAya = 0;
  int _selectedToAya = 0;

  int _currentPage = 0;
  int _ayaInPage = 5;
  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 {
    Utils.showLoading(context);
    try {
      if (widget.surahModel == null) {
        _surahModel = await TangheemUserApiClient().getSurahs();
      } else {
        _surahModel = widget.surahModel;
      }
      _surahList = _surahModel.data.map((element) => element.nameAR).toList();
      filterData();
    } catch (ex, tr) {
      Utils.handleException(ex, null);
    } finally {
      Utils.hideLoading(context);
    }
  }

  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;
    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);
    }
    getAyaByRange();
  }

  void getAyaByRange() async {
    Utils.showLoading(context);
    try {
      _ayaModel = await TangheemUserApiClient().getAyaByRange(_ayaInPage, 1, _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);
  }

  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;

  @override
  Widget build(BuildContext context) {
    String _surahAya = _ayaModel?.data?.map((e) => e.ayahText)?.toList()?.fold("", (value, element) => value + element) ?? "";
    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, list: _surahList, onSelect: (index) {
                  if (_selectedSurah != index) {
                    _selectedSurah = index;
                    _selectedToAya = 0;
                    _selectedFromAya = 0;
                    filterData();
                  }
                }),
              ),
              SizedBox(width: 4),
              Expanded(
                child: CommonDropDownButton(_selectedFromAya, list: _fromAyaList.map((e) => "من الاية" + " $e").toList(), onSelect: (index) {
                  if (_selectedFromAya != index) {
                    _selectedFromAya = index;
                    _selectedToAya = index;
                    _currentPage = index;
                    getAyaByRange();
                  }
                }),
              ),
              SizedBox(width: 4),
              Expanded(
                child: CommonDropDownButton(_selectedToAya, list: _toAyaList.map((e) => "الى الاية" + " $e").toList(), onSelect: (index) {
                  if (_selectedToAya != index) {
                    _selectedToAya = index;
                    _currentPage = index;
                    getAyaByRange();
                  }
                }),
              ),
            ],
          ),
          SizedBox(height: 16),
          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",
                          _selectedSurah == 0 ? "" : _surahList[_selectedSurah - 1],
                          _selectedSurah == 0
                              ? null
                              : () {
                                  _selectedSurah = _selectedSurah - 1;
                                  filterData();
                                }),
                      previousOptionButton(
                          "assets/icons/next.svg",
                          _selectedSurah == (_surahList.isNotEmpty ? (_surahList.length - 1) : 0) ? "" : _surahList[_selectedSurah + 1],
                          _selectedSurah == (_surahList.isNotEmpty ? (_surahList.length - 1) : 0)
                              ? null
                              : () {
                                  _selectedSurah = _selectedSurah + 1;
                                  filterData();
                                }),
                    ],
                  ),
                  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<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 == 0
                              ? null
                              : () {
                                  _currentPage = _currentPage - 1;
                                  _selectedFromAya = _selectedFromAya - 1;
                                  _selectedToAya = _selectedToAya - 1;
                                  getAyaByRange();
                                }),
                      previousOptionButton(
                          "assets/icons/next_single.svg",
                          "الآيات التالية",
                          _currentPage == (_toAyaList.isNotEmpty ? (_toAyaList.length - 1) : 0)
                              ? null
                              : () {
                                  _currentPage = _currentPage + 1;
                                  _selectedFromAya = _selectedFromAya + 1;
                                  _selectedToAya = _selectedToAya + 1;
                                  getAyaByRange();
                                }),
                    ],
                  ),
                ],
              ),
            ),
          ),
          // AyaPlayerWidget(surahName: _surahList.isNotEmpty ? _surahList[_selectedSurah] : "", globalKey: _globalKey)
        ],
      ),
    );
  }

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

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