import 'package:flutter/material.dart';

import 'settings_controller.dart';

/// Displays the various settings that can be customized by the user.
///
/// When a user changes a setting, the SettingsController is updated and
/// Widgets that listen to the SettingsController are rebuilt.
class SettingsView extends StatelessWidget {
  const SettingsView({super.key, required this.controller});

  static const routeName = '/settings';

  final SettingsController controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Settings'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            themeSelector(),
            ...hostSelector(),
            ...loginForm(),
          ],
        ),
      ),
    );
  }

  Widget themeSelector() {
    return DropdownButton<ThemeMode>(
      value: controller.themeMode,
      onChanged: controller.updateThemeMode,
      items: const [
        DropdownMenuItem(
          value: ThemeMode.system,
          child: Text('System Theme'),
        ),
        DropdownMenuItem(
          value: ThemeMode.light,
          child: Text('Light Theme'),
        ),
        DropdownMenuItem(
          value: ThemeMode.dark,
          child: Text('Dark Theme'),
        )
      ],
    );
  }

  List<Widget> hostSelector() {
    return [
      DropdownButton<String?>(
        value: controller.get('protocol', 'https://'),
        onChanged: (v) => controller.set('protocol', v),
        items: const [
          DropdownMenuItem(
            value: 'https://',
            child: Text('https://'),
          ),
          DropdownMenuItem(
            value: 'http://',
            child: Text('http://'),
          )
        ],
      ),
      TextFormField(
        decoration: const InputDecoration(
          border: UnderlineInputBorder(),
          labelText: "Hostname",
        ),
        initialValue: controller.get('hostname', ''),
        onChanged: (v) => controller.set('hostname', v),
      ),
      TextFormField(
        decoration: const InputDecoration(
          border: UnderlineInputBorder(),
          labelText: "Port",
        ),
        keyboardType: TextInputType.number,
        initialValue: controller.get("port", 0).toString(),
        onChanged: (v) => controller.set('port', int.parse(v)),
      ),
    ];
  }

  List<Widget> loginForm() {
    return [
      TextFormField(
        decoration: const InputDecoration(
          border: UnderlineInputBorder(),
          labelText: "Username",
        ),
        initialValue: controller.get('username', ''),
        onChanged: (v) => controller.set('username', v),
      ),
      TextFormField(
        decoration: const InputDecoration(
          border: UnderlineInputBorder(),
          labelText: "Password",
        ),
        obscureText: true,
        enableSuggestions: false,
        autocorrect: false,
        initialValue: controller.get('password', ''),
        onChanged: (v) => controller.set('password', v),
      ),
    ];
  }
}