import usePluggedGSAP, { gsap } from '@/lib/usePluggedGSAP';
import { BELOW_W_512, BELOW_W_768, paddedMainContentWidth } from '@/styles/dimensions';
import styled from '@emotion/styled';
import { useCallback, useRef } from 'react';

const Wrapper = styled.div`
  height: calc(100svh - (${paddedMainContentWidth} / 13.5) - 8rem);
  @media screen and (${BELOW_W_768}) {
    height: calc(100svh - 38rem);
  }
  @media screen and (${BELOW_W_512}) {
    height: calc((100svh - 35svw) - 15rem);
  }
`;

const HeroImage = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/images/room-hero.jpg');
  background-size: cover;
  background-position: 50% 50%;
  display: block;
  pointer-events: none;
  transform-origin: 50% 50%;
  transform: scale(1);
`;

const HeroImageAnimation = () => {
  const wrapperRef = useRef<HTMLDivElement>(null);
  usePluggedGSAP(
    useCallback(() => {
      const el = wrapperRef.current;
      if (!el) return;
      const timeline = gsap.timeline({
        scrollTrigger: {
          scrub: true,
          trigger: el,
          start: 'top top',
          end: 'bottom top',
        },
      });
      timeline.to(el.querySelector('.image'), { scale: 2, ease: 'none' });
    }, []),
    {}
  );
  return (
    <Wrapper ref={wrapperRef}>
      <HeroImage className="image" />
    </Wrapper>
  );
};

export default HeroImageAnimation;