import 'dart:js_interop';
import 'dart:js_interop_unsafe';
import 'dart:ui_web' as ui_web;

import 'package:flutter/widgets.dart';
import 'package:web/web.dart' as web;

import 'telegram_session_web.dart';

const _telegramBotUsername = String.fromEnvironment(
  'TELEGRAM_BOT_USERNAME',
  defaultValue: 'carfteebot',
);

@JS('window')
external JSObject get _window;

class TelegramLoginButton extends StatefulWidget {
  const TelegramLoginButton({required this.onAuthenticated, super.key});

  final VoidCallback onAuthenticated;

  @override
  State<TelegramLoginButton> createState() => _TelegramLoginButtonState();
}

class _TelegramLoginButtonState extends State<TelegramLoginButton> {
  late final String _callbackName =
      'mapflowTelegramAuth${DateTime.now().microsecondsSinceEpoch}';
  late final String _viewType = 'mapflow-telegram-login-$_callbackName';

  @override
  void initState() {
    super.initState();
    final callback = ((JSAny? user) {
      saveTelegramLoginData(user);
      if (mounted) {
        widget.onAuthenticated();
      }
    }).toJS;
    _window.setProperty(_callbackName.toJS, callback);
    ui_web.platformViewRegistry.registerViewFactory(_viewType, _buildElement);
  }

  web.HTMLElement _buildElement(int viewId) {
    final container = web.HTMLDivElement()
      ..style.width = '100%'
      ..style.height = '48px'
      ..style.display = 'flex'
      ..style.justifyContent = 'center'
      ..style.alignItems = 'center';

    final script = web.HTMLScriptElement()
      ..src = 'https://telegram.org/js/telegram-widget.js?22'
      ..async = true;

    script
      ..setAttribute('data-telegram-login', _telegramBotUsername)
      ..setAttribute('data-size', 'large')
      ..setAttribute('data-radius', '8')
      ..setAttribute('data-userpic', 'false')
      ..setAttribute('data-onauth', '$_callbackName(user)');

    container.append(script);
    return container;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 48,
      width: 240,
      child: HtmlElementView(viewType: _viewType),
    );
  }
}