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';

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

class _PharmacyCategorisePageState extends State<PharmacyCategorisePage> {
  @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: Center(
                          child: Texts(model.categorise[index].name),
                        ),
                      ),
                      onTap: () => {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => ParentCategorisePage(
                              id: model.categorise[index].id,
                              titleName: model.categorise[index].name,
                            ),
                          ),
                        ),
                      },
                    ),
                  );
                },
              ),
            ),
            Container(
                height: 200,
                child: Column(
                  children: [
                    Divider(
                        height: 2.0,
                        thickness: 2.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: Center(
                                  child: Texts(
                                'best sellers',
                              )),
                            ),
                          ),
                        ),
                        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: Center(child: Texts('Most Viewed')),
                            ),
                          ),
                        ),
                      ],
                    ),
                    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: Center(child: Texts('New Proudcts')),
                            ),
                          ),
                        ),
                        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: Center(child: Texts('Recently Viewed')),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                )),
          ],
        ),
      ),
    );
  }
}
