content: import 'dart:convert';
  
  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:hive/hive.dart';
  
  import '../../../../../models/custom_theme.dart';
  import '../../../../../shared/dialogs/confirmation.dart';
  import '../../../../../shared/general/base/adaptive_text_field.dart';
  import '../../../../../shared/general/base/divider.dart';
  import '../../../../../shared/general/themed/cupertino_button.dart';
  import '../../../../../types/enums/hive_keys.dart';
  import '../../../../../types/enums/settings_keys.dart';
  import '../../../../../types/extensions/color.dart';
  import '../../../../../utils/modal_handler.dart';
  import '../../../../../utils/styling_helper.dart';
  import 'custom_logo_row.dart';
  import 'theme_loader.dart';
  import 'theme_row.dart';
  
  class AddEditTheme extends StatefulWidget {
    final CustomTheme? customTheme;
    final ScrollController? scrollController;
  
    const AddEditTheme({super.key, this.customTheme, this.scrollController});
  
    @override
    _AddEditThemeState createState() => _AddEditThemeState();
  }
  
  class _AddEditThemeState extends State<AddEditTheme> {
    late CustomTheme _initialTheme;
    late CustomTheme _customTheme;
  
    late CustomValidationTextEditingController _name;
    late TextEditingController _description;
  
    @override
    void initState() {
      _customTheme = CustomTheme.basic();
      _initialTheme = CustomTheme.basic();
      if (this.widget.customTheme != null) {
        CustomTheme.copyFrom(this.widget.customTheme!, _customTheme, full: true);
        CustomTheme.copyFrom(this.widget.customTheme!, _initialTheme, full: true);
      }
      _name = CustomValidationTextEditingController(
        text: _customTheme.name,
        check: _nameValidation,
      );
  
      _description = TextEditingController(text: _customTheme.description);
      super.initState();
    }
  
    String? _nameValidation(String? name) {
      if (name?.trim().isEmpty ?? true) {
        return 'Please provide a theme name!';
      }
      if (Hive.box<CustomTheme>(HiveKeys.CustomTheme.name)
          .values
          .any((customTheme) => customTheme.name == name)) {
        if (this.widget.customTheme != null &&
            this.widget.customTheme!.name != name) {
          return 'A theme with this name already exists!';
        }
      }
      return null;
    }
  
    @override
    Widget build(BuildContext context) {
      return Padding(
        padding: const EdgeInsets.only(
          top: 24.0,
          left: 24.0,
          right: 24.0,
        ),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  this.widget.customTheme != null ? 'Edit Theme' : 'Add Theme',
                  style: Theme.of(context).textTheme.headlineSmall,
                ),
                Row(
                  children: [
                    ThemedCupertinoButton(
                      padding: const EdgeInsets.only(left: 24.0),
                      text: 'Save',
                      onPressed: () {
                        _name.submit();
                        if (_name.isValid) {
                          if (this.widget.customTheme != null) {
                            CustomTheme.copyFrom(
                                _customTheme, this.widget.customTheme!);
                            this.widget.customTheme!.name = _name.text.trim();
                            this.widget.customTheme!.description =
                                _description.text.trim();
                            this.widget.customTheme!.dateUpdatedMS =
                                DateTime.now().millisecondsSinceEpoch;
                            this.widget.customTheme!.save();
                          } else {
                            _customTheme.name = _name.text.trim();
                            _customTheme.description = _description.text.trim();
                            Hive.box<CustomTheme>(HiveKeys.CustomTheme.name)
                                .add(_customTheme);
                          }
                          Navigator.of(context).pop();
                        }
                      },
                    ),
                    ThemedCupertinoButton(
                      padding: const EdgeInsets.only(left: 24.0),
                      isDestructive: this.widget.customTheme != null,
                      text: 'Delete',
                      onPressed: this.widget.customTheme != null
                          ? () => ModalHandler.showBaseDialog(
                                context: context,
                                dialogWidget: ConfirmationDialog(
                                  title: 'Delete Theme',
                                  isYesDestructive: true,
                                  body:
                                      'Are you sure you want to delete this custom theme? This action can\'t be undone!',
                                  onOk: (_) {
                                    Box settingsBox =
                                        Hive.box(HiveKeys.Settings.name);
                                    if (settingsBox.get(
                                            SettingsKeys
                                                .ActiveCustomThemeUUID.name,
                                            defaultValue: '') ==
                                        this.widget.customTheme!.uuid) {
                                      settingsBox.put(
                                          SettingsKeys.ActiveCustomThemeUUID.name,
                                          '');
                                    }
                                    this.widget.customTheme!.delete();
                                    Navigator.of(context).pop();
                                  },
                                ),
                              )
                          : null,
                    ),
                  ],
                ),
              ],
            ),
            const BaseDivider(),
            Expanded(
              child: SingleChildScrollView(
                controller: this.widget.scrollController,
                child: Padding(
                  padding: const EdgeInsets.only(top: 24.0),
                  child: Column(
                    children: [
                      CupertinoTextField(
                        controller: _name,
                        placeholder: 'Name',
                      ),
                      const SizedBox(height: 12.0),
                      CupertinoTextField(
                        controller: _description,
                        placeholder: 'Description (Optional)',
                        minLines: 3,
                        maxLines: 3,
                      ),
                      const SizedBox(height: 24.0),
                      ThemeLoader(
                        onLoadTheme: (theme) => setState(
                            () => CustomTheme.copyFrom(theme, _customTheme)),
                      ),
                      const SizedBox(height: 32.0),
                      CustomLogoRow(
                        customTheme: _customTheme,
                        onReset: () =>
                            setState(() => _customTheme.customLogo = null),
                        onSelectLogo: (imageBytes) => setState(
                          () =>
                              _customTheme.customLogo = base64Encode(imageBytes),
                        ),
                      ),
                      const SizedBox(height: 32.0),
                      ThemeRow(
                        title: 'Logo Background',
                        description:
                            'If you want to have a specific background color for your logo instead of the app bar color, you can cusotmise it here',
                        colorHex: _customTheme.logoAppBarColorHex,
                        onReset: () => setState(
                            () => _customTheme.logoAppBarColorHex = null),
                        onSave: (colorHex) => setState(
                            () => _customTheme.logoAppBarColorHex = colorHex),
                      ),
                      const SizedBox(height: 32.0),
                      ThemeRow(
                        title: 'Is this a light theme?',
                        description:
                            'If this theme is intended to be a light theme, this option should be checked so text / system UI correctly adapts',
                        active: _customTheme.useLightBrightness,
                        onActiveChanged: (active) => setState(
                            () => _customTheme.useLightBrightness = active),
                      ),
                      const SizedBox(height: 32.0),
                      ThemeRow(
                        title: 'Card Color',
                        description:
                            'Most UI elements are inside Cards so this is kinda the primary color of the app',
                        colorHex: _customTheme.cardColorHex,
                        onReset: () => setState(() => _customTheme.cardColorHex =
                            _initialTheme.cardColorHex),
                        onSave: (colorHex) =>
                            setState(() => _customTheme.cardColorHex = colorHex),
                      ),
                      const SizedBox(height: 32.0),
                      ThemeRow(
                        title: 'Card Border Color',
                        description:
                            'You can set an outline color for the card elements used throughout the app to give them an extra touch',
                        colorHex: _customTheme.cardBorderColorHex,
                        onReset: () => setState(
                            () => _customTheme.cardBorderColorHex = null),
                        onSave: (colorHex) => setState(
                            () => _customTheme.cardBorderColorHex = colorHex),
                      ),
                      const SizedBox(height: 32.0),
                      ThemeRow(
                        title: 'Divider Color',
                        description:
                            'To seperate elements, I mainly used so called Dividers which are basically thin lines. You can even change the color of those',
                        colorHex: _customTheme.dividerColorHex ??
                            Theme.of(context).dividerColor.toHex(),
                        onReset: () => setState(() =>
                            _customTheme.dividerColorHex =
                                StylingHelper.light_divider_color.toHex()),
                        onSave: (colorHex) => setState(
                            () => _customTheme.dividerColorHex = colorHex),
                      ),
                      const SizedBox(height: 32.0),
                      ThemeRow(
                        title: 'AppBar Color',
                        description:
                            'The top UI element which contains the title of the current view, back navigation etc.',
                        colorHex: _customTheme.appBarColorHex,
                        onReset: () => setState(() => _customTheme
                            .appBarColorHex = _initialTheme.appBarColorHex),
                        onSave: (colorHex) => setState(
                            () => _customTheme.appBarColorHex = colorHex),
                      ),
                      const SizedBox(height: 32.0),
                      ThemeRow(
                        title: 'TabBar Color',
                        description:
                            'The bottom navigation bar containing the tabs for this app',
                        colorHex: _customTheme.tabBarColorHex,
                        onReset: () => setState(() => _customTheme
                            .tabBarColorHex = _initialTheme.tabBarColorHex),
                        onSave: (colorHex) => setState(
                            () => _customTheme.tabBarColorHex = colorHex),
                      ),
                      const SizedBox(height: 32.0),
                      ThemeRow(
                        title: 'Highlight Color',
                        description:
                            'Active state is being displayed with this color like active scene, active tab, etc.',
                        colorHex: _customTheme.highlightColorHex,
                        onReset: () => setState(() => _customTheme
                            .highlightColorHex = _initialTheme.highlightColorHex),
                        onSave: (colorHex) => setState(
                            () => _customTheme.highlightColorHex = colorHex),
                      ),
                      const SizedBox(height: 32.0),
                      ThemeRow(
                        title: 'Accent Color',
                        description:
                            'Is being used by action / toggle elements like Switch, Button, etc.',
                        colorHex: _customTheme.accentColorHex,
                        onReset: () => setState(() => _customTheme
                            .accentColorHex = _initialTheme.accentColorHex),
                        onSave: (colorHex) => setState(
                            () => _customTheme.accentColorHex = colorHex),
                      ),
                      const SizedBox(height: 32.0),
                      ThemeRow(
                        title: 'Background Color',
                        description:
                            'Color for the typical background which behind all the UI elements',
                        colorHex: _customTheme.backgroundColorHex,
                        onReset: () => setState(() =>
                            _customTheme.backgroundColorHex =
                                _initialTheme.backgroundColorHex),
                        onSave: (colorHex) => setState(
                            () => _customTheme.backgroundColorHex = colorHex),
                      ),
                      SizedBox(
                          height: MediaQuery.paddingOf(context).bottom + 32.0),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      );
    }
  }
  