import Image from 'next/image';
import phoneMockupLightImage from '@/assets/images/phone-mockup-light.png';
import screenshotEnImage from '@/assets/images/screenshot-en.png';
import screenshotRuImage from '@/assets/images/screenshot-ru.png';
import styles from './howItsWorkCard.module.css';
import { Card } from '@/components/card';
import useLocale from '@/utils/useLocale';
import { LocalesMap } from '@/utils/useLocale';
import { useRouter } from 'next/router';
import clsx from 'clsx';
import { useRef } from 'react';
import useScroll from '@/utils/useScroll';

const locales: LocalesMap = {
  ru: {
    title: 'Как это работает?',
    description:
      'Записывая каждую трату, вы отрезвляете разум и даете представление о том, сколько и как вы можете потратить.',
  },
  en: {
    title: 'How its work?',
    description:
      'Writing down each spending sobers the mind and gives you an idea of how much and how you can spend',
  },
};

export function HowItsWorkCard() {
  const router = useRouter();
  const t = useLocale(locales);
  const ref = useRef<any>();
  const imageRef = useRef<any>();

  useScroll((scrollY) => {
    if (!imageRef.current || !ref.current) return;

    const rootNode = ref.current;
    const imageNode = imageRef.current;

    const scrollOffsetCard = -Math.min(scrollY - rootNode.offsetTop + window.innerHeight - 300, 0);

    rootNode.style.transform = `translate3D(0px, ${Math.expm1(scrollOffsetCard / 60)}px, 0px) rotate(${-Math.expm1(scrollOffsetCard / 120)}deg)`;
    rootNode.style.transformOrigin = 'right top';

    const scrollOffset = rootNode.offsetTop - scrollY;

    imageNode.style.transform = `translate3D(0px, ${-(scrollOffset / 16)}px, 0px)`;
  }, {
    accelerator: 0.5,
  });

  return (
    <Card
      ref={ref}
      className={styles.card}
      title={t('title')}
      subtitle={t('description')}
      backdropOnText
      classes={{ subtitle: styles.description, title: styles.title }}
    >
      <div ref={imageRef} className={styles.mockupPhoneContainer}>
        <Image
          className={clsx(styles.mockupPhone)}
          height={1200}
          width={1708}
          placeholder="blur"
          alt=""
          src={phoneMockupLightImage}
        />
        <Image
          className={styles.screenshotMain}
          height={2340}
          width={1080}
          placeholder="blur"
          alt=""
          src={router.locale !== 'ru' ? screenshotEnImage : screenshotRuImage}
        />
      </div>
    </Card>
  );
}