import 'package:flutter/material.dart';

import 'package:mobdr/config/constant.dart';
import 'package:mobdr/config/global_style.dart';
import 'package:mobdr/ui/reusable/reusable_widget.dart';
import 'package:mobdr/service/shared_prefs.dart';

class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  // initialize reusable widget
  final _reusableWidget = ReusableWidget();

  late String _photoQuality;
  late bool _photoResizing;
  late bool _photoSound;
  late String _language;

  @override
  void initState() {
    super.initState();

    setState(() {
      _photoQuality = SharedPrefs().photoQuality;
      _photoResizing = SharedPrefs().photoResizing;
      _photoSound = SharedPrefs().photoSound;

      switch (SharedPrefs().langage) {
        case 'en':
          _language = 'English';
          break;
        case 'fr':
          _language = 'French';
          break;
        default:
          _language = 'French';
          break;
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          iconTheme: IconThemeData(
            color: GlobalStyle.appBarIconThemeColor,
          ),
          elevation: GlobalStyle.appBarElevation,
          title: Text(
            'Settings',
            style: GlobalStyle.appBarTitle,
          ),
          backgroundColor: GlobalStyle.appBarBackgroundColor,
          systemOverlayStyle: GlobalStyle.appBarSystemOverlayStyle,
          bottom: _reusableWidget.bottomAppBar(),
        ),
        body: ListView(
          children: [
            _buildSettingsContainer(),
            Divider(height: 0, color: Colors.grey[400]),
            _buildLanguageContainer(),
            Divider(height: 0, color: Colors.grey[400]),
          ],
        ));
  }

  Widget _buildSettingsContainer() {
    return Container(
      color: Colors.white,
      child: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {
          showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return _showQualityPopup();
            },
          );
        },
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('Photo quality',
                      style: TextStyle(fontSize: 15, color: CHARCOAL)),
                  Row(
                    children: [
                      Text(
                        _photoQuality,
                        style: TextStyle(
                          color: CHARCOAL,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Icon(
                        Icons.chevron_right,
                        size: 20,
                        color: SOFT_GREY,
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Divider(height: 0, color: Colors.grey[400]),
            Padding(
              padding: EdgeInsets.only(left: 16, right: 4),
              child: SwitchListTile(
                contentPadding: EdgeInsets.zero,
                title: Text(
                  'Photo resizing',
                  style: TextStyle(fontSize: 15, color: CHARCOAL),
                ),
                value: _photoResizing,
                activeColor: PRIMARY_COLOR,
                onChanged: (bool value) {
                  setState(() {
                    _photoResizing = value;
                    SharedPrefs().photoResizing = value;
                  });
                },
              ),
            ),
            Divider(height: 0, color: Colors.grey[400]),
            Padding(
              padding: EdgeInsets.only(left: 16, right: 4),
              child: SwitchListTile(
                contentPadding: EdgeInsets.zero,
                title: Text(
                  'Play sound when taking a photo',
                  style: TextStyle(fontSize: 15, color: CHARCOAL),
                ),
                value: _photoSound,
                activeColor: PRIMARY_COLOR,
                onChanged: (bool value) {
                  setState(() {
                    _photoSound = value;
                    SharedPrefs().photoSound = value;
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildLanguageContainer() {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
        showModalBottomSheet<void>(
          context: context,
          builder: (BuildContext context) {
            return _showLanguagePopup();
          },
        );
      },
      child: Container(
        color: Colors.white,
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('Language', style: TextStyle(fontSize: 15, color: CHARCOAL)),
              Row(
                children: [
                  Text(
                    _language,
                    style: TextStyle(
                      color: CHARCOAL,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Icon(
                    Icons.chevron_right,
                    size: 20,
                    color: SOFT_GREY,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _showQualityPopup() {
    List<String> qualityOptions = ['Defaut', 'High', 'Medium', 'Low'];

    return StatefulBuilder(
      builder: (BuildContext context, StateSetter mystate) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Center(
              child: Container(
                margin: EdgeInsets.only(top: 12, bottom: 12),
                width: 40,
                height: 4,
                decoration: BoxDecoration(
                  color: Colors.grey[500],
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
              child: Text(
                'Choose Quality',
                style: GlobalStyle.chooseCourier,
              ),
            ),
            Flexible(
              child: ListView.builder(
                padding: EdgeInsets.all(16),
                itemCount: qualityOptions.length,
                itemBuilder: (BuildContext context, int index) {
                  String qualityOption = qualityOptions[index];
                  return GestureDetector(
                    behavior: HitTestBehavior.translucent,
                    onTap: () {
                      setState(() {
                        _photoQuality = qualityOption;
                        SharedPrefs().photoQuality = qualityOption;
                      });
                      Navigator.pop(context);
                    },
                    child: Container(
                      margin: EdgeInsets.only(top: 16),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            qualityOption,
                            style: GlobalStyle.courierType,
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        );
      },
    );
  }

  Widget _showLanguagePopup() {
    List<String> languageOptions = ['English', 'French'];

    return StatefulBuilder(
      builder: (BuildContext context, StateSetter mystate) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Center(
              child: Container(
                margin: EdgeInsets.only(top: 12, bottom: 12),
                width: 40,
                height: 4,
                decoration: BoxDecoration(
                  color: Colors.grey[500],
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
              child: Text(
                'Choose Language',
                style: GlobalStyle.chooseCourier,
              ),
            ),
            Flexible(
              child: ListView.builder(
                padding: EdgeInsets.all(16),
                itemCount: languageOptions.length,
                itemBuilder: (BuildContext context, int index) {
                  String languageOption = languageOptions[index];
                  return GestureDetector(
                    behavior: HitTestBehavior.translucent,
                    onTap: () {
                      setState(() {
                        _language = languageOption;
                        switch (languageOption) {
                          case 'English':
                            SharedPrefs().langage = 'en';
                            break;
                          case 'French':
                            SharedPrefs().langage = 'fr';
                            break;
                          default:
                            _language = 'French';
                            break;
                        }
                      });
                      Navigator.pop(context);
                    },
                    child: Container(
                      margin: EdgeInsets.only(top: 16),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            languageOption,
                            style: GlobalStyle.courierType,
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        );
      },
    );
  }
}