import styles from '@/modules/home/home.module.scss';
import useLocale from '@/utils/useLocale';
import { LocalesMap } from '@/utils/useLocale';
import clsx from 'clsx';
import { manrope, caveat } from '@/styles/fonts';
import ThinStarBig from '@/assets/images/thin-star-big.svg';
import ThickRoundStar5 from '@/assets/images/thick-round-star-5.svg';
import ThickRoundStar6 from '@/assets/images/thick-round-star-6.svg';
import ridebusFlat from '@/assets/images/cities-backdrop.jpg';
import Image from 'next/image';
import { Gradients } from '@/components/gradients';
import { useEffect, useRef, Fragment } from 'react';
import GradientPrimary from '@/assets/images/header-gradient-primary.svg';
import GradientTertiary from '@/assets/images/header-gradient-tertiary.svg';
import useScroll from '@/utils/useScroll';
import { TopBar } from '@/components/topBar';
import useFrame from '@/utils/useFrame';
import useMediaQuery from '@/utils/useMediaQuery';
import noise from '@/assets/images/noise.png';

const locales: LocalesMap = {
  ru: {
    slogan_line: 'Приложение, которое поможет вам с лёгкостью смотреть расписание транспорта',
  },
  en: {
    slogan_line: 'Small app that helps you conveniently view public transpot schedules',
  },
};

export default function Header() {
  const t = useLocale(locales);
  const sloganLineRef = useRef<HTMLSpanElement>(null);
  const transitionToBackgoundRef = useRef<HTMLDivElement>(null);
  const thickRoundStar6 = useRef<HTMLDivElement>(null);
  const thickRoundStar5 = useRef<HTMLDivElement>(null);
  const breakpoint600 = false;//useMediaQuery('(max-width: 600px)');

  useScroll((scrollY, deltaTime, time) => {
    const childs: HTMLSpanElement[] = [
      ...Array.from(sloganLineRef.current?.children || []),
    ] as HTMLSpanElement[];

    childs.forEach((child, index) => {
      const rawOffset = Math.min(-scrollY * 2 + index * 50, 0);
      const offset = Math.max(-Math.pow(rawOffset / 50, 2), -500);
      const rotateDirection = index % 2 === 0 ? 1 : -1;

      child.style.transform = `translate3D(0px, ${offset}px, 0px) rotate(${(offset / 10) * rotateDirection}deg)`;
    });

    if (transitionToBackgoundRef.current && scrollY + 300 < window.innerHeight) {
      transitionToBackgoundRef.current.style.height = `${scrollY + 300}px`;
    }

    if (thickRoundStar6.current && scrollY - 300 < window.innerHeight) {
      thickRoundStar6.current.style.transform = `translate3D(0px, ${scrollY / 2}px, 0px) rotate(${scrollY / 8 + (time * 0.01) % 360}deg)`;
    }

    if (thickRoundStar5.current && scrollY - 300 < window.innerHeight) {
      thickRoundStar5.current.style.transform = `translate3D(0px, ${scrollY / 8}px, 0px) rotate(${scrollY / 8 + (time * 0.01) % 360}deg)`;
    }
  }, { accelerator: 0.06 });

  return (
    <Fragment>
      <header className={styles.header}>
        <TopBar />
        <div className={styles.thickRoundStar6}
          ref={thickRoundStar6}>
          <ThickRoundStar6 />
        </div>
        <div className={styles.thickRoundStar5}
          ref={thickRoundStar5}>
          <ThickRoundStar5 />
        </div>
        <h1 className={styles.slogan}>{t('slogan_line')}</h1>
        <div className={styles.gradientContainer}>
          <GradientPrimary className={styles.greenGradient} />
          <GradientTertiary className={styles.orangeGradient} />
        </div>
      </header>
    </Fragment>
  );
}