import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:vitalapp/components/dynamic_drawer.dart';
import 'package:vitalapp/pages/home/controller.dart';
import 'package:vitalapp/pages/home/widgets/avatar.dart';
import 'package:fis_common/helpers/color.dart';

import 'widgets/menus.dart';
import 'widgets/navigator.dart';

class HomePage extends GetView<HomeController> {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: false,
      bottom: false,
      right: false,
      left: false,
      // maintainBottomViewPadding: true,
      child: LayoutBuilder(
        builder: (context, c) {
          return WillPopScope(
            onWillPop: () async {
              return false;
            },
            child: Scaffold(
              key: controller.homeScaffoldKey,
              // resizeToAvoidBottomInset: false,
              backgroundColor: const Color.fromRGBO(238, 238, 238, 1),
              endDrawer: VDynamicDrawerWrapper(
                scaffoldKey: controller.homeScaffoldKey,
              ),
              body: Row(
                mainAxisSize: MainAxisSize.max,
                children: [
                  // Expanded(child: _buildBody(context)),
                  SizedBox(
                    width: c.maxWidth,
                    child: _buildBody(context),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  Widget _buildBody(BuildContext context) {
    final menuScrollController = ScrollController();
    return Row(
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(
          width: 120,
          // color: const Color.fromRGBO(10, 32, 48, .8),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                // Color.fromRGBO(59, 188, 255, 1),
                // Color.fromRGBO(44, 120, 229, 1),
                Theme.of(context).primaryColor,
                FColorHelper.mixColor(
                    Colors.black, Theme.of(context).primaryColor, 50),
              ],
              begin: Alignment.bottomRight,
              end: Alignment.topLeft,
            ),
          ),
          child: Stack(
            children: [
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: Opacity(
                  opacity: 0.5,
                  child: Image.asset(
                    "assets/images/e_hospital.png",
                    fit: BoxFit.fitWidth,
                  ),
                ),
              ),
              Column(
                mainAxisSize: MainAxisSize.max,
                children: [
                  SizedBox(
                    height: 90,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Obx(
                          () => HomeAvatarWidget(
                            size: 40,
                            headImageToken: controller.state.headImageToken,
                          ),
                        ),
                        const SizedBox(
                          height: 8,
                        ),
                        Obx(
                          () => Text(
                            controller.state.doctorName,
                            style: const TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Divider(
                    color: Colors.white.withOpacity(.4),
                    height: 1,
                    indent: 30,
                    endIndent: 30,
                  ),
                  const SizedBox(
                    height: 8,
                  ),
                  Expanded(
                    child: Obx(
                      () {
                        return HomeMenuListViewWidget(
                          source: controller.state.menuItems,
                          scrollerController: menuScrollController,
                        );
                      },
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        Container(
          color: Theme.of(context).primaryColor,
          child: VerticalDivider(
            width: 1,
            color: Colors.white.withOpacity(.4),
          ),
        ),
        Expanded(
            child: Column(
          children: [
            SizedBox(
              height: 60,
              child: _buildHeader(context),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: _buildContent(),
                  ),
                ],
              ),
            ),
          ],
        )),
      ],
    );
  }

  Widget _buildContent() {
    return const Padding(
      padding: EdgeInsets.all(8),
      child: HomeNavigator(),
      // child: Container(
      //   color: Colors.white,
      //   child: HomeNavigator(),
      // ),
    );
  }

  Widget _buildHeader(BuildContext context) {
    final themeData = Theme.of(context);
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            // Color.fromRGBO(59, 188, 255, 1),
            // Color.fromRGBO(44, 120, 229, 1),
            themeData.primaryColor.withOpacity(.6),
            themeData.primaryColor,
          ],
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
        ),
      ),
      child: Center(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Align(
                alignment: Alignment.centerLeft,
                child: _buildHeaderLeft(),
              ),
            ),
            Align(
              alignment: Alignment.center,
              child: _buildHeaderCenter(),
            ),
            const Spacer(),
            // Expanded(
            //   child: Align(
            //     alignment: Alignment.centerRight,
            //     child: _buildHeaderRight(),
            //   ),
            // ),
          ],
        ),
      ),
    );
  }

  Widget _buildHeaderLeft() {
    return Row(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        // const HomeAvatarWidget(size: 40),
        const SizedBox(width: 16),
        RichText(
          text: TextSpan(
            text: controller.state.doctorTeamName,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
            // children: [
            //   TextSpan(
            //     text: '- ${controller.state.doctorName}',
            //     style: const TextStyle(
            //       color: Colors.white,
            //       fontSize: 20,
            //     ),
            //   )
            // ],
          ),
        ),
      ],
    );
  }

  Widget _buildHeaderCenter() {
    return Row(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        // Image.asset(
        //   "assets/images/vinno_logo2.png",
        //   height: 35,
        //   fit: BoxFit.fitHeight,
        // ),
        const SizedBox(width: 10),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            // SizedBox(height: 8),
            Text(
              "家医健康系统",
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildHeaderRight() {
    return Image.asset(
      "assets/images/iflyrobot.png",
      height: 80,
      fit: BoxFit.fitHeight,
    );
  }
}