import 'package:dietary_guard/controllers/food_data.dart';
import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

  @override
  State<DataSourceSettingsScreen> createState() =>
      _DataSourceSettingsScreenState();
}

class _DataSourceSettingsScreenState extends State<DataSourceSettingsScreen> {
  final TextEditingController _fdcApiKeyController = TextEditingController();

  final List<(String, String, String)> _dataCollectionList = [
    (
      "Foundation",
      "dataCollectionFoundation".tr,
      "dataCollectionFoundationDescription".tr,
    ),
    (
      "Branded",
      "dataCollectionBranded".tr,
      "dataCollectionBrandedDescription".tr,
    ),
    (
      "Survey (FNDDS)",
      "dataCollectionSurvey".tr,
      "dataCollectionSurveyDescription".tr,
    ),
    (
      "SR Legacy",
      "dataCollectionLegacy".tr,
      "dataCollectionLegacyDescription".tr,
    ),
  ];

  List<String> _enabledDataCollections = List.empty(growable: true);

  Future<void> _applySettings() async {
    final FoodDataController data = Get.find();
    await data.setApiKey(_fdcApiKeyController.text);
    await data.setDataCollections(_enabledDataCollections);

    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text('settingsApplied'.tr),
    ));
  }

  @override
  void initState() {
    final FoodDataController data = Get.find();
    _fdcApiKeyController.text = data.getApiKey() ?? '';
    _enabledDataCollections = List.from(
      data.getDataCollections() ?? List.empty(),
      growable: true,
    );

    super.initState();
  }

  Color get _unFocusColor =>
      Theme.of(context).colorScheme.onSurface.withOpacity(0.75);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Theme.of(context).colorScheme.surface,
      child: Scaffold(
        appBar: AppBar(
          title: Text('dataSourceSettings'.tr),
        ),
        body: ListView(
          children: [
            const SizedBox(height: 8),
            DropdownButtonFormField2<String>(
              isExpanded: true,
              decoration: const InputDecoration(
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                ),
              ),
              hint: Text(
                'dataCollectionSelection'.tr,
                style: TextStyle(
                  fontSize: 14,
                  color: Theme.of(context).hintColor,
                ),
              ),
              items: _dataCollectionList.map((item) {
                return DropdownMenuItem(
                  value: item.$1,
                  enabled: false,
                  child: StatefulBuilder(
                    builder: (context, menuSetState) {
                      final isSelected =
                          _enabledDataCollections.contains(item.$1);
                      return InkWell(
                        onTap: () {
                          isSelected
                              ? _enabledDataCollections.remove(item.$1)
                              : _enabledDataCollections.add(item.$1);
                          setState(() {});
                          menuSetState(() {});
                        },
                        child: ListTile(
                          contentPadding:
                              const EdgeInsets.symmetric(horizontal: 16.0),
                          leading: isSelected
                              ? const Icon(Icons.check_box_outlined)
                              : const Icon(Icons.check_box_outline_blank),
                          title: Text(item.$2),
                          subtitle: Text(item.$3),
                        ),
                      );
                    },
                  ),
                );
              }).toList(),
              value: _enabledDataCollections.isEmpty
                  ? null
                  : _enabledDataCollections.last,
              onChanged: (value) {},
              selectedItemBuilder: (context) {
                return _dataCollectionList.map(
                  (item) {
                    return Text(
                      _enabledDataCollections.join(', '),
                      style: const TextStyle(
                        fontSize: 14,
                        overflow: TextOverflow.ellipsis,
                      ),
                      maxLines: 1,
                    );
                  },
                ).toList();
              },
              buttonStyleData: const ButtonStyleData(height: 20),
              menuItemStyleData: const MenuItemStyleData(
                height: 80,
                padding: EdgeInsets.zero,
              ),
            ),
            const SizedBox(height: 16),
            TextField(
              controller: _fdcApiKeyController,
              obscureText: true,
              decoration: InputDecoration(
                border: const OutlineInputBorder(),
                label: Text("fdcApiKey".tr),
                isDense: true,
              ),
              onTapOutside: (_) =>
                  FocusManager.instance.primaryFocus?.unfocus(),
            ),
            Text(
              'fdcApiKeyHint'.tr,
              style: TextStyle(color: _unFocusColor),
            ).paddingOnly(
              left: 8,
              right: 8,
              top: 8,
            ),
            const Divider(height: 1, thickness: 0.3).paddingSymmetric(
              vertical: 8,
            ),
            Text(
              'fdcApiCredit'.tr,
              style: TextStyle(color: _unFocusColor),
            ).paddingSymmetric(horizontal: 8),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                ElevatedButton.icon(
                  icon: const Icon(Icons.save, size: 16),
                  label: Text('apply'.tr),
                  onPressed: () => _applySettings(),
                ),
              ],
            ).paddingSymmetric(vertical: 12),
          ],
        ).paddingSymmetric(horizontal: 24),
      ),
    );
  }
}