tangheem/lib/ui/screens/tangheem_detail_screen.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:tangheem/classes/colors.dart';
import 'package:tangheem/models/aya_tangheem_type_mapped.dart';
import 'package:tangheem/widgets/aya_player_widget.dart';
import 'package:tangheem/widgets/text_highlight_widget.dart';

class TangheemDetailScreen extends StatefulWidget {
  static const String routeName = "/tangheem_detail";
  final AyatTangheemTypeMappedData ayatTangheemTypeMappedData;
  TangheemDetailScreen({Key key, this.ayatTangheemTypeMappedData}) : super(key: key);

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

class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
  GlobalKey _globalKey = GlobalKey();
  List<TangheemProperty> _tangheemInsideTableTrueList = [];
  List<TangheemProperty> _tangheemInsideTableValueList = [];
  List<TangheemProperty> _tangheemInsideTableEmptyList = [];
  List<String> _tangheemWords = [];

  int _currentTangheemPage = -1;
  AyatTangheemTypeMapped _ayatTangheemTypeMapped;
  AyatTangheemTypeMappedData _ayatTangheemTypeMappedData;

  @override
  void initState() {
    super.initState();
    _tangheemInsideTableValueList = [];
    _tangheemInsideTableEmptyList = [];
    filterData();
  }

  // void getTangheemData() async {
  //   Utils.showLoading(context);
  //   try {
  //     _ayatTangheemTypeMapped = await TangheemUserApiClient().getAyaTangheemTypeMapped(widget.surah.surahID, widget.tangheemTypeName);
  //     if (_ayatTangheemTypeMapped.data.length > 0) _currentTangheemPage = 0;
  //   } catch (ex, tr) {
  //     Utils.handleException(ex, null);
  //   } finally {
  //     Utils.hideLoading(context);
  //   }
  //   filterData();
  // }

