import React from 'react';

import { HeroContainer, Mention, Bubble, Bubbles } from '../../../styles/components/main/homepage/Hero.style';
import HeroCrop from '../../../assets/img/hero-crop.svg';
import Arrow from '../../../assets/img/arrow.png';
import { Link } from '../../../styles/components/shared/Link.style';
import { PrismicElement, PrismicLink } from '../../../typings/prismic';
import RichText from '../../RichText';

interface Props {
  title: string;
  tagline: string;
  ctaLabel: string;
  ctaLink: PrismicLink;
  tip: PrismicElement;
}

export const BubbleBackground: React.FC = () => (
  <>
    <Bubbles>
      {[...Array(10)].map((_, index) => <Bubble key={index}
        size={30+Math.random()*4}
        distance={50+Math.random()*7}
        position={-5+Math.random()*110}
        time={10+Math.random()*15}
        delay={-1*(1+Math.random()*6)}
      />)}
    </Bubbles>
    <svg>
      <defs>
        <filter id="blob">
          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="blob"/>
          <feComposite in="SourceGraphic" in2="blob" operator="atop"/>
        </filter>
      </defs>
    </svg>
  </>
);

const Hero: React.FC<Props> = ({ title, tagline, ctaLabel, ctaLink, tip }) => {
  return (
    <HeroContainer color="blue">
      <BubbleBackground />
      <div>
        <h1>{title}</h1>
        <h3>{tagline}</h3>
        <div>
          <Link
            href={ctaLink?.url || '/'}
            button
            large
            color="yellow">
            {ctaLabel}
          </Link>
        </div>
        <Mention>
          <img src={Arrow} alt="" />
          <RichText content={tip} />
        </Mention>
      </div>
      <HeroCrop />
    </HeroContainer>
  );
};

export default Hero;