import 'package:eva_icons_flutter/eva_icons_flutter.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:mitra_corporate/screen/dashboard/chart.dart';
// import 'package:syncfusion_flutter_charts/charts.dart';
import '../../app/constant.dart';
import '../../provider/menu_provider.dart';
import '../../widgets/header.dart';

class DashboardScreen extends HookConsumerWidget {
  const DashboardScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isExpand = ref.watch(sideBarExpandProvider);
    List<String> chartType = <String>['Tahun', 'Bulan'];
    final selectedChartType = useState("Tahun");

    return Scaffold(
      body: Column(
        children: [
          Header(),
          Padding(
            padding: EdgeInsets.all(32.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  // color: Colors.red,
                  alignment: Alignment.centerLeft,
                  child: Text('Dashboard',
                      style: Constant.h3_400(context: context)
                          .copyWith(color: Constant.textBlack)),
                ),
                SizedBox(
                  height: Constant.getActualY(context: context, y: 40),
                ),
                //Statistik
                Material(
                  // elevation: 5,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8)),
                  color: Colors.white,
                  child: Container(
                      padding: EdgeInsets.all(20),
                      // width: Constant.getActualX(context: context, x: 1080),
                      height: Constant.getActualY(context: context, y: 720),
                      child: Column(
                        children: [
                          Row(
                            children: [
                              Text(
                                "Statistik",
                                style: Constant.h4_600(context: context),
                              ),
                              const Spacer(),
                              // Text(
                              //   "Bulan",
                              //   style: Constant.caption1_400(context: context),
                              // ),
                              // Icon(EvaIcons.arrowIosDownward, size: 12),
                              DropdownButton<String>(
                                value: selectedChartType.value,
                                icon: Icon(EvaIcons.arrowIosDownward, size: 12),
                                elevation: 16,
                                style: Constant.caption1_400(context: context)
                                    .copyWith(color: Colors.black),
                                underline: Container(
                                  height: 0,
                                ),
                                focusColor: Colors.white,
                                onChanged: (value) {
                                  // This is called when the user selects an item.
                                  selectedChartType.value = value!;
                                },
                                items: chartType.map<DropdownMenuItem<String>>(
                                    (String value) {
                                  return DropdownMenuItem<String>(
                                    value: value,
                                    child: Text(value),
                                  );
                                }).toList(),
                              )
                            ],
                          ),
                          SizedBox(
                              height:
                                  Constant.getActualX(context: context, x: 4)),
                          // Row(
                          //   children: [
                          //     Text(
                          //       "Last Update 1 Juli",
                          //       style: Constant.caption1_400(context: context),
                          //     ),
                          //   ],
                          // ),
                          // Image.asset(
                          //   'images/grafik.png',
                          //   width: Constant.getActualX(context: context, x: 1039),
                          //   height: Constant.getActualY(context: context, y: 241),
                          // ),

                          SizedBox(
                            // width:
                            //     Constant.getActualX(context: context, x: 1039),
                            height:
                                Constant.getActualY(context: context, y: 550),
                            child: Row(
                              children: [
                                Expanded(
                                    flex: 9,
                                    child: ChartScreen(
                                      filter: selectedChartType,
                                    )),
                                Expanded(flex: 1, child: Container()),
                                Expanded(
                                    flex: 2,
                                    child: Container(
                                      child: Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Row(
                                            children: [
                                              Container(
                                                width: 20,
                                                height: 20,
                                                decoration: BoxDecoration(
                                                    color: Colors.blue,
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            5)),
                                                margin:
                                                    EdgeInsets.only(right: 10),
                                              ),
                                              Text(
                                                "Total Order",
                                                style: Constant.caption1_400(
                                                    context: context),
                                              )
                                            ],
                                          ),
                                          SizedBox(
                                            height: Constant.getActualY(
                                                context: context, y: 16),
                                          ),
                                          Row(
                                            children: [
                                              Container(
                                                width: 20,
                                                height: 20,
                                                decoration: BoxDecoration(
                                                    color: Colors.purple,
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            5)),
                                                margin:
                                                    EdgeInsets.only(right: 10),
                                              ),
                                              Text(
                                                "Dikirim",
                                                style: Constant.caption1_400(
                                                    context: context),
                                              )
                                            ],
                                          ),
                                          SizedBox(
                                            height: Constant.getActualY(
                                                context: context, y: 16),
                                          ),
                                          Row(
                                            children: [
                                              Container(
                                                width: 20,
                                                height: 20,
                                                decoration: BoxDecoration(
                                                    color: Colors.green,
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            5)),
                                                margin:
                                                    EdgeInsets.only(right: 10),
                                              ),
                                              Text(
                                                "Dikonfirmasi",
                                                style: Constant.caption1_400(
                                                    context: context),
                                              )
                                            ],
                                          ),
                                        ],
                                      ),
                                    )),
                              ],
                            ),
                          )
                        ],
                      )),
                ),
                // SizedBox(
                //   height: Constant.getActualY(context: context, y: 40),
                // ),
                // //Pengiriman terbaru
                // DashboardTabel()
              ],
            ),
          ),
        ],
      ),
    );
  }
}
