import 'package:day_night_time_picker/lib/constants.dart';
import 'package:day_night_time_picker/lib/daynight_timepicker.dart';
import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/constants/assets.dart';
import 'package:didvan/models/view/action_sheet_data.dart';
import 'package:didvan/models/view/app_bar_data.dart';
import 'package:didvan/providers/theme.dart';
import 'package:didvan/utils/action_sheet.dart';
import 'package:didvan/utils/date_time.dart';
import 'package:didvan/views/home/settings/general_settings/settings_state.dart';
import 'package:didvan/views/home/widgets/menu_item.dart';
import 'package:didvan/views/widgets/didvan/card.dart';
import 'package:didvan/views/widgets/didvan/divider.dart';
import 'package:didvan/views/widgets/didvan/radial_button.dart';
import 'package:didvan/views/widgets/didvan/scaffold.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/item_title.dart';
import 'package:didvan/views/widgets/state_handlers/state_handler.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:provider/provider.dart';

class GeneralSettings extends StatefulWidget {
  const GeneralSettings({Key? key}) : super(key: key);

  @override
  State<GeneralSettings> createState() => _GeneralSettingsState();
}

class _GeneralSettingsState extends State<GeneralSettings> {
  String get _fontScaleSuffix {
    final fontScale = DesignConfig.fontScale;
    if (fontScale == 1) return 'متوسط';
    if (fontScale == 1.15) return 'بزرگ';
    return 'کوچک';
  }

  int _intervalStart = 0;
  int _intervalEnd = 24;

