import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../utils/image_utils.dart';
import '../widgets/load_image.dart';

class Images {
  static Widget keyboard = LoadAssetImage(
    'bt_icon_keyboard',
    height: 51.w,
    width: 51.w,
  );

  static Widget back = LoadAssetImage(
    'btn_icon_back',
    height: 41.h,
    width: 35.w,
  );

  static Widget up = _UpAndDown(
    child: LoadAssetImage(
      'btn_icon_up',
      fit: BoxFit.contain,
      height: 47.w,
      width: 47.w,
    ),
  );

  static Widget ip = LoadAssetImage(
    'pic_ip',
    height: 578.h,
    width: 356.w,
  );

  static Widget male = LoadAssetImage(
    'label_icon_male',
    height: 18.h,
    width: 18.h,
    fit: BoxFit.fill,
  );

  static Widget female = LoadAssetImage(
    'label_icon_female',
    height: 18.h,
    width: 18.h,
    fit: BoxFit.fill,
  );

  static Widget splashBegin = _FadeInAndOut(
    child: LoadAssetImage(
      'splash/btn_icon_begin',
      height: 105.h,
      width: 378.w,
    ),
  );

  static Widget welcomeBegin = _FadeInAndOut(
    child: LoadAssetImage(
      'welcome/btn_label_bg_up',
      height: 114.h,
      width: 270.w,
    ),
  );

  static Widget pullDown = LoadAssetImage(
    'welcome/btn_icon_pull_down',
    height: 21.w,
    width: 21.w,
  );

  static Widget pullUp = _UpAndDown(
    child: LoadAssetImage(
      'welcome/btn_icon_up',
      height: 21.w,
      width: 21.w,
    ),
  );

  static Widget selectPre = LoadAssetImage(
    'welcome/btn_icon_select_pre',
    height: 24.w,
    width: 24.w,
  );

  static Widget selectDefault = LoadAssetImage(
    'welcome/btn_icon_select_default',
    height: 24.w,
    width: 24.w,
  );

  static Widget questionRecommended = _FadeInAndOut(
    child: LoadAssetImage(
      'question/label_recommended',
      height: 105.h,
      width: 390.w,
    ),
  );

  static Widget homeCreate = _FadeInAndOut(
    child: LoadAssetImage(
      'home/label_label_create',
      height: 105.h,
      width: 378.w,
    ),
  );

  static Widget homeReset = LoadAssetImage(
    'home/btn_icon_reset',
    height: 10.w,
    width: 10.w,
  );

  static Widget homeAvatar = LoadAssetImage(
    'home/pic_avatar',
    height: 67.w,
    width: 67.w,
  );

  static Widget homeBeginGray = LoadAssetImage(
    'home/btn_icon_begin_gray',
    height: 66.w,
    width: 66.w,
  );

  static Widget homeExploreBegin = LoadAssetImage(
    'home/btn_icon_explore_begin',
    height: 66.w,
    width: 66.w,
  );

  static Widget homeExploreCountdown = LoadAssetImage(
    'home/btn_icon_explore_countdown',
    height: 66.w,
    width: 66.w,
  );

  static Widget homeProgressBar = LoadAssetImage(
    'home/label_progress_bar',
    height: 10.w,
    width: 50.w,
  );

  static Widget homeProgressBarIn = LoadAssetImage(
    'home/label_progress_bar_in',
    height: 10.w,
    width: 50.w,
  );

  static Widget homePicturebook = LoadAssetImage(
    'home/btn_icon_picture_book',
    height: 41.w,
    width: 41.w,
  );

  static Widget homePicturebookGrey = LoadAssetImage(
    'home/btn_icon_picture_book_grey',
    height: 41.w,
    width: 41.w,
  );

  static Widget homeProgramme = LoadAssetImage(
    'home/btn_icon_programme',
    height: 41.w,
    width: 41.w,
  );

  static Widget homeProgrammeGrey = LoadAssetImage(
    'home/btn_icon_programme_grey',
    height: 41.w,
    width: 41.w,
  );

  static Widget homeMusic = LoadAssetImage(
    'home/btn_icon_music',
    height: 41.w,
    width: 41.w,
  );

