import 'package:flutter/material.dart';
import 'package:food_health/api/dto/profile_options_dto.dart';
import 'package:food_health/config/theme/custom_colors.dart';
import 'package:remixicon/remixicon.dart';

import '../data/state.dart';
import '../util/common.dart';
import 'common.dart';

class HealthProfile extends StatefulWidget {
  final List<ProfileOptionDto> options;

  const HealthProfile({super.key, required this.options});

  @override
  State<HealthProfile> createState() => _HealthProfileState();
}

class _HealthProfileState extends State<HealthProfile> {
  final TextEditingController _otherController = TextEditingController();

  @override
  void initState() {
    super.initState();
  }

  ///切换标签
  void _handToggle(String tag) {
    var state = SelectionProvider.of(context);
    if (getIsSelect(tag)) {
      state.update((p) => p.medicalInformationList.remove(tag));
    } else {
      state.update((p) => p.medicalInformationList.add(tag));
    }
  }

  ///确认搜索内容
  void _handConfirmCustom() {
    var state = SelectionProvider.of(context);
    if (!getIsSelect(_otherController.text)) {
      state.update((p) => p.currentMedicationsList.add(_otherController.text));
      _otherController.text = "";
    }
  }

  ///移除搜索标签
  void _handRemoveCustom(String tag) {
    var state = SelectionProvider.of(context);
    state.update((p) => p.currentMedicationsList.remove(tag));
  }

  ///是否标签选中
  bool getIsSelect(String tag) {
    var state = SelectionProvider.of(context);
    return state.userProfile.medicalInformationList.contains(tag);
  }

  @override
  Widget build(BuildContext context) {
    var state = SelectionProvider.of(context);
    return StepContentCard(
      children: [
        CardTitle(title: "Medical Conditions"),
        Container(
          margin: EdgeInsets.only(bottom: 15),
          child: OptionList(
            widthFactor: 1,
            options: getOptions(widget.options, "medical_conditions"),
            selects: state.userProfile.medicalInformationList,
            onTap: _handToggle,
          ),
        ),
        CardTitle(title: "Current Medications"),
        Container(
          margin: EdgeInsets.only(bottom: 15),
          child: Row(
            spacing: 15,
            children: [
              Expanded(
                child: TextField(
                  controller: _otherController,
                  style: Theme.of(context).textTheme.bodyMedium,
                  decoration: InputDecoration(
                    isCollapsed: true,
                    contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                    hintText: "Add medication...",
                    filled: true,
                    fillColor: Theme.of(context).colorScheme.surfaceContainerLow,
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide: BorderSide(width: 1, color: Theme.of(context).colorScheme.surfaceContainer),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide: BorderSide(width: 1, color: Theme.of(context).colorScheme.surfaceContainer),
                    ),
                  ),
                ),
              ),
              InkWell(
                onTap: _handConfirmCustom,
                child: Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                    color: Theme.of(context).colorScheme.surfaceContainer,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Icon(RemixIcons.add_fill),
                ),
              ),
            ],
          ),
        ),
        Wrap(
          runSpacing: 10,
          spacing: 10,
          children: state.userProfile.currentMedicationsList.map((item) {
            return InkWell(
              onTap: () {
                _handRemoveCustom(item);
              },
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 3, horizontal: 10),
                decoration: BoxDecoration(
                  color: Theme.of(context).colorScheme.danger,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Row(
                  spacing: 5,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      item,
                      style: TextStyle(color: Colors.white, fontSize: 12),
                    ),
                    Icon(
                      RemixIcons.close_fill,
                      color: Colors.white,
                      size: 20,
                    ),
                  ],
                ),
              ),
            );
          }).toList(),
        ),
      ],
    );
  }
}