  @override
  Widget build(BuildContext context) {
    return Consumer<GeneralSettingsState>(
      builder: (context, state, child) => StateHandler<GeneralSettingsState>(
        onRetry: () {},
        state: context.read<GeneralSettingsState>(),
        builder: (context, state) => DidvanScaffold(
          appBarData: AppBarData(hasBack: true, title: 'تنظیمات'),
          children: [
            DidvanCard(
              child: MenuItem(
                title: 'زمان دریافت اعلان',
                onTap: () => _pickTimeRange(context),
                icon: DidvanIcons.notification_regular,
                suffix: 'از' +
                    DateTimeUtils.normalizeTimeDuration(
                      Duration(minutes: state.notificationTimeRange[0]),
                    ) +
                    ' تا ' +
                    DateTimeUtils.normalizeTimeDuration(
                      Duration(minutes: state.notificationTimeRange[1]),
                    ),
              ),
            ),
            const ItemTitle(
              title: 'انتخاب قلم',
              icon: DidvanIcons.font_solid,
            ),
            DidvanCard(
              child: Column(
                children: [
                  MenuItem(
                    suffix: DesignConfig.fontFamily == 'Dana-FA'
                        ? 'دانا'
                        : 'ایران سنس',
                    title: 'فونت برنامه',
                    onTap: _showFontFamilyBottomSheet,
                  ),
                  const DidvanDivider(),
                  MenuItem(
                    suffix: _fontScaleSuffix,
                    title: 'اندازه متن',
                    onTap: _showFontScaleBottomSheet,
                  ),
                ],
              ),
            ),
            const ItemTitle(
              title: 'ظاهر برنامه',
              icon: DidvanIcons.theme_solid,
            ),
            DidvanCard(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  _themeItem(context, state, 'light'),
                  _themeItem(context, state, 'dark'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _showFontFamilyBottomSheet() async {
    final themeProvider = context.read<ThemeProvider>();
    final state = context.read<GeneralSettingsState>();
    final family = state.fontFamily;
    await ActionSheetUtils.showBottomSheet(
      data: ActionSheetData(
        content: StatefulBuilder(
          builder: (context, setState) => Column(
            children: [
              DidvanRadialButton(
                title: 'دانا',
                fontFamily: 'Dana-FA',
                onSelected: () {
                  state.fontFamily = 'Dana-FA';
                  setState(() {});
                },
                value: state.fontFamily == 'Dana-FA',
              ),
              const SizedBox(height: 24),
              DidvanRadialButton(
                title: 'ایران سنس',
                fontFamily: 'Iransans-FA',
                onSelected: () {
                  state.fontFamily = 'Iransans-FA';
                  setState(() {});
                },
                value: state.fontFamily == 'Iransans-FA',
              ),
            ],
          ),
        ),
        title: 'انتخاب فونت برنامه',
        titleIcon: DidvanIcons.font_regular,
        onDismissed: () => state.fontFamily = family,
        onConfirmed: () => themeProvider.fontFamily = state.fontFamily,
      ),
    );
  }

  Future<void> _showFontScaleBottomSheet() async {
    final themeProvider = context.read<ThemeProvider>();
    final state = context.read<GeneralSettingsState>();
    final scale = state.fontSizeScale;
    await ActionSheetUtils.showBottomSheet(
      data: ActionSheetData(
        content: StatefulBuilder(
          builder: (context, setState) => Column(
            children: [
              DidvanRadialButton(
                title: 'بزرگ',
                fontSize: 15 * 1.15,
                onSelected: () {
                  state.fontSizeScale = 1.15;
                  setState(() {});
                },
                value: state.fontSizeScale == 1.15,
              ),
              const SizedBox(height: 24),
              DidvanRadialButton(
                title: 'متوسط',
                onSelected: () {
                  state.fontSizeScale = 1;
                  setState(() {});
                },
                value: state.fontSizeScale == 1,
              ),
              const SizedBox(height: 24),
              DidvanRadialButton(
                title: 'کوچک',
                fontSize: 15 * 0.85,
                onSelected: () {
                  state.fontSizeScale = 0.85;
                  setState(() {});
                },
                value: state.fontSizeScale == 0.85,
              ),
            ],
          ),
        ),
        title: 'انتخاب اندازه متن',
        titleIcon: DidvanIcons.font_regular,
        onDismissed: () => state.fontSizeScale = scale,
        onConfirmed: () => themeProvider.fontScale = state.fontSizeScale,
      ),
    );
  }

  Future<void> _pickTimeRange(BuildContext context) async {
    final state = context.read<GeneralSettingsState>();
    _intervalStart = state.notificationTimeRange[0];
    _intervalEnd = state.notificationTimeRange[1];
    ActionSheetUtils.showBottomSheet(
      data: ActionSheetData(
        content: Row(
          children: [
            const SizedBox(width: 8),
            Expanded(child: _timeFieldBuilder(context, 0)),
            const SizedBox(width: 8),
            const DidvanText('-'),
            const SizedBox(width: 8),
            Expanded(child: _timeFieldBuilder(context, 1)),
            const SizedBox(width: 8),
          ],
        ),
        title: 'زمان دریافت اعلان',
        titleIcon: DidvanIcons.notification_regular,
        onConfirmed: () {
          state.notificationTimeRange = [_intervalStart, _intervalEnd];
        },
      ),
    );
  }

  Widget _timeFieldBuilder(BuildContext context, int index) {
    final GeneralSettingsState state = context.read<GeneralSettingsState>();
    return ChangeNotifierProvider.value(
      value: state,
      child: StatefulBuilder(
        builder: (context, setState) => GestureDetector(
          onTap: () async {
            await _openTimePicker(context, index);
            setState(() {});
          },
          child: Container(
            alignment: Alignment.center,
            padding: const EdgeInsets.all(24),
            decoration: BoxDecoration(
              color: Theme.of(context).colorScheme.splash,
              borderRadius: DesignConfig.mediumBorderRadius,
              border: Border.all(
                color: Theme.of(context).colorScheme.border,
              ),
            ),
            child: DidvanText(DateTimeUtils.normalizeTimeDuration(
              Duration(minutes: index == 0 ? _intervalStart : _intervalEnd),
            )),
          ),
        ),
      ),
    );
  }

  Future<void> _openTimePicker(BuildContext context, int index) async {
    await Navigator.of(context).push(
      showPicker(
        okText: 'تایید',
        cancelText: 'بازگشت',
        accentColor: Theme.of(context).colorScheme.primary,
        okStyle: Theme.of(context).textTheme.bodyText2!,
        cancelStyle: Theme.of(context).textTheme.bodyText2!,
        unselectedColor: Theme.of(context).colorScheme.text,
        blurredBackground: true,
        disableMinute: true,
        hourLabel: ':',
        minuteLabel: '',
        is24HrFormat: true,
        iosStylePicker: true,
        minuteInterval: MinuteInterval.FIFTEEN,
        context: context,
        value: const TimeOfDay(hour: 0, minute: 0),
        themeData: Theme.of(context),
        onChange: (time) {
          if (index == 0) {
            _intervalStart = time.hour;
            return;
          }
          _intervalEnd = time.hour;
        },
      ),
    );
  }

  Widget _themeItem(
      BuildContext context, GeneralSettingsState state, String brightness) {
    final bool isDarkTheme = brightness == 'dark';
    return GestureDetector(
      onTap: () {
        state.brightness = brightness;
        if (isDarkTheme && DesignConfig.isDark) {
          return;
        } else if (!isDarkTheme && !DesignConfig.isDark) {
          return;
        } else {
          if (isDarkTheme) {
            context.read<ThemeProvider>().themeMode = ThemeMode.dark;
          } else {
            context.read<ThemeProvider>().themeMode = ThemeMode.light;
          }
          DesignConfig.updateSystemUiOverlayStyle();
        }
      },
      child: Column(
        children: [
          SvgPicture.asset(isDarkTheme ? Assets.darkTheme : Assets.lightTheme),
          const SizedBox(height: 8),
          DidvanText(
            isDarkTheme ? 'تیره' : 'روشن',
          ),
        ],
      ),
    );
  }
}