import 'package:diplomaticquarterapp/core/model/pharmacies/PointsAmountPerMonth.dart';
import 'package:diplomaticquarterapp/core/viewModels/pharmacyModule/lacum-viewmodel.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/pages/pharmacies/widgets/lakum-point-table-row-widget.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class LakumPointMonthPage extends StatefulWidget {
  final PointsAmountPerMonth pointsAmountPerMonth;
  final int year;
  int expandedItemIndex = -1;

  LakumPointMonthPage(this.pointsAmountPerMonth, this.year);

  @override
  _LakumPointsMonthPageState createState() => _LakumPointsMonthPageState();
}

class _LakumPointsMonthPageState extends State<LakumPointMonthPage> {
  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);

    return BaseView<LacumViewModel>(
      builder: (_, model, wi) => AppScaffold(
        title: "Lakum points",
        isShowAppBar: true,
        isShowDecPage: false,
        backgroundColor: Colors.white,
        baseViewModel: model,
        body: Container(
          width: double.infinity,
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  height: mediaQuery.size.height * 0.25,
                  child: Stack(
                    children: [
                      Image.asset(
                        "assets/images/pharmacy_module/lakum/lakum_card_front_bg.png",
                        fit: BoxFit.fill,
                        width: mediaQuery.size.width * 1.0,
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Container(
                            height: mediaQuery.size.height * 0.06,
                            margin: EdgeInsets.symmetric(
                                vertical: 16, horizontal: 24),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                Expanded(
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Texts(
                                        TranslationBase.of(context).month,
                                        color: Colors.grey.shade600,
                                        fontSize: 16,
                                      ),
                                      Texts(
                                        "${widget.pointsAmountPerMonth.month}, ${widget.year}",
                                        color: Colors.grey.shade700,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 16,
                                      ),
                                    ],
                                  ),
                                ),
                                Expanded(
                                  child: Row(
                                    crossAxisAlignment: CrossAxisAlignment.end,
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceEvenly,
                                    children: [
                                      Expanded(
                                        child: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.end,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: [
                                            Texts(
                                              TranslationBase.of(context).point,
                                              color: Colors.grey.shade600,
                                              fontSize: 16,
                                            ),
                                            Texts(
                                              "${widget.pointsAmountPerMonth.pointsPerMonth}",
                                              color: Colors.grey.shade700,
                                              fontWeight: FontWeight.bold,
                                              fontSize: 16,
                                            ),
                                          ],
                                        ),
                                      ),
                                      SizedBox(
                                        child: Container(
                                          color: Colors.grey,
                                        ),
                                        width: 1,
                                      ),
                                      Expanded(
                                        child: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.end,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: [
                                            Texts(
                                              TranslationBase.of(context).riyal,
                                              color: Colors.grey.shade600,
                                              fontSize: 16,
                                            ),
                                            Texts(
                                              "${widget.pointsAmountPerMonth.amountPerMonth}",
                                              color: Colors.grey.shade700,
                                              fontWeight: FontWeight.bold,
                                              fontSize: 16,
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                LakumPointTableRowWidget(true, "DAY", 0, 0, null, 0),
                ...List.generate(
                  widget.pointsAmountPerMonth.pointsAmountPerday.length,
                  (index) => LakumPointTableRowWidget(
                    false,
                    widget.pointsAmountPerMonth.pointsAmountPerday[index].day,
                    widget.pointsAmountPerMonth.pointsAmountPerday[index]
                        .pointsPerDay,
                    widget.pointsAmountPerMonth.pointsAmountPerday[index]
                        .amountPerDay,
                    () {
                      setState(() {
                        if (widget.expandedItemIndex == index) {
                          widget.expandedItemIndex = -1;
                        } else {
                          widget.expandedItemIndex = index;
                        }
                      });
                    },
                    index,
                    expandFlag: widget.expandedItemIndex == index,
                    collapsed: Column(
                      children: [
                        ...List.generate(
                          widget.pointsAmountPerMonth.pointsAmountPerday[index]
                              .pointsDetails.length,
                          (index) => DayPointsDetailWidget(
                              widget
                                  .pointsAmountPerMonth
                                  .pointsAmountPerday[index]
                                  .pointsDetails[index]
                                  .subTransactionTypeDescription,
                              widget
                                  .pointsAmountPerMonth
                                  .pointsAmountPerday[index]
                                  .pointsDetails[index].purchasePoints,
                              widget
                                  .pointsAmountPerMonth
                                  .pointsAmountPerday[index]
                                  .pointsDetails[index].amount),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class DayPointsDetailWidget extends StatelessWidget {
  final String rowTitle;
  final double points;
  final double riyal;

  DayPointsDetailWidget(this.rowTitle, this.points, this.riyal);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xffe4e4e4),
      padding: EdgeInsets.symmetric(vertical: 0, horizontal: 12),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8),
            child: Row(
              children: [
                Expanded(
                    child: Container(
                  child: Column(
                    children: [
                      Texts(
                        "TYPE",
                        fontSize: 12,
                        fontWeight: FontWeight.bold,
                      ),
                      SizedBox(
                        height: 4,
                      ),
                      Texts(
                        rowTitle,
                        fontSize: 14,
                        fontWeight: FontWeight.normal,
                      ),
                    ],
                    crossAxisAlignment: CrossAxisAlignment.start,
                  ),
                )),
                Expanded(

                    child: Container(
                  child: Texts(
                    "$points",
                    fontSize: 14,
                    fontWeight: FontWeight.normal,
                  ),
                )),
                Expanded(
                    child: Container(
                  child: Texts(
                    "$riyal",
                    fontSize: 14,
                    fontWeight: FontWeight.normal,
                  ),
                )),
                Expanded(child: Container()),
              ],
            ),
          ),
          const Divider(
            color: Color(0xFFD6D6D6),
            height: 1,
            thickness: 1,
            indent: 0,
            endIndent: 0,
          ),
        ],
      ),
    );
  }
}