  void filterData() {
    _ayatTangheemTypeMappedData = widget.ayatTangheemTypeMappedData;
    _tangheemWords.add(_ayatTangheemTypeMappedData.highlightText ?? "");
    _tangheemInsideTableTrueList = _ayatTangheemTypeMappedData?.property?.where((element) => (element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? [];
    _tangheemInsideTableValueList = _ayatTangheemTypeMappedData?.property?.where((element) => (!element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? [];
    // _tangheemInsideTableEmptyList = _ayatTangheemTypeMappedData?.property?.where((element) => (!element.isInsideTable) && (element.propertyValue ?? "").isEmpty)?.toList() ?? [];
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(16, 24, 16, 0),
      width: double.infinity,
      child: _ayatTangheemTypeMappedData == null
          ? SizedBox()
          : Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  _ayatTangheemTypeMappedData.tangheemTypeName ?? "",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1.5),
                ),
                SizedBox(height: 8),
                Text(
                  "هنا نضع\" تعريف بالاستفهام وتداخل الأساليب\"",
                  style: TextStyle(fontSize: 14, color: ColorConsts.textGrey, height: 1),
                ),
                SizedBox(height: 8),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 4, bottom: 4),
                    padding: EdgeInsets.only(top: 8, bottom: 8, right: 4, left: 4),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: Column(
                      children: [
                        Expanded(
                          child: SingleChildScrollView(
                            physics: BouncingScrollPhysics(),
                            child: RepaintBoundary(
                              key: _globalKey,
                              child: Material(
                                color: Colors.white,
                                child: ListView(
                                  physics: NeverScrollableScrollPhysics(),
                                  shrinkWrap: true,
                                  padding: EdgeInsets.all(4),
                                  children: [
                                    TextHighLightWidget(
                                      text: _ayatTangheemTypeMappedData.ayahText ?? "",
                                      valueColor: ColorConsts.primaryBlue,
                                      highlights: _tangheemWords,
                                      style: TextStyle(
                                        fontFamily: "UthmanicHafs",
                                        fontSize: 18,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                    SizedBox(height: 16),
                                    ListView.separated(
                                        itemCount: _tangheemInsideTableValueList.length,
                                        physics: NeverScrollableScrollPhysics(),
                                        shrinkWrap: true,
                                        separatorBuilder: (context, index) {
                                          return Divider(
                                            color: Colors.white,
                                            height: 1,
                                            thickness: 0,
                                          );
                                        },
                                        itemBuilder: (context, index) {
                                          return Row(
                                            children: [
                                              Expanded(
                                                child: Container(
                                                  height: 40,
                                                  padding: EdgeInsets.only(left: 4, right: 8),
                                                  alignment: Alignment.centerRight,
                                                  child: Text(
                                                    _tangheemInsideTableValueList[index].propertyText,
                                                    style: TextStyle(fontWeight: FontWeight.bold, color: ColorConsts.secondaryOrange),
                                                  ),
                                                  color: ColorConsts.secondaryWhite,
                                                ),
                                              ),
                                              SizedBox(width: 8),
                                              Expanded(
                                                child: Container(
                                                  height: 40,
                                                  padding: EdgeInsets.only(left: 4, right: 8),
                                                  alignment: Alignment.centerRight,
                                                  child: Text(
                                                    _tangheemInsideTableValueList[index].propertyValue,
                                                    style: TextStyle(color: ColorConsts.primaryBlack),
                                                  ),
                                                  color: ColorConsts.secondaryWhite,
                                                ),
                                              )
                                            ],
                                          );
                                        }),
                                    if (_tangheemInsideTableTrueList.isNotEmpty)
                                      Container(
                                        color: ColorConsts.primaryBlue,
                                        margin: EdgeInsets.only(top: 8, bottom: 8),
                                        padding: EdgeInsets.all(8),
                                        child: Column(
                                          children: [
                                            Text(
                                              _ayatTangheemTypeMappedData.tangheemTypeName ?? "",
                                              style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
                                            ),
                                            SizedBox(height: 8),
                                            tangheemPropertyView(_tangheemInsideTableTrueList)
                                          ],
                                        ),
                                      ),
                                    tangheemPropertyView(_tangheemInsideTableEmptyList)
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ),
                        // SizedBox(height: 4),
                        // Padding(
                        //   padding: EdgeInsets.only(left: 4, right: 4),
                        //   child: Row(
                        //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        //     children: [
                        //       nextOptionButton(
                        //           "assets/icons/prev_single.svg",
                        //           "الآيات السابقة",
                        //           (_currentTangheemPage == 0 || (_ayatTangheemTypeMapped.data.length < 1))
                        //               ? null
                        //               : () {
                        //                   _currentTangheemPage = _currentTangheemPage - 1;
                        //                   filterData();
                        //                 }),سكندر
                        //       previousOptionButton(
                        //           "assets/icons/next_single.svg",
                        //           "الآيات التالية",
                        //           (_currentTangheemPage == (_ayatTangheemTypeMapped.data.length - 1) || (_ayatTangheemTypeMapped.data.length < 1))
                        //               ? null
                        //               : () {
                        //                   _currentTangheemPage = _currentTangheemPage + 1;
                        //                   filterData();
                        //                 }),
                        //     ],
                        //   ),
                        // ),
                      ],
                    ),
                  ),
                ),
                AyaPlayerWidget(surahName: _ayatTangheemTypeMappedData.surahNameAr ?? "", globalKey: _globalKey, voiceNoteList: _ayatTangheemTypeMappedData.voiceNote ?? [])
              ],
            ),
    );
  }

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

  Widget tangheemPropertyView(List<TangheemProperty> tangheemPropertyList) {
    return Container(
      color: Colors.white,
      child: ListView.separated(
        itemCount: tangheemPropertyList.length,
        physics: NeverScrollableScrollPhysics(),
        padding: EdgeInsets.zero,
        shrinkWrap: true,
        separatorBuilder: (context, index) {
          return Divider(
            color: Colors.white,
            height: 1,
            thickness: 0,
          );
        },
        itemBuilder: (context, index) {
          return Container(
            color: ColorConsts.secondaryWhite,
            padding: EdgeInsets.all(8),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  tangheemPropertyList[index].propertyText ?? "",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12, color: ColorConsts.secondaryOrange),
                ),
                SizedBox(height: 4),
                Text(
                  tangheemPropertyList[index].propertyValue ?? "",
                  style: TextStyle(fontSize: 12, color: ColorConsts.secondaryPink),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}