import 'package:diplomaticquarterapp/config/size_config.dart';
import 'package:diplomaticquarterapp/core/viewModels/pharmacyModule/pharmacy_module_view_model.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/pages/landing/home_page.dart';
import 'package:diplomaticquarterapp/pages/pharmacyModule/widgets/BannerPager.dart';
import 'package:diplomaticquarterapp/pages/pharmacyModule/widgets/ProductTileItem.dart';
import 'package:diplomaticquarterapp/pages/pharmacyModule/widgets/borderedButton.dart';
import 'package:diplomaticquarterapp/pages/pharmacyModule/widgets/manufacturerItem.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/material.dart';

class PharmacyPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return BaseView<PharmacyModuleViewModel>(
      // onModelReady: (model) => model.getPharmacyHomeData(),
      onModelReady: (model) => model.getPharmacyHomeData(),
      builder: (_, model, wi) => AppScaffold(
        title: "",
        isShowAppBar: true,
        isShowDecPage: false,
        baseViewModel: model,
        backgroundColor: Colors.white,
        body: Container(
          width: double.infinity,
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                BannerPager(model),
                GridViewButtons(),
                /*BannerPager(model.getBannerImagesUrl()),*/
                Container(
                  margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Texts(
                        TranslationBase.of(context).shopByBrands,
                        bold: true,
                      ),
                      BorderedButton(
                        TranslationBase.of(context).viewAll,
                        hasBorder: true,
                        vPadding: 6,
                        borderColor: Colors.green,
                        color: Colors.green,
                        handler: () {},
                      ),
                    ],
                  ),
                ),
                Container(
                  height: 60,
                  child: ListView.builder(
                    itemBuilder: (ctx, i) =>
                        ManufacturerItem(model.manufacturerList[i]),
                    scrollDirection: Axis.horizontal,
                    itemCount: model.manufacturerList.length,
                  ),
                ),
                Container(
                  margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Texts(
                        TranslationBase.of(context).recentlyViewed,
                        bold: true,
                      ),
                      BorderedButton(
                        TranslationBase.of(context).viewAll,
                        hasBorder: true,
                        vPadding: 6,
                        borderColor: Colors.green,
                        color: Colors.green,
                        handler: () {},
                      ),
                    ],
                  ),
                ),
                Container(),
                Container(
                  margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Texts(
                        TranslationBase.of(context).bestSellers,
                        bold: true,
                      ),
                      BorderedButton(
                        TranslationBase.of(context).viewAll,
                        hasBorder: true,
                        borderColor: Colors.green,
                        color: Colors.green,
                        vPadding: 6,
                        handler: () {},
                      ),
                    ],
                  ),
                ),
                Container(
                  height: MediaQuery.of(context).size.height / 4,
                  child: ListView.builder(
                    itemBuilder: (ctx, i) =>
                        ProductTileItem(model.bestSellerProduct[i]),
                    scrollDirection: Axis.horizontal,
                    itemCount: model.bestSellerProduct.length,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class GridViewButtons extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final gridHeight = (MediaQuery.of(context).size.width * 0.3) * 1.8;
    return Container(
      child: SizedBox(
        height: gridHeight,
        child: GridView.count(
          childAspectRatio: 2.2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          padding: const EdgeInsets.all(4.0),
          crossAxisCount: 2,
          children: [
            DashboardItem(
              imageName: 'pharmacy_module/bg_1.png',
              hasColorFilter: false,
              opacity: 0.8,
              child: GridViewCard(
                  TranslationBase.of(context).offersAndPromotions,
                  'assets/images/pharmacy_module/offer_icon.png',
                  () {}),
            ),
            DashboardItem(
              imageName: 'pharmacy_module/bg_2.png',
              opacity: 0,
              hasColorFilter: false,
              child: GridViewCard(TranslationBase.of(context).medicationRefill,
                  'assets/images/pharmacy_module/medication_icon.png', () {}),
            ),
            DashboardItem(
              imageName: 'pharmacy_module/bg_3.png',
              opacity: 0,
              hasColorFilter: false,
              child: GridViewCard(TranslationBase.of(context).myPrescriptions,
                  'assets/images/pharmacy_module/prescription_icon.png', () {}),
            ),
            DashboardItem(
              imageName: 'pharmacy_module/bg_4.png',
              opacity: 0,
              hasColorFilter: false,
              child: GridViewCard(
                  TranslationBase.of(context).searchAndScanMedication,
                  'assets/images/pharmacy_module/search_scan_icon.png',
                  () {}),
            ),
          ],
        ),
      ),
    );
  }
}

class GridViewCard extends StatelessWidget {
  final String text;
  final String cardImage;
  final Function handler;

  GridViewCard(this.text, this.cardImage, this.handler);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: Container(
        child: Row(
          children: [
            Expanded(
              flex: 2,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    flex: 2,
                    child: Padding(
                      padding: const EdgeInsets.all(6),
                      child: Texts(
                        text,
                        color: Colors.white,
                        fontSize: SizeConfig.textMultiplier * 1.5,
                      ),
                    ),
                  ),
                  Expanded(
                    child: BorderedButton(
                      TranslationBase.of(context).viewAll,
                      handler: () {},
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Align(
                alignment: Alignment.centerRight,
                child: Image.asset(
                  cardImage,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
