import 'package:charts_flutter/flutter.dart';
import 'package:diplomaticquarterapp/core/viewModels/pharmacy_categorise_view_model.dart';
import 'package:diplomaticquarterapp/pages/parent_categorise_page.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:flutter/material.dart';

import 'base/base_view.dart';
import 'final_products_page.dart';

class PharmacyCategorisePage extends StatefulWidget {
  @override
  _PharmacyCategorisePageState createState() => _PharmacyCategorisePageState();
}

class _PharmacyCategorisePageState extends State<PharmacyCategorisePage> {
  String idCategorise;

  @override
  Widget build(BuildContext context) {
    return BaseView<PharmacyCategoriseViewModel>(
      onModelReady: (model) => model.getCategorise(),
      builder: (BuildContext context, PharmacyCategoriseViewModel model,
              Widget child) =>
          AppScaffold(
        isShowDecPage: false,
        baseViewModel: model,
        body: Column(
          children: [
            Container(
              height: 400,
              margin: EdgeInsets.only(bottom: 22),
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 0.5,
                  mainAxisSpacing: 1.0,
                  childAspectRatio: 3.2,
                ),
                itemCount: model.categorise.length,
                itemBuilder: (BuildContext context, int index) {
                  return Padding(
                    padding: EdgeInsets.all(4.0),
                    child: InkWell(
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: Colors.grey.withOpacity(0.24),
                        ),
                        child: Padding(
                          padding: EdgeInsets.symmetric(horizontal: 10.0),
                          child: Texts(
                            model.categorise[index].name,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                      onTap: () => {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) =>
                                model.categorise[index].id != '12'
                                    ? ParentCategorisePage(
                                        id: model.categorise[index].id,
                                        titleName: model.categorise[index].name,
                                      )
                                    : FinalProductsPage(
                                        id: model.categorise[index].id,
                                      ),
                          ),
                        ),
                      },
                    ),
                  );
                },
              ),
            ),
            Container(
                height: 200,
                child: Column(
                  children: [
                    Divider(
                        height: 2.0,
                        thickness: 1.0,
                        color: Colors.black12.withOpacity(0.14)),
                    SizedBox(
                      height: 15.0,
                    ),
                    Row(
                      children: [
                        Expanded(
                          child: Padding(
                            padding: EdgeInsets.all(4.0),
                            child: Container(
                              height: 50.0,
                              width: 55.0,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(5.0),
                                color: Colors.green.shade300.withOpacity(0.34),
                              ),
                              child: Padding(
                                padding: EdgeInsets.symmetric(horizontal: 10.0),
                                child: Texts(
                                  'best sellers',
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                          ),
                        ),
                        Expanded(
                          child: Padding(
                            padding: EdgeInsets.all(4.0),
                            child: Container(
                              height: 50.0,
                              width: 55.0,
                              decoration: BoxDecoration(
                                color: Colors.orangeAccent.shade200
                                    .withOpacity(0.34),
                                borderRadius: BorderRadius.circular(5.0),
                              ),
                              child: Padding(
                                padding: EdgeInsets.symmetric(horizontal: 10.0),
                                child: Texts(
                                  'Most Viewed',
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                    Row(
                      children: [
                        Expanded(
                          child: Padding(
                            padding: EdgeInsets.all(4.0),
                            child: Container(
                              height: 50.0,
                              width: 55.0,
                              decoration: BoxDecoration(
                                color: Colors.blue.shade200.withOpacity(0.34),
                                borderRadius: BorderRadius.circular(5.0),
                              ),
                              child: Padding(
                                padding: EdgeInsets.symmetric(horizontal: 10.0),
                                child: Texts(
                                  'New Proudcts',
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                          ),
                        ),
                        Expanded(
                          child: Padding(
                            padding: EdgeInsets.all(4.0),
                            child: Container(
                              height: 50.0,
                              width: 55.0,
                              decoration: BoxDecoration(
                                color: Colors.purple.shade200.withOpacity(0.34),
                                borderRadius: BorderRadius.circular(5.0),
                              ),
                              child: Padding(
                                padding: EdgeInsets.symmetric(horizontal: 10.0),
                                child: Texts(
                                  'Recently Viewed',
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                )),
          ],
        ),
      ),
    );
  }
}