import 'package:diplomaticquarterapp/core/model/pharmacies/PointsAmountPerYear.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/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/material.dart';

import 'lakum-points-month-page.dart';

class LakumPointsYearPage extends StatefulWidget {
  final List<PointsAmountPerYear> pointsAmountPerYear;
  int selectedIndexYear = 0;

  LakumPointsYearPage(this.pointsAmountPerYear);

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

class _LakumPointsYearPageState extends State<LakumPointsYearPage> {
  @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: 100,
                  margin: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                  child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: <Widget>[
                      ...List.generate(
                          widget.pointsAmountPerYear.length,
                          (index) => LacumPointsYearWidget(
                                  mediaQuery,
                                  widget.selectedIndexYear == index,
                                  widget.pointsAmountPerYear[index], () {
                                setState(() {
                                  widget.selectedIndexYear = index;
                                });
                              })),
                    ],
                  ),
                ),
                SizedBox(
                  height: 0,
                ),
                LakumPointTableRowWidget(true, "MONTH", 0, 0, null, 0),
                ...List.generate(
                  widget.pointsAmountPerYear[widget.selectedIndexYear]
                      .pointsAmountPerMonth.length,
                  (index) => LakumPointTableRowWidget(
                      false,
                      widget.pointsAmountPerYear[widget.selectedIndexYear]
                          .pointsAmountPerMonth[index].month,
                      widget.pointsAmountPerYear[widget.selectedIndexYear]
                          .pointsAmountPerMonth[index].pointsPerMonth,
                      widget.pointsAmountPerYear[widget.selectedIndexYear]
                          .pointsAmountPerMonth[index].amountPerMonth,
                      (){
                        Navigator.push(context,
                            FadePage(page: LakumPointMonthPage(widget.pointsAmountPerYear[widget.selectedIndexYear]
                                .pointsAmountPerMonth[index], widget.pointsAmountPerYear[widget.selectedIndexYear].year)));
                      },
                      index),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class LacumPointsYearWidget extends StatelessWidget {
  final MediaQueryData mediaQuery;
  final bool isSelected;
  final PointsAmountPerYear yearPoints;
  final Function yearOnTap;

  LacumPointsYearWidget(
      this.mediaQuery, this.isSelected, this.yearPoints, this.yearOnTap);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: yearOnTap,
      child: Container(
        width: mediaQuery.size.width / 2 - 16,
        padding: EdgeInsets.only(top: 12, left: 8, right: 8, bottom: 4),
        decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.circular(8),
          border: Border.fromBorderSide(BorderSide(
            color: Color(0xffe1e1e1),
            width: 0.4,
          )),
          color: isSelected ? Color(0xff004bcc) : Color(0xffefefef),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        child: Texts(
                          "YEAR: ${yearPoints.year}",
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                          color: isSelected ? Colors.white : Colors.black,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                      margin: EdgeInsets.only(left: 4),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Texts(
                            "POINT",
                            fontSize: 12,
                            fontWeight: FontWeight.bold,
                            color: isSelected ? Colors.white : Colors.black,
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          Texts(
                            "${yearPoints.pointsPerYear}",
                            fontSize: 12,
                            fontWeight: FontWeight.bold,
                            color: isSelected ? Colors.white : Colors.black,
                          ),
                        ],
                      ),
                    ),
                  ),
                  SizedBox(
                    child: Container(
                      color: isSelected ? Colors.white : Colors.grey,
                    ),
                    width: 1,
                  ),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Texts(
                          "RIYAL",
                          fontSize: 13,
                          fontWeight: FontWeight.bold,
                          color: isSelected ? Colors.white : Colors.black,
                        ),
                        SizedBox(
                          height: 4,
                        ),
                        Texts(
                          "${yearPoints.amountPerYear}",
                          fontSize: 13,
                          fontWeight: FontWeight.bold,
                          color: isSelected ? Colors.white : Colors.black,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}