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/pages/home/profile/settings/settings_state.dart';
import 'package:didvan/pages/home/profile/widgets/menu_item.dart';
import 'package:didvan/providers/theme_provider.dart';
import 'package:didvan/utils/actions_sheet.dart';
import 'package:didvan/widgets/didvan/card.dart';
import 'package:didvan/widgets/didvan/divider.dart';
import 'package:didvan/widgets/didvan/scaffold.dart';
import 'package:didvan/widgets/didvan/text.dart';
import 'package:didvan/widgets/item_title.dart';
import 'package:didvan/widgets/state_handler.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:provider/provider.dart';

class Settings extends StatelessWidget {
  const Settings({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer<SettingsState>(
      builder: (context, state, child) => StateHandler<SettingsState>(
        state: context.read<SettingsState>(),
        builder: (context, state) => DidvanScaffold(
          appBarData: AppBarData(hasBack: true, title: 'تنظیمات'),
          slivers: [
            DidvanCard(
              child: MenuItem(
                title: 'زمان دریافت اعلان',
                onTap: () => _pickTimeRange(context),
                icon: DidvanIcons.notification_regular,
                suffix: state.notificationTimeRange[0],
              ),
            ),
            const ItemTitle(
              title: 'انتخاب قلم',
              icon: DidvanIcons.font_solid,
            ),
            DidvanCard(
              child: Column(
                children: [
                  MenuItem(
                    suffix: 'نیاز به پیاده‌سازی',
                    title: 'فونت برنامه',
                    onTap: () {},
                  ),
                  const DidvanDivider(),
                  MenuItem(
                    suffix: 'نیاز به پیاده‌سازی',
                    title: 'اندازه متن',
                    onTap: () {},
                  ),
                ],
              ),
            ),
            const ItemTitle(
              title: 'ظاهر برنامه',
              icon: DidvanIcons.theme_solid,
            ),
            DidvanCard(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  _themeItem(context, state, 'light'),
                  _themeItem(context, state, 'dark'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _pickTimeRange(BuildContext context) async {
    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,
      ),
    );
  }

  Widget _timeFieldBuilder(BuildContext context, int index) {
    final SettingsState state = context.read<SettingsState>();
    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(state.notificationTimeRange[index]),
          ),
        ),
      ),
    );
  }

  Future<void> _openTimePicker(BuildContext context, int index) async {
    final SettingsState state = context.read<SettingsState>();
    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,
        hourLabel: 'ساعت',
        minuteLabel: 'دقیقه',
        is24HrFormat: true,
        iosStylePicker: true,
        minuteInterval: MinuteInterval.FIFTEEN,
        context: context,
        value: const TimeOfDay(hour: 0, minute: 0),
        themeData: Theme.of(context),
        onChange: (time) {
          state.notificationTimeRange = state.notificationTimeRange
            ..replaceRange(
              index,
              index + 1,
              ['${time.hour}:${time.minute}'],
            );
        },
      ),
    );
  }

  Widget _themeItem(
      BuildContext context, SettingsState state, String brightness) {
    final bool isDarkTheme = brightness == 'dark';
    return GestureDetector(
      onTap: () {
        state.brightness = brightness;
        if (isDarkTheme && Theme.of(context).brightness == Brightness.dark) {
          return;
        } else if (!isDarkTheme &&
            Theme.of(context).brightness == Brightness.light) {
          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 ? 'تیره' : 'روشن',
          ),
        ],
      ),
    );
  }
}