tangheem/lib/ui/screens/surah_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/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';

class SurahScreen extends StatefulWidget {
  static const String routeName = "/surah";
  final String query;

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

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

class _SurahScreenState extends State<SurahScreen> {
  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;
  AyaModel _ayaModel;

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

  void getSurahAndAya() async {
    Utils.showLoading(context);
    try {
      _surahModel = await TangheemUserApiClient().getSurahs();
      _surahList = _surahModel.data.map((element) => element.nameEN).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;
    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",
                                    color: ColorConsts.primaryBlue,
                                    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] : null, 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),
                ),
              ],
            ),
    );
  }

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