import 'dart:async';
import 'dart:js_interop' as js;
import 'dart:js_interop_unsafe' as js_util;

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

enum GymLinkScreen { mainPage, basketPage, historyPage }

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  State<MyApp> createState() => _MyAppState();
}

@js.JSExport()
class _MyAppState extends State<MyApp> {
  final _streamController = StreamController<void>.broadcast();
  GymLinkScreen _currentGymLinkScreen = GymLinkScreen.mainPage;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    final export = js.createJSInteropWrapper(this);
    js.globalContext['_appState'] = export;
    js.globalContext.callMethod('_stateSet'.toJS);
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GymLink Module',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
      ),
      debugShowCheckedModeBanner: false,
      home: gymLinkScreenRouter(_currentGymLinkScreen),
    );
  }

  @js.JSExport()
  void onTokenReceived(String token) {
    if (token == 'token123') {
      setState(() {
        _isLoading = false;
      });
    }
  }

  Widget gymLinkScreenRouter(GymLinkScreen which) {
    switch (which) {
      case GymLinkScreen.mainPage:
        return MainPage(
            title: 'Counter',
            isLoading: _isLoading,
            changeGymLinkScreenTo: changeGymLinkScreenTo);
      case GymLinkScreen.basketPage:
        return BasketPage(changeGymLinkScreenTo: changeGymLinkScreenTo);
      case GymLinkScreen.historyPage:
        return HistoryPage(changeGymLinkScreenTo: changeGymLinkScreenTo);
    }
  }

  @js.JSExport()
  void changeGymLinkScreenTo(String screenString) {
    setState(() {
      switch (screenString) {
        case 'main':
          _currentGymLinkScreen = GymLinkScreen.mainPage;
          break;
        case 'basket':
          _currentGymLinkScreen = GymLinkScreen.basketPage;
          break;
        case 'history':
          _currentGymLinkScreen = GymLinkScreen.historyPage;
          break;
      }
    });
  }
}

class MainPage extends StatefulWidget {
  final String title;
  final bool isLoading;
  final void Function(String) changeGymLinkScreenTo;

  const MainPage(
      {super.key,
      required this.title,
      required this.isLoading,
      required this.changeGymLinkScreenTo});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: widget.isLoading
            ? null
            : AppBar(
                title: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                    Padding(
                      padding: const EdgeInsets.only(right: 8),
                      child: Image.asset('logo.png', width: 24, height: 24),
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: Text('Powered by GymLink',
                          style: Theme.of(context).textTheme.titleSmall),
                    ),
                  ])),
        body: widget.isLoading
            ? const Center(child: CircularProgressIndicator())
            : Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                    Row(
                      children: [
                        Expanded(
                          child: TextField(
                            decoration: InputDecoration(
                              hintText: 'Search',
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(10),
                              ),
                              suffixIcon: InkWell(
                                onTap: () {
                                  debugPrint('tap on search icon');
                                },
                                child: const Icon(
                                  Icons.search,
                                  color: Colors.blue,
                                ),
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(width: 8),
                        ElevatedButton(
                          onPressed: () {
                            setState(() {
                              widget.changeGymLinkScreenTo('basket');
                            });
                          },
                          style: ElevatedButton.styleFrom(
                            padding: const EdgeInsets.all(0),
                            backgroundColor: Colors.blue,
                            shape: const CircleBorder(
                              side: BorderSide(
                                color: Colors.blue,
                                width: 2,
                              ),
                            ),
                          ),
                          child: const Icon(
                            Icons.shopping_basket,
                            color: Colors.white,
                            size: 24,
                          ),
                        ),
                        const SizedBox(width: 8),
                        ElevatedButton(
                          onPressed: () {
                            setState(() {
                              widget.changeGymLinkScreenTo('history');
                            });
                          },
                          style: ElevatedButton.styleFrom(
                            padding: const EdgeInsets.all(0),
                            backgroundColor: Colors.blue,
                            shape: const CircleBorder(
                              side: BorderSide(
                                color: Colors.blue,
                                width: 2,
                              ),
                            ),
                          ),
                          child: const Icon(
                            Icons.history,
                            color: Colors.white,
                            size: 24,
                          ),
                        ),
                      ],
                    ),
                  ])
        // : const Center(
        //     child: Column(
        //       mainAxisAlignment: MainAxisAlignment.center,
        //       children: <Widget>[
        //         Text(
        //           'Здесь будут товары',
        //         ),
        //       ],
        //     ),
        //   ),
        );
  }
}

class BasketPage extends StatelessWidget {
  final void Function(String) changeGymLinkScreenTo;
  const BasketPage({super.key, required this.changeGymLinkScreenTo});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: const Icon(Icons.arrow_back),
            onPressed: () => changeGymLinkScreenTo('main'),
          ),
          title: const Text('Корзина'),
        ),
        body: const Center(
          child: Text('Корзина'),
        ));
  }
}

class HistoryPage extends StatelessWidget {
  final void Function(String) changeGymLinkScreenTo;
  const HistoryPage({super.key, required this.changeGymLinkScreenTo});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: const Icon(Icons.arrow_back),
            onPressed: () => changeGymLinkScreenTo('main'),
          ),
          title: const Text('История заказов'),
        ),
        body: const Center(
          child: Text('История заказов'),
        ));
  }
}