import 'package:diplomaticquarterapp/core/enum/viewstate.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/buttons/button.dart';
import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/material.dart';
import 'package:diplomaticquarterapp/config/size_config.dart';
import 'package:flutter/cupertino.dart';
import '../base/base_view.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:diplomaticquarterapp/core/viewModels/vaccine_view_model.dart';
import 'package:diplomaticquarterapp/widgets/others/rounded_container.dart';
import 'package:popup_box/popup_box.dart';

import 'my_vaccines_item_screen.dart';

class MyVaccines extends StatefulWidget {
  @override
  _MyVaccinesState createState() => _MyVaccinesState();
}

class _MyVaccinesState extends State<MyVaccines> {
  @override
  Widget build(BuildContext context) {
    return BaseView<VaccineViewModel>(
      onModelReady: (model) => model.getVaccine(),
      builder: (BuildContext context, VaccineViewModel model, Widget child) =>
          AppScaffold(
        isShowAppBar: true,
        appBarTitle: TranslationBase.of(context).myVaccines,
        baseViewModel: model,
        body: Container(
          margin: EdgeInsets.only(
            left: SizeConfig.screenWidth * 0.004,
            right: SizeConfig.screenWidth * 0.004,
            top: SizeConfig.screenWidth * 0.04,
          ),
          child: Column(
            children: <Widget>[
              RoundedContainer(
                backgroundColor: Colors.white,
                child: ExpansionTile(
                  title: Container(
                    height: 65.0,
                    child: Text('2018'),
                  ),
                  children: <Widget>[
                    Container(
                      child: ListView.builder(
                          scrollDirection: Axis.vertical,
                          shrinkWrap: true,
                          itemCount: model.vaccineList == null
                              ? 0
                              : model.vaccineList.length,
                          itemBuilder: (BuildContext context, int index) {
                            return Column(
                              children: <Widget>[
                                RoundedContainer(
                                  child: Column(
                                    children: <Widget>[
                                      Row(
                                        children: <Widget>[
                                          Expanded(
                                            child: Column(
                                              children: <Widget>[
                                                Padding(
                                                  padding: EdgeInsets.symmetric(
                                                      horizontal: 20.0,
                                                      vertical: 20.0),
                                                  child: Image.network(
                                                    model.vaccineList[index]
                                                        .doctorImageURL,
                                                    height: SizeConfig
                                                            .imageSizeMultiplier *
                                                        23,
                                                    width: SizeConfig
                                                            .imageSizeMultiplier *
                                                        20,
                                                    fit: BoxFit.fill,
                                                  ),
                                                ),
                                              ],
                                            ),
                                            flex: 2,
                                          ),
                                          Expanded(
                                            child: Container(
                                              child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: <Widget>[
                                                  Text(
                                                    model.vaccineList[index]
                                                            .doctorTitle +
                                                        model.vaccineList[index]
                                                            .doctorName,
                                                    style: TextStyle(
                                                      fontWeight:
                                                          FontWeight.w900,
                                                      fontSize: 16.6,
                                                    ),
                                                  ),
                                                  SizedBox(height: 7.0),
                                                  Text(
                                                    model.vaccineList[index]
                                                        .projectName,
                                                    style: TextStyle(
                                                      fontSize: 17.0,
                                                      letterSpacing: 0.5,
                                                    ),
                                                  ),
                                                  SizedBox(height: 7.0),
                                                  Text(
                                                    model.vaccineList[index]
                                                        .vaccineName,
                                                    style: TextStyle(
                                                      fontSize: 17.0,
                                                    ),
                                                  ),
                                                  SizedBox(height: 7.0),
                                                  Text(
                                                    'Date Taken   ' +
                                                        convertDateFormat(model
                                                            .vaccineList[index]
                                                            .invoiceDate),
                                                    style: TextStyle(
                                                        fontSize: 17.0),
                                                  ),
                                                ],
                                              ),
                                            ),
                                            flex: 5,
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            );
                          }),
                    )
                  ],
                ),
              ),
              // SpaceBetweenTexts(space: 165.0),
            ],
          ),
        ),
        bottomSheet: Container(
          color: Theme.of(context).scaffoldBackgroundColor,
          padding: EdgeInsets.all(12),
          height: MediaQuery.of(context).size.height * 0.25,
          width: double.infinity,
          child: Column(
            children: [
              Divider(
                height: 2,
                thickness: 1,
              ),
              SizedBox(
                height: 6,
              ),
              Container(
                width: double.infinity,
                // height: 80.0,
                child: Button(
                  label: TranslationBase.of(context).checkVaccineAvailability,
                  backgroundColor: Color(0xff9EA3A4),
                  onTap: () =>
                      Navigator.push(context, FadePage(page: MyVaccinesItemPage())),
                ),
              ),
              Container(
                width: double.infinity,
                //   height: 80.0,
                child: SecondaryButton(
                  label: TranslationBase.of(context).sendEmail,
                  color: Color(0xffF62426),
                  textColor: Colors.white,
                  disabled: model.vaccineList.length == 0,
                  loading: model.state == ViewState.BusyLocal,
                  onTap: () async {
                    model.sendEmail(
                        message:
                            TranslationBase.of(context).emailSentSuccessfully);
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  convertDateFormat(String Date) {
    const start = "/Date(";
    const end = "+0300)";

    final startIndex = Date.indexOf(start);
    final endIndex = Date.indexOf(end, startIndex + start.length);

    var date = new DateTime.fromMillisecondsSinceEpoch(
        int.parse(Date.substring(startIndex + start.length, endIndex)));
    String newDate = date.year.toString() +
        "-" +
        date.month.toString().padLeft(2, '0') +
        "-" +
        date.day.toString().padLeft(2, '0');

    return newDate.toString();
  }
}