content: import 'package:flex_color_scheme/flex_color_scheme.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter_riverpod/flutter_riverpod.dart';
  import 'package:mangayomi/modules/anime/providers/state_provider.dart';
  import 'package:mangayomi/modules/anime/widgets/subtitle_view.dart';
  import 'package:mangayomi/modules/manga/reader/widgets/color_filter_widget.dart';
  import 'package:mangayomi/providers/l10n_providers.dart';
  import 'package:mangayomi/utils/extensions/build_context_extensions.dart';
  
  class FontSettingWidget extends ConsumerStatefulWidget {
    final bool hasSubtitleTrack;
    const FontSettingWidget({super.key, required this.hasSubtitleTrack});
  
    @override
    ConsumerState<FontSettingWidget> createState() => _FontSettingWidgetState();
  }
  
  class _FontSettingWidgetState extends ConsumerState<FontSettingWidget> {
    @override
    Widget build(BuildContext context) {
      final subtitleSettings = ref.watch(subtitleSettingsStateProvider);
      return Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            if (!widget.hasSubtitleTrack)
              Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    const Padding(
                      padding: EdgeInsets.all(2),
                      child: Icon(Icons.info_outline_rounded, size: 14),
                    ),
                    Flexible(
                      child: Text(context.l10n.no_subtite_warning_message),
                    ),
                  ],
                ),
              ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                iconButton(
                  Icons.remove,
                  () {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(
                          subtitleSettings
                            ..fontSize = subtitleSettings.fontSize! - 1,
                          true,
                        );
                    setState(() {});
                  },
                  backgroundColor: context.dynamicWhiteBlackColor,
                  iconColors: context.isLight ? Colors.white : Colors.black,
                  size: 25,
                ),
                SizedBox(
                  width: 200,
                  child: TextFormField(
                    controller: TextEditingController(
                      text: subtitleSettings.fontSize.toString(),
                    ),
                    keyboardType: TextInputType.number,
                    onChanged: (v) {
                      final val = int.tryParse(v);
                      if (val != null) {
                        ref
                            .read(subtitleSettingsStateProvider.notifier)
                            .set(subtitleSettings..fontSize = val, true);
                      }
                    },
                    decoration: InputDecoration(
                      labelText: context.l10n.font_size,
                      isDense: true,
                      filled: true,
                      fillColor: Colors.transparent,
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: context.dynamicThemeColor),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: context.dynamicThemeColor),
                      ),
                      border: OutlineInputBorder(
                        borderSide: BorderSide(color: context.dynamicThemeColor),
                      ),
                    ),
                  ),
                ),
                iconButton(
                  Icons.add,
                  () {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(
                          subtitleSettings
                            ..fontSize = subtitleSettings.fontSize! + 1,
                          true,
                        );
                    setState(() {});
                  },
                  backgroundColor: context.dynamicWhiteBlackColor,
                  iconColors: context.isLight ? Colors.white : Colors.black,
                  size: 25,
                ),
                iconButton(
                  Icons.format_bold,
                  () {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(
                          subtitleSettings..useBold = !subtitleSettings.useBold!,
                          true,
                        );
                    setState(() {});
                  },
                  iconColors: subtitleSettings.useBold!
                      ? null
                      : context.dynamicWhiteBlackColor.withValues(alpha: 0.5),
                ),
                iconButton(
                  Icons.format_italic,
                  () {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(
                          subtitleSettings
                            ..useItalic = !subtitleSettings.useItalic!,
                          true,
                        );
                    setState(() {});
                  },
                  iconColors: subtitleSettings.useItalic!
                      ? null
                      : context.dynamicWhiteBlackColor.withValues(alpha: 0.5),
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                "Lorem ipsum dolor sit amet",
                style: subtileTextStyle(ref).copyWith(fontSize: 22),
                textAlign: TextAlign.center,
              ),
            ),
            TextButton(
              onPressed: () {
                ref
                    .read(subtitleSettingsStateProvider.notifier)
                    .set(
                      subtitleSettings
                        ..useItalic = false
                        ..useBold = false
                        ..fontSize = 45,
                      true,
                    );
                setState(() {});
              },
              child: Text(context.l10n.reset),
            ),
          ],
        ),
      );
    }
  }
  
  class ColorSettingWidget extends ConsumerStatefulWidget {
    final bool hasSubtitleTrack;
    const ColorSettingWidget({super.key, required this.hasSubtitleTrack});
  
    @override
    ConsumerState<ColorSettingWidget> createState() => _ColorSettingWidgetState();
  }
  
  class _ColorSettingWidgetState extends ConsumerState<ColorSettingWidget> {
    String selector = "text";
  
    Widget button(String text, String value, Color color) {
      return ElevatedButton(
        style: ElevatedButton.styleFrom(
          padding: const EdgeInsets.all(0),
          backgroundColor: Colors.transparent,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
          elevation: 0,
          shadowColor: Colors.transparent,
        ),
        onPressed: () {
          setState(() {
            selector = value;
          });
        },
        child: Column(
          children: [
            Text(text, style: TextStyle(color: context.textColor)),
            Padding(
              padding: const EdgeInsets.all(2),
              child: Container(
                height: 25,
                width: 25,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5),
                  color: color,
                  border: Border.all(
                    width: 2,
                    color: context.dynamicWhiteBlackColor,
                  ),
                ),
              ),
            ),
            Text("#${color.hexCode}", style: TextStyle(color: context.textColor)),
            Icon(
              Icons.arrow_drop_down,
              color: selector != value ? Colors.transparent : context.textColor,
            ),
          ],
        ),
      );
    }
  
    @override
    Widget build(BuildContext context) {
      final subSets = ref.watch(subtitleSettingsStateProvider);
      final textColor = Color.fromARGB(
        subSets.textColorA!,
        subSets.textColorR!,
        subSets.textColorG!,
        subSets.textColorB!,
      );
      final borderColor = Color.fromARGB(
        subSets.borderColorA!,
        subSets.borderColorR!,
        subSets.borderColorG!,
        subSets.borderColorB!,
      );
      final backgroundColor = Color.fromARGB(
        subSets.backgroundColorA!,
        subSets.backgroundColorR!,
        subSets.backgroundColorG!,
        subSets.backgroundColorB!,
      );
      return Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            if (!widget.hasSubtitleTrack)
              Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    const Padding(
                      padding: EdgeInsets.all(2),
                      child: Icon(Icons.info_outline_rounded, size: 14),
                    ),
                    Flexible(
                      child: Text(context.l10n.no_subtite_warning_message),
                    ),
                  ],
                ),
              ),
            Row(
              children: [
                Expanded(
                  flex: 3,
                  child: button(context.l10n.text, "text", textColor),
                ),
                Expanded(
                  flex: 3,
                  child: button(context.l10n.border, "border", borderColor),
                ),
                Expanded(
                  flex: 3,
                  child: button(
                    context.l10n.background,
                    "backgroud",
                    backgroundColor,
                  ),
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                "Lorem ipsum dolor sit amet",
                style: subtileTextStyle(ref).copyWith(fontSize: 22),
                textAlign: TextAlign.center,
              ),
            ),
            if (selector == "text") ...[
              rgbaFilterWidget(
                subSets.textColorA!,
                subSets.textColorR!,
                subSets.textColorG!,
                subSets.textColorB!,
                (val) {
                  if (val.$3 == "r") {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(subSets..textColorR = val.$1.toInt(), val.$2);
                  } else if (val.$3 == "g") {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(subSets..textColorG = val.$1.toInt(), val.$2);
                  } else if (val.$3 == "b") {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(subSets..textColorB = val.$1.toInt(), val.$2);
                  } else {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(subSets..textColorA = val.$1.toInt(), val.$2);
                  }
                  setState(() {});
                },
                context,
              ),
            ] else if (selector == "border") ...[
              rgbaFilterWidget(
                subSets.borderColorA!,
                subSets.borderColorR!,
                subSets.borderColorG!,
                subSets.borderColorB!,
                (val) {
                  if (val.$3 == "r") {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(subSets..borderColorR = val.$1.toInt(), val.$2);
                  } else if (val.$3 == "g") {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(subSets..borderColorG = val.$1.toInt(), val.$2);
                  } else if (val.$3 == "b") {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(subSets..borderColorB = val.$1.toInt(), val.$2);
                  } else {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(subSets..borderColorA = val.$1.toInt(), val.$2);
                  }
                  setState(() {});
                },
                context,
              ),
            ] else ...[
              rgbaFilterWidget(
                subSets.backgroundColorA!,
                subSets.backgroundColorR!,
                subSets.backgroundColorG!,
                subSets.backgroundColorB!,
                (val) {
                  if (val.$3 == "r") {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(subSets..backgroundColorR = val.$1.toInt(), val.$2);
                  } else if (val.$3 == "g") {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(subSets..backgroundColorG = val.$1.toInt(), val.$2);
                  } else if (val.$3 == "b") {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(subSets..backgroundColorB = val.$1.toInt(), val.$2);
                  } else {
                    ref
                        .read(subtitleSettingsStateProvider.notifier)
                        .set(subSets..backgroundColorA = val.$1.toInt(), val.$2);
                  }
                  setState(() {});
                },
                context,
              ),
            ],
            TextButton(
              onPressed: () {
                ref.read(subtitleSettingsStateProvider.notifier).resetColor();
                setState(() {});
              },
              child: Text(context.l10n.reset),
            ),
          ],
        ),
      );
    }
  }
  
  Widget iconButton(
    IconData icon,
    void Function()? onPressed, {
    Color? backgroundColor,
    Color? iconColors,
    double size = 35,
  }) => Padding(
    padding: const EdgeInsets.all(5),
    child: SizedBox(
      height: size,
      width: size,
      child: IconButton(
        iconSize: size * 0.9,
        style: ButtonStyle(
          backgroundColor: WidgetStatePropertyAll(backgroundColor),
        ),
        padding: const EdgeInsets.all(1),
        onPressed: onPressed,
        icon: Icon(icon, color: iconColors),
      ),
    ),
  );
  