import 'package:fis_jsonrpc/rpc.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:vnoteapp/components/cell.dart';
import 'package:vnoteapp/components/checkbox_button.dart';
import 'package:vnoteapp/components/dynamic_drawer.dart.dart';
import 'package:vnoteapp/pages/controllers/crowd_labels.dart';
import 'package:vnoteapp/pages/patient/create/controller.dart';

class CreatePatientPageNew extends GetView<CreatePatientController> {
  const CreatePatientPageNew({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.topCenter,
      child: SizedBox(
        width: 800,
        child: Scrollbar(
          child: ListView(
            shrinkWrap: true,
            children: [
              _CrowdLabelPanel(),
            ],
          ),
        ),
      ),
    );
  }
}

class _CrowdLabelPanel extends GetView<CrowdLabelsController> {
  @override
  Widget build(BuildContext context) {
    final createController = Get.find<CreatePatientController>();
    return VListFormCellGroup(
      children: [
        VListFormCell(
          label: "人群分类",
          contentWidget: _buildContent(context),
          onTap: () {
            VDynamicDrawerWrapper.show(
              scaffoldKey: createController.homeScaffoldKey,
              builder: (_) => _buildDrawer(),
            );
          },
        ),
      ],
    );
  }

  Widget _buildDrawer() {
    final state = controller.state;
    return VDrawer(
      width: 800,
      child: Column(
        children: [
          VCheckBoxButtonGroup<LabelDTO, String>(
            source: state.normalOptions,
            values: state.selectedNormalCodes,
            labelGetter: (LabelDTO data) => data.labelName!,
            valueGetter: (LabelDTO data) => data.code!,
            onChanged: (value) {
              state.selectedNormalCodes = value;
            },
          ),
        ],
      ),
    );
  }

  Widget _buildContent(BuildContext context) {
    return Obx(() {
      final themeData = Theme.of(context);
      final color = themeData.secondaryHeaderColor;
      final names = controller.state.selectedNames;
      const itemHeight = 32.0;
      const itemRadius = itemHeight / 2;
      final itemTextStyle = TextStyle(
        color: themeData.primaryColor,
        fontSize: 14,
      );
      return Wrap(
        children: names.map(
          (e) {
            return Container(
              height: itemHeight,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: color,
                border: Border.all(style: BorderStyle.none),
                borderRadius: BorderRadius.circular(itemRadius),
              ),
              child: Text(e, style: itemTextStyle),
            );
          },
        ).toList(),
      );
    });
  }
}
