import 'package:flutter/material.dart';
import 'package:ionicons/ionicons.dart';
// import 'package:quasar_jet/main.dart';
import 'package:quasar_jet/models/storage_model.dart';
import 'package:quasar_jet/services/vpn_service.dart';
import 'package:quasar_jet/views/settings_view.dart';
import 'package:quasar_jet/widgets/abstract_animated_background.dart';

// ignore: must_be_immutable
class MainView extends StatefulWidget {
  MainView({super.key, required this.model, required this.vpnService});

  ThemeMode themeMode = ThemeMode.system;
  StorageModel model;
  VpnService vpnService;

  @override
  State<MainView> createState() => _MainViewState();
}

class _MainViewState extends State<MainView> {
  late final VpnService _vpnService = widget.vpnService;

  @override
  void initState() {
    super.initState();
    _vpnService.addListener(_onVpnChanged);
    _initializeV2Ray();
  }

  Future<void> _initializeV2Ray() async {
    final String? message = await _vpnService.init();
    if (message != null) {
      _showMessage(message);
    }
    await _vpnService.syncActiveConfig(widget.model);
  }

  void _onVpnChanged() {
    if (!mounted) return;
    setState(() {});
  }

  void _showMessage(String message) {
    if (!mounted) return;
    ScaffoldMessenger.of(
      context,
    ).showSnackBar(SnackBar(content: Text(message)));
  }

  Future<void> _toogleConfig() async {
    final String? message = await _vpnService.toggle(widget.model);
    if (message != null) {
      _showMessage(message);
    }
  }

  Future<void> _goToSettings() async {
    await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) =>
            SettingsView(model: widget.model, vpnService: widget.vpnService),
      ),
    );
    await _vpnService.syncActiveConfig(widget.model);
  }

  void changeTheme(ThemeMode mode) {
    setState(() {
      widget.themeMode = mode;
    });
  }

  // Future<void> _changeTheme(BuildContext context) async {
  //   await showDialog(
  //     context: context,
  //     builder: (context) => SimpleDialog(
  //       title: const Center(child: Text("Themes")),
  //       children: [
  //         ListTile(
  //           title: const Text('Light'),
  //           onTap: () {
  //             MyApp.of(context).changeTheme(ThemeMode.light);
  //           },
  //         ),
  //         ListTile(
  //           title: const Text('Dark'),
  //           onTap: () {
  //             MyApp.of(context).changeTheme(ThemeMode.dark);
  //           },
  //         ),
  //         ListTile(
  //           title: const Text('System'),
  //           onTap: () {
  //             MyApp.of(context).changeTheme(ThemeMode.system);
  //           },
  //         ),
  //       ],
  //     ),
  //   );
  // }

  @override
  void dispose() {
    _vpnService.removeListener(_onVpnChanged);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    const ButtonStyle noPressEffectIconStyle = ButtonStyle(
      overlayColor: WidgetStatePropertyAll(Colors.transparent),
      splashFactory: NoSplash.splashFactory,
    );

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        title: Text("quasar jet"),
        centerTitle: true,
        useDefaultSemanticsOrder: true,
        actions: [
          // IconButton(
          //   onPressed: () => _changeTheme(context),
          //   icon: Icon(Ionicons.sunny),
          // ),
          IconButton(
            onPressed: _goToSettings,
            style: noPressEffectIconStyle,
            icon: const Icon(Ionicons.settings),
          ),
        ],
      ),
      body: Stack(
        fit: StackFit.expand,
        children: [
          AbstractAnimatedBackground(isVpnActive: _vpnService.isConnected),
          Align(
            alignment: AlignmentGeometry.bottomCenter,
            child: Padding(
              padding: EdgeInsetsGeometry.all(40),
              child: Text(_vpnService.connectionState),
            ),
          ),
          Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                IconButton(
                  onPressed: _vpnService.isProcessing ? null : _toogleConfig,
                  style: noPressEffectIconStyle,
                  icon: _vpnService.isProcessing
                      ? const SizedBox(
                          width: 48,
                          height: 48,
                          child: CircularProgressIndicator(strokeWidth: 2),
                        )
                      : Icon(
                          _vpnService.isConnected
                              ? Ionicons.stop
                              : Ionicons.play,
                          size: 52,
                        ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}