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: 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,
              ),
            ],
          ),
        ],
      ).toShadowContainer(context).paddingAll(16),
    );
  }
}