  static Widget homeMusicGrey = LoadAssetImage(
    'home/btn_icon_music_grey',
    height: 41.w,
    width: 41.w,
  );

  static Widget homeIp = LoadAssetImage(
    'home/pic_ip',
    height: 161.h,
    width: 83.w,
  );

  static Widget homeDelete = LoadAssetImage(
    'home/btn_icon_delete',
    height: 56.h,
    width: 106.w,
  );

  static Widget homeCircle = LoadAssetImage(
    'home/btn_circle',
    height: 9.w,
    width: 9.w,
  );

  static Widget homeLanternBright = LoadAssetImage(
    'home/label_icon_lantern_bright',
    height: 21.h,
    width: 39.w,
  );

  static Widget studyHome = LoadAssetImage(
    'study/btn_icon_homepage',
    height: 66.w,
    width: 66.w,
    fit: BoxFit.fill,
  );

  static Widget studyIllumeDefault = LoadAssetImage(
    'study/btn_icon_illume_default',
    height: 22.w,
    width: 22.w,
    fit: BoxFit.fill,
  );

  static Widget studyIllumePre = LoadAssetImage(
    'study/btn_icon_illume_pre',
    height: 22.w,
    width: 22.w,
    fit: BoxFit.fill,
  );

  static Widget loading = LoadAssetImage(
    'loading',
    height: 99.h,
    width: 99.w,
    format: ImageFormat.gif,
  );

  static const AssetImage splashBg =
      AssetImage("assets/images/splash/bg_pic_launch_page.png");

  static const AssetImage welcomeBg =
      AssetImage("assets/images/welcome/bg_pic_welcome_page.png");
  static const AssetImage welcomeInputBg =
      AssetImage("assets/images/welcome/bg_pic.png");
  static const AssetImage welcomeDialog =
      AssetImage("assets/images/welcome/pic_bg_dialogue_type.png");

  static const AssetImage selectBg =
      AssetImage("assets/images/select/bg_pic_answer_page.png");
  static const AssetImage selectChange =
      AssetImage("assets/images/select/btn_icon_change.png");
  static const AssetImage selectBgBorder =
      AssetImage("assets/images/select/label_bg_border.png");
  static const AssetImage selectTitle1 =
      AssetImage("assets/images/select/label_bg_title_1.png");
  static const AssetImage selectTitle2 =
      AssetImage("assets/images/select/label_bg_title_2.png");
  static const AssetImage selectBgShadow =
      AssetImage("assets/images/select/bg_shadow.png");
  static const AssetImage selectBgReflect =
      AssetImage("assets/images/select/btn_bg_reflect.png");
  static const AssetImage selectBgGenerate =
      AssetImage("assets/images/select/btn_bg_generate.png");
  static const AssetImage selectBgCareer =
      AssetImage("assets/images/select/label_bg_career.png");

  static const AssetImage questionBg =
      AssetImage("assets/images/question/bg_pic_answer_page.png");
  static const AssetImage questionDialog =
      AssetImage("assets/images/question/pic_dialogue_type.png");
  static const AssetImage questionAnswer =
      AssetImage("assets/images/question/label_bg_answer.png");

  static const AssetImage homeBg =
      AssetImage("assets/images/home/bg_pic_dream_tree_page.png");
  static const AssetImage homeColud =
      AssetImage("assets/images/home/pic_cloud.png");
  static const AssetImage homeTree =
      AssetImage("assets/images/home/pic_tree.png");
  static const AssetImage homeUserName =
      AssetImage("assets/images/home/bg_pic_user_name.png");
  static const AssetImage homeExploreDefault =
      AssetImage("assets/images/home/btn_bg_explore_default.png");
  static const AssetImage homeExplorePre =
      AssetImage("assets/images/home/btn_bg_explore_pre.png");
  static const AssetImage homeFourthLeaf =
      AssetImage("assets/images/home/pic_fourth_leaf.png");
  static const AssetImage homeThirdLeaf =
      AssetImage("assets/images/home/pic_third_leaf.png");
  static const AssetImage homeSecondLeaf =
      AssetImage("assets/images/home/pic_second_leaf.png");
  static const AssetImage homeFirstLeaf =
      AssetImage("assets/images/home/pic_first_leaf.png");
  static const AssetImage homeShine =
      AssetImage("assets/images/home/btn_bg_shine.png");
  static const AssetImage homeWindows =
      AssetImage("assets/images/home/bg_pic_windows.png");
  static const AssetImage homeLantern =
      AssetImage("assets/images/home/label_icon_lantern.png");
  static const AssetImage homeMainAppProgramme =
      AssetImage("assets/images/home/btn_bg_programme.png");
  static const AssetImage homeMainAppPictureBook =
      AssetImage("assets/images/home/btn_bg_picture_book.png");
  static const AssetImage homeMainAppMusic =
      AssetImage("assets/images/home/btn_bg_music.png");
  static const AssetImage homeMainAppGrey =
      AssetImage("assets/images/home/btn_bg_grey.png");

