import React, { useEffect } from 'react';
import styled, { keyframes } from 'styled-components';

import aboutClip from './aboutClip.mp4';

const typing = keyframes`
0%{
    width:0%;
}
50%{
    width:100%;
}
100%{
    width:0%;
}
`;

const AboutContainer = styled.div`
  background: #111;
  cursor: initial;
`;

const Section = styled.section`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  clip-path: circle(1000px at center center);

  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
`;

const Wrapper = styled.div`
  position: relative;
  margin-top: 250vh; // 포인트
  padding: 100px;
  background: #111;
  height: 40vh;

  h2 {
    font-size: 2.5em;
    margin: 0;
    margin-bottom: 20px;

    color: transparent;
    position: absolute;
    top: 0%;
    left: 0%;
    text-transform: capitalize;
    white-space: nowrap;

    ::before {
      content: 'SKETCHBOOK 프로젝트는..';
      width: 100%;
      height: 100%;
      color: #da4747;
      overflow: hidden;
      border-right: 3px solid white;
      position: absolute;
      top: 0;
      left: 0;
      /* 커서 역할 */
      /* steps는 content길이 */
      animation: ${typing} 5s steps(18) infinite;
    }
  }

  p {
    font-size: 1em;
    color: #fff;
    font-family: 'elvetica Neue",Helvetica,Arial,sans-serif';
  }
`;

const About = () => {
  //   스크롤 내릴때마다 원이 줄어들고 올리면 원이 다시 넓어짐
  useEffect(() => {
    const banner = document.querySelector('.banner');
    window.addEventListener('scroll', function () {
      const value = 1000 - window.scrollY;
      banner.style.clipPath = 'circle(' + value + 'px at center center)';
    });
  }, []);

  // 새로고침시 스크롤 맨 위로
  useEffect(() => {
    window.onload = function () {
      setTimeout(function () {
        window.scrollTo(0, 0);
      }, 100);
    };
  }, []);

  return (
    <AboutContainer>
      <Section className='banner'>
        <video src={aboutClip} autoPlay muted loop></video>
      </Section>
      <Wrapper>
        <h2>SKETCHBOOK 프로젝트는..</h2>
        <p>
          지루하고 반복되는 일상을 잠시 벗어날 수 있게끔 당신에게 여유를
          제공합니다.
        </p>
      </Wrapper>
    </AboutContainer>
  );
};

export default About;