import 'package:flutter/material.dart';
import 'package:flutter_advanced_switch/flutter_advanced_switch.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/controllers/providers/settings/setting_provider.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';

import '../common_widgets/default_app_bar.dart';

class SettingsPage extends StatefulWidget {
  static const id = "/settings_page";

  const SettingsPage({Key key}) : super(key: key);

  @override
  State<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  ValueNotifier<bool> langController, themeController;
  SettingProvider _settingProvider;

  @override
  void dispose() {
    super.dispose();
    langController.dispose();
    themeController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _settingProvider ??= Provider.of<SettingProvider>(context, listen: false);
    langController ??= ValueNotifier<bool>(_settingProvider.language == "ar")
      ..addListener(() async {
        /// TODO : uncomment the below lines to support the another language
        await _settingProvider.setLanguage(_settingProvider.language == "ar" ? "en" : "ar");
        langController.value = _settingProvider.language == "ar";
      });
    themeController ??= ValueNotifier<bool>(_settingProvider.theme == "light")
      ..addListener(() async {
        await _settingProvider.setDarkTheme(_settingProvider.theme == "light");
        themeController.value = _settingProvider.theme == "light";
      });
    return Scaffold(
      appBar: DefaultAppBar(title: context.translation.settings),
      body: Card(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                context.translation.arabic.heading5(context),
                AdvancedSwitch(
                  controller: langController,
                  activeColor: AppColor.green50.withOpacity(0.5),
                  inactiveColor: AppColor.neutral10,
                  thumb: CircleAvatar(backgroundColor: _settingProvider.language == "ar" ? AppColor.green50 : AppColor.neutral20),
                  borderRadius: const BorderRadius.all(Radius.circular(30)),
                  width: 42.toScreenWidth,
                  height: 24.toScreenHeight,

                  /// TODO : remove the below attribute to enable the switch
                  //enabled: false,
                  disabledOpacity: 1,
                ),
              ],
            ),
            16.height,
            const Divider().defaultStyle(context),
            16.height,
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                context.translation.lightTheme.heading5(context),
                AdvancedSwitch(
                  controller: themeController,
                  activeColor: AppColor.green50.withOpacity(0.5),
                  inactiveColor: AppColor.neutral10,
                  thumb: CircleAvatar(backgroundColor: _settingProvider.theme == "light" ? AppColor.green50 : AppColor.neutral20),
                  borderRadius: const BorderRadius.all(Radius.circular(30)),
                  width: 42.toScreenWidth,
                  height: 24.toScreenHeight,
                  disabledOpacity: 1,
                ),
              ],
            ),
          ],
        ).paddingAll(16),
      ).paddingAll(16),
    );
  }
}