import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:tangheem/api/admin_configuration_api_client.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_tangheem_type_mapped.dart'; import 'package:tangheem/models/discussion_model.dart'; import 'package:tangheem/ui/dialogs/discussion_input_dialog.dart'; import 'package:tangheem/widgets/aya_player_widget.dart'; import 'package:tangheem/widgets/text_highlight_widget.dart'; import 'package:tangheem/extensions/string_extensions.dart'; import 'login_screen.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 { GlobalKey _globalKey = GlobalKey(); List _tangheemInsideTableTrueList = []; List _tangheemInsideTableValueList = []; List _tangheemInsideTableEmptyList = []; List _tangheemWords = []; int _discussionPage = -1; AyatTangheemTypeMapped _ayatTangheemTypeMapped; AyatTangheemTypeMappedData _ayatTangheemTypeMappedData; DiscussionModel _discussionModel; @override void initState() { super.initState(); _tangheemInsideTableValueList = []; _tangheemInsideTableEmptyList = []; filterData(); getTangheemDiscussion(); } void getTangheemDiscussion() async { Utils.showLoading(context); try { _discussionModel = await TangheemUserApiClient().getDiscussionByTangheemID(_discussionPage, widget.ayatTangheemTypeMappedData.ayaTangheemTypeId); Utils.hideLoading(context); setState(() {}); } catch (ex, tr) { Utils.handleException(ex, null); Utils.hideLoading(context); } } void sendComment(String discussionText) async { Utils.showLoading(context); try { await AdminConfigurationApiClient().addDiscussion(discussionText, widget.ayatTangheemTypeMappedData.ayaTangheemTypeId); Utils.showToast("تم إرسال التعليق ، سيكون مرئيًا بمجرد موافقة المسؤول عليه"); Utils.hideLoading(context); Navigator.pop(context); } catch (ex, tr) { print(ex); Utils.handleException(ex, null); Utils.hideLoading(context); } } 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: ListView( physics: BouncingScrollPhysics(), padding: EdgeInsets.only(bottom: 16), children: [ 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: SingleChildScrollView( physics: NeverScrollableScrollPhysics(), child: RepaintBoundary( key: _globalKey, child: Material( color: Colors.white, child: ListView( physics: NeverScrollableScrollPhysics(), shrinkWrap: true, padding: EdgeInsets.all(4), children: [ TextHighLightWidget( text: _ayatTangheemTypeMappedData.reverseAyatNumber() ?? "", 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: 8), discussionView(_discussionModel?.data ?? []), ], ), ), 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 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), ), ], ), ); }, ), ); } Widget discussionView(List _discussionList) { return Stack( alignment: Alignment.bottomCenter, children: [ Container( margin: EdgeInsets.only(top: 4, bottom: 25), padding: EdgeInsets.all(8), width: double.infinity, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(8), ), child: ListView.separated( padding: EdgeInsets.only(top: 4, bottom: 24), shrinkWrap: true, physics: NeverScrollableScrollPhysics(), itemCount: _discussionList.length, separatorBuilder: (context, index) => SizedBox(height: 16), itemBuilder: (context, index) { return Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Row( children: [ SvgPicture.asset( "assets/icons/chat_user.svg", width: 60, height: 60, ), SizedBox(width: 8), Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( "تعليق على الآية ${widget.ayatTangheemTypeMappedData.ayatNumberInSurah}", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: ColorConsts.primaryBlue, height: 1.5), ), SizedBox(height: 4), Text( _discussionList[index].date.toFormattedDate(), style: TextStyle(fontSize: 12, color: ColorConsts.textGrey, height: 1), ), ], ) ], ), SizedBox(height: 4), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // Text( // "عنوان التعليق", // style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: ColorConsts.primaryBlue, height: 1.5), // ), Text( _discussionList[index].discussionText, style: TextStyle(fontSize: 14, color: ColorConsts.textGrey, height: 1.4), ), ], ) ], ); }, ), ), Positioned( bottom: 0, child: InkWell( borderRadius: BorderRadius.circular(30), onTap: () async { if (!AppState().isUserLogin) { await Navigator.pushNamed(context, LoginScreen.routeName); if (!AppState().isUserLogin) { Utils.showToast("يجب عليك تسجيل الدخول للتعليق"); return; } } showDialog( context: context, barrierColor: ColorConsts.secondaryWhite.withOpacity(0.8), builder: (BuildContext context) => DiscussionInputDialog(onCommentPress: (comment) { sendComment(comment); }), ); }, child: Container( height: 40, padding: EdgeInsets.only(left: 24, right: 24), alignment: Alignment.centerRight, decoration: BoxDecoration( borderRadius: BorderRadius.circular(30), color: ColorConsts.gradientPink, gradient: LinearGradient( stops: [0.0, 0.5], begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ColorConsts.gradientPink, ColorConsts.gradientOrange], ), ), child: Text( "أضافة تعليق", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: Colors.white, height: 1.5), ), ), ), ), ], ); } }