import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:mrsklinik/app/themes/app_color.dart';
import 'package:mrsklinik/data/model/data_dummy.dart';
import 'package:mrsklinik/presentation/dashboard/widgets/header_dashboard.dart';
import 'package:mrsklinik/presentation/dashboard/widgets/navigation_rail_menu.dart';
import 'package:mrsklinik/presentation/dashboard/widgets/welcome_box.dart';

class Dashboard extends StatefulWidget {
  const Dashboard({super.key});

  @override
  State<Dashboard> createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  final _searchController = TextEditingController();
  final ScrollController _controller = ScrollController();
  final List<String> navMenu = [
    'Home',
    'Consultation',
    'Medicine',
    'Recipe',
  ];
  final List<IconData> navIcon = [
    FontAwesomeIcons.houseMedical,
    FontAwesomeIcons.userDoctor,
    FontAwesomeIcons.prescriptionBottleMedical,
    FontAwesomeIcons.pills,
  ];
  late int selectedIndex = 0;

  List<DataDummy> listData = [];
  List<String> listDataDummy = [];

  void fetchData() async {
    final String response = await rootBundle.loadString('assets/dummy.json');
    final data = await json.decode(response);

    Map<String, dynamic> dummyMap = data;
    List userMap = dummyMap['data'];

    await Future.delayed(const Duration(seconds: 1), () {
      userMap.forEach((element) async {
        listData.add(DataDummy(element['name'], element['photo'], element['time'],
            element['date'], element['queue'], element['label']));
      });
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    selectedIndex = 0;
    fetchData();
  }

  List<Widget> listNavigation = [
    Container(
        margin: const EdgeInsets.fromLTRB(0, 20, 0, 10),
        child: Text(
          "Page Consultation",
          style: GoogleFonts.nunitoSans(
              fontWeight: FontWeight.w800,
              fontSize: 22.0,
              color: AppColor.BackgroundDark),
        )),
    Container(
        margin: const EdgeInsets.fromLTRB(0, 20, 0, 10),
        child: Text(
          "Page Medicine",
          style: GoogleFonts.nunitoSans(
              fontWeight: FontWeight.w800,
              fontSize: 22.0,
              color: AppColor.BackgroundDark),
        )),
    Container(
        margin: const EdgeInsets.fromLTRB(0, 20, 0, 10),
        child: Text(
          "Page Recipe",
          style: GoogleFonts.nunitoSans(
              fontWeight: FontWeight.w800,
              fontSize: 22.0,
              color: AppColor.BackgroundDark),
        )),
  ];

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _searchController.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      body: SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            Expanded(
                flex: 0,
                child: HeaderDashborad(
                  hintText: 'Pencarian',
                  controller: _searchController,
                  icoton: IconButton(
                    onPressed: () {},
                    icon: const Icon(
                      FontAwesomeIcons.search,
                      color: Colors.grey,
                    ),
                  ),
                  typeInput: TextInputType.text,
                )),
            Expanded(
                flex: 1,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    /// Navigationrail Menu
                    NavigationRailMenu(
                      navMenu: navMenu,
                      navIcon: navIcon,
                      selectedIndex: selectedIndex,
                      selectedDestination: (i) {
                        setState(() {
                          selectedIndex = i;
                        });
                      },
                    ),

                    Expanded(
                        flex: 4,
                        child:
                        IndexedStack(
                          index: selectedIndex,
                          children: listNavigation,
                        )
                    ),

                    /// content
                    if (selectedIndex == 0)
                      ///Dashboard
                      Expanded(
                          flex: 4,
                          child: SingleChildScrollView(
                            scrollDirection: Axis.vertical,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                const WelcomeBox(
                                  name: 'Olivia',
                                ),
                                Container(
                                  margin:
                                      const EdgeInsets.fromLTRB(20, 0, 40, 0),
                                  width: ScreenUtil().screenWidth,
                                  child: Row(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Container(
                                          margin: const EdgeInsets.fromLTRB(
                                              0, 20, 0, 10),
                                          child: Text(
                                            "List of Patient (${listData.length})",
                                            style: GoogleFonts.nunitoSans(
                                                fontWeight: FontWeight.w800,
                                                fontSize: 22.0,
                                                color: AppColor.BackgroundDark),
                                          )),
                                      InkWell(
                                        onTap: () {
                                          setState(() {
                                            selectedIndex = 1;
                                          });
                                        },
                                        child: Container(
                                            margin: const EdgeInsets.fromLTRB(
                                                20, 20, 0, 10),
                                            child: Text(
                                              "See all",
                                              style: GoogleFonts.nunitoSans(
                                                  fontSize: 20.0,
                                                  color: AppColor.Blue),
                                            )),
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  margin:
                                      const EdgeInsets.fromLTRB(20, 0, 40, 0),
                                  child: ListView.builder(
                                      shrinkWrap: true,
                                      controller: _controller,
                                      itemCount: listData.length,
                                      itemBuilder: (context, index) {
                                        return InkWell(
                                          onTap: () {
                                            print(
                                                "selected ${listData[index].name}");
                                          },
                                          child: Row(
                                            crossAxisAlignment:
                                            CrossAxisAlignment.center,
                                            mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                            children: [
                                              Container(
                                                width: 65,
                                                height: 65,
                                                margin:
                                                const EdgeInsets.all(10),
                                                decoration: BoxDecoration(
                                                    shape: BoxShape.circle,
                                                    image: DecorationImage(
                                                        image: NetworkImage(
                                                            listData[index]
                                                                .photo),
                                                        fit: BoxFit.cover),
                                                    border: Border.all(
                                                        width: 0,
                                                        color: Colors.black38)),
                                              ),
                                              Text(
                                                listData[index].name,
                                                style: GoogleFonts.nunitoSans(
                                                    fontWeight: FontWeight.w800,
                                                    fontSize: 18.0,
                                                    color: AppColor
                                                        .BackgroundDark),
                                              ),
                                              Text(
                                                listData[index].time,
                                                style: GoogleFonts.nunitoSans(
                                                    fontWeight: FontWeight.w800,
                                                    fontSize: 18.0,
                                                    color: AppColor.Gray400),
                                                textAlign: TextAlign.start,
                                              ),
                                              Text(
                                                listData[index].date,
                                                style: GoogleFonts.nunitoSans(
                                                    fontWeight: FontWeight.w800,
                                                    fontSize: 18.0,
                                                    color: AppColor.Gray400),
                                                textAlign: TextAlign.start,
                                              ),
                                              Text(
                                                listData[index].queue,
                                                style: GoogleFonts.nunitoSans(
                                                    fontWeight: FontWeight.w800,
                                                    fontSize: 18.0,
                                                    color: AppColor
                                                        .BackgroundDark),
                                                textAlign: TextAlign.start,
                                              ),
                                              Text(
                                                listData[index].label,
                                                style: GoogleFonts.nunitoSans(
                                                    fontWeight: FontWeight.w800,
                                                    fontSize: 18.0,
                                                    color: AppColor.Gray400),
                                                textAlign: TextAlign.start,
                                              ),
                                              Container(
                                                width: 50.w,
                                                height: 50.h,
                                                decoration: BoxDecoration(
                                                    shape: BoxShape.circle,
                                                    color:
                                                    AppColor.GreenCircle),
                                                child: Icon(
                                                  FontAwesomeIcons.stethoscope,
                                                  color:
                                                  AppColor.BackgroundLight,
                                                  size: 28,
                                                ),
                                              )
                                            ],
                                          ),
                                        );
                                      }),
                                )
                              ],
                            ),
                          )),
                    if (selectedIndex == 1)
                      /// Page 2
                      Expanded(
                          flex: 4,
                          child: Center(
                            child: Container(
                                margin: const EdgeInsets.fromLTRB(0, 20, 0, 10),
                                child: Text(
                                  "Page ${selectedIndex+1}",
                                  style: GoogleFonts.nunitoSans(
                                      fontWeight: FontWeight.w800,
                                      fontSize: 22.0,
                                      color: AppColor.BackgroundDark),
                                )),
                          )),
                    if (selectedIndex == 2)
                      /// Page 3
                      Expanded(
                          flex: 4,
                          child: Center(
                            child: Container(
                                margin: const EdgeInsets.fromLTRB(0, 20, 0, 10),
                                child: Text(
                                  "Page ${selectedIndex + 1}",
                                  style: GoogleFonts.nunitoSans(
                                      fontWeight: FontWeight.w800,
                                      fontSize: 22.0,
                                      color: AppColor.BackgroundDark),
                                )),
                          )),
                    if (selectedIndex == 3)
                      /// Page 4
                      Expanded(
                          flex: 4,
                          child: Center(
                            child: Container(
                                margin: const EdgeInsets.fromLTRB(0, 20, 0, 10),
                                child: Text(
                                  "Page ${selectedIndex + 1}",
                                  style: GoogleFonts.nunitoSans(
                                      fontWeight: FontWeight.w800,
                                      fontSize: 22.0,
                                      color: AppColor.BackgroundDark),
                                )),
                          )),
                  ],
                ))
          ],
        ),
      ),
    );
  }
}