import 'dart:io';

import 'package:adaptive_theme/adaptive_theme.dart';
import 'package:fluffychat/config/setting_keys.dart';
import 'package:fluffychat/views/widgets/max_width_body.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:image_picker/image_picker.dart';

import '../config/app_config.dart';
import '../views/widgets/matrix.dart';

class SettingsStyle extends StatefulWidget {
  @override
  _SettingsStyleState createState() => _SettingsStyleState();
}

class _SettingsStyleState extends State<SettingsStyle> {
  void setWallpaperAction(BuildContext context) async {
    final wallpaper = await ImagePicker().getImage(source: ImageSource.gallery);
    if (wallpaper == null) return;
    Matrix.of(context).wallpaper = File(wallpaper.path);
    await Matrix.of(context)
        .store
        .setItem(SettingKeys.wallpaper, wallpaper.path);
    setState(() => null);
  }

  void deleteWallpaperAction(BuildContext context) async {
    Matrix.of(context).wallpaper = null;
    await Matrix.of(context).store.deleteItem(SettingKeys.wallpaper);
    setState(() => null);
  }

  AdaptiveThemeMode _currentTheme;

  void _switchTheme(AdaptiveThemeMode newTheme, BuildContext context) {
    switch (newTheme) {
      case AdaptiveThemeMode.light:
        AdaptiveTheme.of(context).setLight();
        break;
      case AdaptiveThemeMode.dark:
        AdaptiveTheme.of(context).setDark();
        break;
      case AdaptiveThemeMode.system:
        AdaptiveTheme.of(context).setSystem();
        break;
    }
    setState(() => _currentTheme = newTheme);
  }

  @override
  Widget build(BuildContext context) {
    _currentTheme ??= AdaptiveTheme.of(context).mode;
    return Scaffold(
      appBar: AppBar(
        leading: BackButton(),
        title: Text(L10n.of(context).changeTheme),
      ),
      body: MaxWidthBody(
        withScrolling: true,
        child: Column(
          children: [
            RadioListTile<AdaptiveThemeMode>(
              groupValue: _currentTheme,
              value: AdaptiveThemeMode.system,
              title: Text(L10n.of(context).systemTheme),
              onChanged: (t) => _switchTheme(t, context),
            ),
            RadioListTile<AdaptiveThemeMode>(
              groupValue: _currentTheme,
              value: AdaptiveThemeMode.light,
              title: Text(L10n.of(context).lightTheme),
              onChanged: (t) => _switchTheme(t, context),
            ),
            RadioListTile<AdaptiveThemeMode>(
              groupValue: _currentTheme,
              value: AdaptiveThemeMode.dark,
              title: Text(L10n.of(context).darkTheme),
              onChanged: (t) => _switchTheme(t, context),
            ),
            Divider(height: 1),
            ListTile(
              title: Text(
                L10n.of(context).wallpaper,
                style: TextStyle(
                  color: Theme.of(context).accentColor,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            if (Matrix.of(context).wallpaper != null)
              ListTile(
                title: Image.file(
                  Matrix.of(context).wallpaper,
                  height: 38,
                  fit: BoxFit.cover,
                ),
                trailing: Icon(
                  Icons.delete_forever_outlined,
                  color: Colors.red,
                ),
                onTap: () => deleteWallpaperAction(context),
              ),
            Builder(builder: (context) {
              return ListTile(
                title: Text(L10n.of(context).changeWallpaper),
                trailing: Icon(Icons.wallpaper_outlined),
                onTap: () => setWallpaperAction(context),
              );
            }),
            Divider(height: 1),
            ListTile(
              title: Text(
                L10n.of(context).fontSize,
                style: TextStyle(
                  color: Theme.of(context).accentColor,
                  fontWeight: FontWeight.bold,
                ),
              ),
              subtitle: Text('(*${AppConfig.fontSizeFactor})'),
            ),
            Container(
              alignment: Alignment.centerLeft,
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 16),
                padding:
                    const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
                decoration: BoxDecoration(
                  color: Theme.of(context).secondaryHeaderColor,
                  borderRadius: BorderRadius.circular(16),
                ),
                child: Text(
                  'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor',
                  style: TextStyle(
                    fontSize: Theme.of(context).textTheme.bodyText1.fontSize *
                        AppConfig.fontSizeFactor,
                  ),
                ),
              ),
            ),
            Slider(
              min: 0.5,
              max: 2.5,
              divisions: 4,
              value: AppConfig.fontSizeFactor,
              semanticFormatterCallback: (d) => d.toString(),
              onChanged: (d) {
                setState(() => AppConfig.fontSizeFactor = d);
                Matrix.of(context).store.setItem(
                      SettingKeys.fontSizeFactor,
                      AppConfig.fontSizeFactor.toString(),
                    );
              },
            ),
          ],
        ),
      ),
    );
  }
}