import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:linkdy/screens/settings/provider/customization.provider.dart';
import 'package:linkdy/screens/settings/ui/customization/color_item.dart';
import 'package:linkdy/screens/settings/ui/customization/theme_mode_button.dart';
import 'package:linkdy/utils/color_translation.dart';
import 'package:linkdy/widgets/custom_switch_list_tile.dart';
import 'package:linkdy/widgets/section_label.dart';

import 'package:linkdy/constants/colors.dart';
import 'package:linkdy/constants/enums.dart';
import 'package:linkdy/i18n/strings.g.dart';
import 'package:linkdy/providers/app_status.provider.dart';

class Customization extends ConsumerWidget {
  const Customization({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: SliverAppBar.large(
              pinned: true,
              floating: true,
              centerTitle: false,
              forceElevated: innerBoxIsScrolled,
              title: Text(t.settings.customization.customization),
            ),
          ),
        ],
        body: SafeArea(
          top: false,
          bottom: false,
          child: Builder(
            builder: (context) => CustomScrollView(
              slivers: [
                SliverOverlapInjector(
                  handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                ),
                SliverList.list(
                  children: [
                    SectionLabel(
                      label: t.settings.customization.theme,
                      padding: const EdgeInsets.only(top: 10, left: 16, right: 16, bottom: 5),
                    ),
                    Column(
                      children: [
                        CustomSwitchListTile(
                          value: ref.watch(appStatusProvider).selectedTheme == SelectedTheme.system ? true : false,
                          onChanged: (value) => ref
                              .read(appStatusProvider.notifier)
                              .setTheme(value == true ? SelectedTheme.system : SelectedTheme.light),
                          title: t.settings.customization.systemDefined,
                        ),
                        const SizedBox(height: 10),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                            ThemeModeButton(
                              icon: Icons.light_mode,
                              value: 1,
                              selected: ref.watch(appStatusProvider).selectedTheme.index,
                              label: t.settings.customization.light,
                              onChanged: (value) =>
                                  ref.read(appStatusProvider.notifier).setTheme(SelectedTheme.values[value]),
                              disabled:
                                  ref.watch(appStatusProvider).selectedTheme == SelectedTheme.system ? true : false,
                            ),
                            ThemeModeButton(
                              icon: Icons.dark_mode,
                              value: 2,
                              selected: ref.watch(appStatusProvider).selectedTheme.index,
                              label: t.settings.customization.dark,
                              onChanged: (value) =>
                                  ref.read(appStatusProvider.notifier).setTheme(SelectedTheme.values[value]),
                              disabled:
                                  ref.watch(appStatusProvider).selectedTheme == SelectedTheme.system ? true : false,
                            ),
                          ],
                        ),
                      ],
                    ),
                    SectionLabel(
                      label: t.settings.customization.color,
                      padding: const EdgeInsets.only(top: 45, left: 16, right: 16, bottom: 5),
                    ),
                    if (ref.watch(appStatusProvider).supportsDynamicTheme)
                      CustomSwitchListTile(
                        value: ref.watch(appStatusProvider).useDynamicTheme,
                        onChanged: ref.read(appStatusProvider.notifier).setUseDynamicTheme,
                        title: t.settings.customization.useDynamicTheme,
                      ),
                    if (ref.watch(appStatusProvider).supportsDynamicTheme == false ||
                        (ref.watch(appStatusProvider).supportsDynamicTheme == true &&
                            ref.watch(appStatusProvider).useDynamicTheme == false))
                      Padding(
                        padding: const EdgeInsets.only(bottom: 8, left: 16, right: 16),
                        child: Scrollbar(
                          controller: ref.watch(customizationProvider).scrollController,
                          thumbVisibility: Platform.isMacOS || Platform.isLinux || Platform.isWindows,
                          interactive: Platform.isMacOS || Platform.isLinux || Platform.isWindows,
                          thickness: Platform.isMacOS || Platform.isLinux || Platform.isWindows ? 8 : 0,
                          child: Padding(
                            padding: const EdgeInsets.only(bottom: 16),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SizedBox(
                                  width: MediaQuery.of(context).size.width,
                                  height: 70,
                                  child: ListView.builder(
                                    controller: ref.watch(customizationProvider).scrollController,
                                    scrollDirection: Axis.horizontal,
                                    itemCount: colors.length,
                                    padding: const EdgeInsets.all(0),
                                    itemBuilder: (context, index) {
                                      if (index == 0) {
                                        return Row(
                                          children: [
                                            ColorItem(
                                              index: index,
                                              total: colors.length,
                                              color: colors[index],
                                              numericValue: index,
                                              selectedValue: ref.watch(appStatusProvider).selectedColor,
                                              onChanged: ref.read(appStatusProvider.notifier).setSelectedColor,
                                            ),
                                            Container(
                                              margin: const EdgeInsets.symmetric(horizontal: 10),
                                              width: 1,
                                              height: 60,
                                              decoration: BoxDecoration(
                                                color: Colors.grey,
                                                borderRadius: BorderRadius.circular(1),
                                              ),
                                            ),
                                          ],
                                        );
                                      } else {
                                        return ColorItem(
                                          index: index,
                                          total: colors.length,
                                          color: colors[index],
                                          numericValue: index,
                                          selectedValue: ref.watch(appStatusProvider).selectedColor,
                                          onChanged: ref.read(appStatusProvider.notifier).setSelectedColor,
                                        );
                                      }
                                    },
                                  ),
                                ),
                                Padding(
                                  padding: const EdgeInsets.symmetric(vertical: 8),
                                  child: Text(
                                    colorTranslation(ref.watch(appStatusProvider).selectedColor),
                                    style: TextStyle(color: Theme.of(context).listTileTheme.iconColor, fontSize: 16),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
