import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter/rendering.dart';
import 'package:notube/constants.dart';
import 'package:notube/models/video.dart';
import 'package:notube/videoList/cubit/videos_cubit.dart';
import 'package:notube/dlForm/cubit/dl_form_cubit.dart';

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

  @override
  State<SubmitButton> createState() => _SubmitButtonState();
}

class _SubmitButtonState extends State<SubmitButton> {
  bool isHovering = false;

  void addVideosListener(BuildContext context, DlFormState state) {
    if (state.isParsed) {
      context.read<VideosCubit>().setGlobalStatus('loaded');
      for (Video video in state.videos) {
        debugPrint('Adding video: $video');
        context.read<VideosCubit>().addVideo(video);
      }
      context.read<DlFormCubit>().clearForm();
      context.read<VideosCubit>().startDownloader();
    }
  }

  @override
  Widget build(BuildContext context) {
    return BlocListener<DlFormCubit, DlFormState>(
        listener: addVideosListener,
        child: ConstrainedBox(
          constraints: BoxConstraints.tightFor(width: 200),
          child: MouseRegion(
              cursor: SystemMouseCursors.click,
              onHover: (PointerHoverEvent event) {
                setState(() => isHovering = true);
              },
              onExit: (PointerExitEvent event) {
                setState(() => isHovering = false);
              },
              child: GestureDetector(
                onTap: () {
                  context.read<VideosCubit>().setGlobalStatus('loading');
                  context.read<DlFormCubit>().parseUrl();
                },
                child: Container(
                  padding: const EdgeInsets.symmetric(vertical: 14),
                  decoration: BoxDecoration(
                      color: isHovering ? colorDarkRed : colorMainRed,
                      borderRadius: BorderRadius.only(
                        topRight: Radius.circular(3),
                        bottomRight: Radius.circular(3),
                      )),
                  child: const Text('Ok', textAlign: TextAlign.center).tr(),
                ),
              )),
        ));
  }
}