import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:vnoteapp/components/appbar.dart';
import 'package:vnoteapp/components/button.dart';
import 'package:vnoteapp/pages/medical/controller.dart';
import 'package:vnoteapp/pages/medical/widgets/blood_pressure.dart';
import 'package:vnoteapp/pages/medical/widgets/blood_sugar.dart';
import 'package:vnoteapp/pages/medical/widgets/body_temperature.dart';
import 'package:vnoteapp/pages/medical/widgets/body_bmi.dart';
import 'package:vnoteapp/pages/medical/widgets/bool_oxygen.dart';

class MedicalPage extends GetView<MedicalController> {
  const MedicalPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: VAppBar(
        titleWidget: const Text(
          "诊疗展示",
          style: TextStyle(fontSize: 24),
        ),
      ),
      body: Row(
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: controller.state.medicalMenuList
                .map(
                  (e) => Material(
                    borderRadius: const BorderRadius.only(
                      topRight: Radius.circular(30),
                      bottomRight: Radius.circular(30),
                    ),
                    child: Ink(
                      decoration: const BoxDecoration(
                        borderRadius: BorderRadius.only(
                          topRight: Radius.circular(30),
                          bottomRight: Radius.circular(30),
                        ),
                      ),
                      child: InkWell(
                          borderRadius: const BorderRadius.only(
                            topRight: Radius.circular(30),
                            bottomRight: Radius.circular(30),
                          ),
                          onTap: () {
                            controller.state.currentTab = e.key;
                          },
                          child: Obx(
                            () => _SideBar(
                              title: e.diagnosticItem,
                              isActive: controller.state.currentTab == e.key,
                            ),
                          )),
                    ),
                  ),
                )
                .toList(),
          ),
          Container(
            alignment: Alignment.topCenter,
            margin: const EdgeInsets.all(16).copyWith(top: 0),
            child: Image.asset(
              'assets/images/exam/normalMeasurementChart.png',
              height: double.infinity,
              fit: BoxFit.fitWidth, // 设置图像的适应方式
            ),
          ),
          Expanded(
            child: Stack(
              children: [
                Container(
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    children: [
                      _buildContent(),
                    ],
                  ),
                ),
                Positioned(
                    bottom: 100,
                    right: 16,
                    child: VButton(
                      onTap: controller.createDiagnosis,
                      child: const Text(
                        '保存',
                        style: TextStyle(fontSize: 26),
                      ),
                    ))
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _buildContent() {
    return Obx(() {
      switch (controller.state.currentTab) {
        case 'Temp':
          return const BodyTemperature();
        case 'GLU':
          return const BloodSugar();
        case 'NIBP':
          return const BloodPressure();
        case 'SpO2':
          return const BloodOxygen();
        case 'BMI':
          return const BodyWeight();
        default:
          return const SizedBox();
      }
    });
  }
}

class _SideBar extends StatelessWidget {
  const _SideBar({
    required this.title,
    this.isActive,
  });

  final String title;
  final bool? isActive;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.centerLeft,
      width: 100,
      child: Container(
        margin: const EdgeInsets.only(bottom: 2),
        decoration: BoxDecoration(
          color: isActive!
              ? Theme.of(context).primaryColor
              : Theme.of(context).primaryColor.withOpacity(.2),
          borderRadius: const BorderRadius.only(
            topRight: Radius.circular(30),
            bottomRight: Radius.circular(30),
          ),
        ),
        alignment: Alignment.center,
        width: isActive! ? 100 : 90,
        height: 60,
        child: Text(
          title,
          style: TextStyle(
            fontSize: 26,
            color: isActive! ? Colors.white : Colors.black,
          ),
        ),
      ),
    );
  }
}