  static const AssetImage studyBg =
      AssetImage("assets/images/study/bg_pic_dream_exploration_page.png");
  static const AssetImage studyKnowledgeBg =
      AssetImage("assets/images/study/bg_pic_knowledge_page.png");
  static const AssetImage studyDialogBg =
      AssetImage("assets/images/study/pic_dialogue_type.png");
  static const AssetImage studyTreeBg =
      AssetImage("assets/images/study/label_bg_skill_tree.png");
  static const AssetImage studyIp =
      AssetImage("assets/images/study/pic_ip.png");
  static const AssetImage studyTitleOccupation =
      AssetImage("assets/images/study/label_bg_title_occupation.png");
  static const AssetImage studyTitleTask =
      AssetImage("assets/images/study/label_bg_title_task.png");
  static const AssetImage studyKnowledgePointDefault =
      AssetImage("assets/images/study/btn_bg_knowledge_point_default.png");
  static const AssetImage studyKnowledgePointPre =
      AssetImage("assets/images/study/btn_bg_knowledge_point_pre.png");
  static const AssetImage studyKnowledgeDefault =
      AssetImage("assets/images/study/btn_bg_knowledge_default.png");
  static const AssetImage studyKnowledgePre =
      AssetImage("assets/images/study/btn_bg_knowledge_pre.png");

  static const AssetImage avatar = AssetImage("assets/images/label_avatar.png");
  static const AssetImage avatarUser =
      AssetImage("assets/images/label_avatar_user.png");
}

class _FadeInAndOut extends HookWidget {
  const _FadeInAndOut({
    super.key,
    required this.child,
  });

  final Widget child;

  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(
      duration: const Duration(milliseconds: 300),
      reverseDuration: const Duration(milliseconds: 500),
    );
    useEffect(() {
      void onStateChange(AnimationStatus state) {
        if (state == AnimationStatus.completed) {
          controller.reverse();
        } else if (state == AnimationStatus.dismissed) {
          controller.forward();
        }
      }

      controller.addStatusListener(onStateChange);
      controller.forward();
      return () {
        controller.removeStatusListener(onStateChange);
      };
    }, [controller]);
    final opacityTween = Tween(
      begin: 0.7,
      end: 1.0,
    );
    return FadeTransition(
      opacity: opacityTween.animate(controller),
      child: child,
    );
  }
}

class _UpAndDown extends HookWidget {
  const _UpAndDown({
    super.key,
    required this.child,
  });

  final Widget child;

  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(
      duration: const Duration(milliseconds: 300),
      reverseDuration: const Duration(milliseconds: 500),
    );
    useEffect(() {
      void onStateChange(AnimationStatus state) {
        if (state == AnimationStatus.completed) {
          controller.reverse();
        } else if (state == AnimationStatus.dismissed) {
          controller.forward();
        }
      }

      controller.addStatusListener(onStateChange);
      controller.forward();
      return () {
        controller.removeStatusListener(onStateChange);
      };
    }, [controller]);
    final offsetTween = Tween(
      begin: const Offset(0, 0.2),
      end: const Offset(0, 0),
    );
    return SlideTransition(
      position: offsetTween.animate(controller),
      child: child,
    );
  }
}