import 'package:diplomaticquarterapp/core/model/pharmacies/Addresses.dart';
import 'package:diplomaticquarterapp/core/viewModels/pharmacyModule/PharmacyAddressesViewModel.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/uitl/app_toast.dart';
import 'package:diplomaticquarterapp/widgets/buttons/borderedButton.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/dialogs/confirm_dialog.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/pages/pharmacy/pharmacyAddresses/AddAddress.dart';

class PharmacyAddressesPage extends StatefulWidget {
  @override
  _PharmacyAddressesState createState() => _PharmacyAddressesState();
}

class _PharmacyAddressesState extends State<PharmacyAddressesPage> {
  void navigateToAddressPage(
      BuildContext ctx, PharmacyAddressesViewModel model, Addresses address) {
    Navigator.push(
        ctx,
        FadePage(
            page: AddAddressPage(address, (pickResult) {
          model.addEditAddress(pickResult, address);
        })));
  }

  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    final height = mediaQuery.size.height - 60 - mediaQuery.padding.top;

    return BaseView<PharmacyAddressesViewModel>(
      onModelReady: (model) => model.getAddressesList(),
      builder: (_, model, wi) => AppScaffold(
        appBarTitle: TranslationBase.of(context).changeAddress,
        isShowAppBar: true,
        isPharmacy: true,
        baseViewModel: model,
        backgroundColor: Colors.white,
        body: Container(
          height: height * 0.90,
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                ...List.generate(
                  model.addresses != null ? model.addresses.length : 0,
                  (index) => AddressItemWidget(
                      model,
                      model.addresses[index],
                      () {
                        setState(() {
                          model.setSelectedAddressIndex(index);
                        });
                      },
                      model.selectedAddressIndex == index,
                      (address) {
                        navigateToAddressPage(context, model, address);
                      }),
                ),
                Container(
                  color: Colors.white,
                  margin: EdgeInsets.all(8),
                  child: BorderedButton(
                    TranslationBase.of(context).addAddress,
                    hasBorder: true,
                    borderColor: Color(0xFF0fca6d),
                    textColor: Color(0xFF0fca6d),
                    fontWeight: FontWeight.bold,
                    backgroundColor: Colors.white,
                    fontSize: 14,
                    vPadding: 12,
                    hasShadow: true,
                    handler: () {
                      navigateToAddressPage(context, model, null);
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
        bottomSheet: Container(
          height: height * 0.10,
          color: Colors.white,
          child: Column(
            children: [
              Divider(
                color: Colors.grey.shade300,
                height: 1,
                thickness: 1,
                indent: 0,
                endIndent: 0,
              ),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                child: BorderedButton(
                  TranslationBase.of(context).confirmAddress,
                  hasBorder: true,
                  borderColor: Color(0xFF5AB145),
                  textColor: Colors.white,
                  fontWeight: FontWeight.bold,
                  backgroundColor: Color(0xFF5AB145),
                  fontSize: 14,
                  vPadding: 8,
                  handler: () {
                    model.saveSelectedAddressLocally(
                        model.addresses[model.selectedAddressIndex]);
                    Navigator.pop(
                        context, model.addresses[model.selectedAddressIndex]);
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class AddressItemWidget extends StatelessWidget {
  final PharmacyAddressesViewModel model;
  final Addresses address;
  final Function selectAddress;
  final bool isSelected;
  final Function(Addresses) onTabEditAddress;

  AddressItemWidget(this.model, this.address, this.selectAddress,
      this.isSelected, this.onTabEditAddress);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 8, horizontal: 0),
        child: Column(
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    InkWell(
                      onTap: selectAddress,
                      child: Container(
                        margin: EdgeInsets.only(left: 16, right: 16),
                        child: Padding(
                          padding: const EdgeInsets.all(5.0),
                          child: Container(
                            decoration: new BoxDecoration(
                              color: !isSelected ? Colors.white : Colors.green,
                              shape: BoxShape.circle,
                              border: Border.all(
                                  color: Colors.grey,
                                  style: BorderStyle.solid,
                                  width: 1.0),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.all(0.0),
                              child: Icon(
                                Icons.check,
                                color: isSelected
                                    ? Colors.white
                                    : Colors.transparent,
                                size: 25,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                Expanded(
                  child: Container(
                    child: Container(
                      margin:
                          EdgeInsets.symmetric(vertical: 12, horizontal: 12),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Padding(
                            padding: const EdgeInsets.symmetric(vertical: 0),
                            child: Texts(
                              "${address.firstName} ${address.lastName}",
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                              color: Colors.black,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.symmetric(vertical: 4),
                            child: Texts(
                              "${address.address1} ${address.address2} ${address.address2},, ${address.city}, ${address.country} ${address.zipPostalCode}",
                              fontSize: 12,
                              fontWeight: FontWeight.normal,
                              color: Colors.grey.shade500,
                            ),
                          ),
                          Row(
                            children: [
                              Container(
                                margin: const EdgeInsets.only(right: 8),
                                child: Icon(
                                  Icons.phone,
                                  size: 20,
                                  color: Colors.black,
                                ),
                              ),
                              Texts(
                                "${address.phoneNumber}",
                                fontSize: 14,
                                fontWeight: FontWeight.bold,
                                color: Colors.grey,
                              ),
                            ],
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          Container(
                            height: 25,
                            child: Row(
                              children: <Widget>[
                                BorderedButton(
                                  TranslationBase.of(context).edit,
                                  backgroundColor: Colors.transparent,
                                  hasBorder: true,
                                  borderColor: Colors.transparent,
                                  textColor: Color(0x990000FF),
                                  handler: () {
                                    onTabEditAddress(address);
                                  },
                                  icon: Icon(
                                    Icons.edit,
                                    size: 15,
                                    color: Color(0x990000FF),
                                  ),
                                ),
                                Padding(
                                  padding:
                                      const EdgeInsets.symmetric(horizontal: 8),
                                  child: SizedBox(
                                    child: Container(
                                      width: 1,
                                      color: Colors.grey.shade400,
                                    ),
                                  ),
                                ),
                                BorderedButton(
                                  TranslationBase.of(context).delete,
                                  backgroundColor: Colors.transparent,
                                  hasBorder: true,
                                  borderColor: Colors.transparent,
                                  textColor: Color(0x99FF0000),
                                  handler: () {
                                    ConfirmDialog dialog = new ConfirmDialog(
                                        context: context,
                                        title: "Are you sure want to delete",
                                        confirmMessage:
                                            "${address.address1} ${address.address2}",
                                        okText:
                                            TranslationBase.of(context).delete,
                                        cancelText: TranslationBase.of(context)
                                            .cancel_nocaps,
                                        okFunction: () => {
                                              model
                                                  .deleteAddresses(address)
                                                  .then((_) {
                                                ConfirmDialog.closeAlertDialog(
                                                    context);
                                                AppToast.showErrorToast(
                                                    message:
                                                        "Address has been deleted");
                                              })
                                            },
                                        cancelFunction: () => {});
                                    dialog.showAlertDialog(context);
                                  },
                                  icon: Icon(
                                    Icons.delete,
                                    size: 15,
                                    color: Color(0x99FF0000),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Divider(
              color: Colors.grey.shade200,
              height: 10,
              thickness: 10,
              indent: 0,
              endIndent: 0,
            ),
          ],
        ),
      ),
    );
  }
}