import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_advanced_switch/flutter_advanced_switch.dart';
import 'package:local_auth/local_auth.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;

  bool localAuth = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

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

  void checkForLocalAuth(bool buttonState) async {
    bool authStatus = await _settingProvider.auth.authenticate(
      localizedReason: Platform.isAndroid ? "Scan your fingerprint to authenticate" : "",
      options: AuthenticationOptions(biometricOnly: Platform.isAndroid),
    );
    if (authStatus) {
      localAuth = !localAuth;
      await _settingProvider.setAuth(localAuth);
      // authController.value = _settingProvider.localAuth == buttonState.toString();
      setState(() {});
    } else {
      // authController.value = !buttonState;
    }
  }

  @override
  Widget build(BuildContext context) {
    if (_settingProvider == null) {
      _settingProvider = Provider.of<SettingProvider>(context, listen: false);
      localAuth = _settingProvider.localAuth;
    }

    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";
      });

    // authController ??= ValueNotifier<bool>(_settingProvider.localAuth == "false")
    //   ..addListener(() async {
    //     print("authController.value:${authController.value}");
    //
    //     // if (authController.value) {
    //     //   checkForLocalAuth();
    //     // } else {
    //     //   await _settingProvider.setAuth(_settingProvider.localAuth == "false");
    //     //   authController.value = _settingProvider.localAuth == "false";
    //     // }
    //   });

    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,
              ),
            ],
          ),
          16.height,
          const Divider().defaultStyle(context),
          16.height,
          FutureBuilder(
              future: _settingProvider.auth.isDeviceSupported(),
              builder: (cxt, snapshot) {
                bool isDeviceSupported = false;
                if (snapshot.hasData) {
                  isDeviceSupported = snapshot.data;
                }

                if (!isDeviceSupported) {
                  return Text("Your device did not support Fingerprint/Face ID.", style: AppTextStyles.tinyFont.copyWith(fontSize: 11, color: Colors.red));
                }

                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    "Fingerprint/Face ID".heading5(context),
                    customSwitch(localAuth).onPress(() {
                      checkForLocalAuth(localAuth);
                    }),
                  ],
                );
              }),
        ],
      ).toShadowContainer(context).paddingAll(16),
    );
  }

  Widget customSwitch(bool enable) {
    return Container(
        width: 42.toScreenWidth,
        height: 24.toScreenHeight,
        alignment: enable ? Alignment.centerRight : Alignment.centerLeft,
        decoration: BoxDecoration(
          color: enable ? AppColor.green50.withOpacity(0.5) : AppColor.neutral10,
          borderRadius: const BorderRadius.all(Radius.circular(30)),
        ),
        padding: const EdgeInsets.all(2),
        child: Container(
          height: 20.toScreenHeight,
          width: 20.toScreenWidth,
          decoration: BoxDecoration(shape: BoxShape.circle, color: enable ? AppColor.green50 : AppColor.neutral20),
        ));
  }
}