import React, { Component, createRef, RefObject } from 'react';

import HeroCrop from '../../../../assets/img/hero-crop.svg';
import IllustrationData from '../../../../assets/img/illustration/data.svg';
import IllustrationHands from '../../../../assets/img/illustration/hands.svg';
import IllustrationHandsMobile from '../../../../assets/img/illustration/hands-2.svg';
import { BlockProduct, HeroContainer } from '../../../../styles/components/main/product/cyber/Hero.style';
import { Tooltip } from '../../../shared/Tooltip';
import { Link } from '../../../../styles/components/shared/Link.style';
import { HeroComponent } from '../Hero';
import { PrismicElement,PrismicLink } from '../../../../typings/prismic';
import RichText from '../../../RichText';

interface Props {
  CTALink: PrismicLink;
  shortDescription: PrismicElement;
  startingPrice: string;
  hoverText: PrismicElement;
}

class Hero extends Component<Props> implements HeroComponent {
  refContent: RefObject<HTMLDivElement> = createRef();

  public getHeight(): number {
    return this.refContent.current.offsetHeight + this.refContent.current.offsetTop;
  }

  render(): React.ReactElement {
    const {
      CTALink,
      shortDescription,
      startingPrice,
      hoverText,
    } = this.props;


    return (
      <HeroContainer color="blue">
        <HeroCrop />
        <div>
          <BlockProduct ref={this.refContent}>
            <div>
              <h1>
                L’assurance <strong>cyber-criminalité</strong> enfin accessible aux entrepreneurs, indépendants et TPE.
              </h1>
              <RichText content={shortDescription} />
              <div className="bold">
                <Tooltip
                  id="tooltip"
                  display="block"
                  hoverable={
                    <>
                      À partir de
                      <u>{startingPrice} € / mois.</u>
                    </>
                  }
                >
                  <RichText content={hoverText} />
                </Tooltip>
                Devis immédiat, souscription en 5 min.
              </div>
              <Link
                href={CTALink?.url || '/'}
                button
                color="yellow"
                large>
                Je trouve mon offre <span>sur-mesure</span>
              </Link>
            </div>
            <div>
              <IllustrationData className="data" />
              <IllustrationHands className="hands desktop" />
              <IllustrationHandsMobile className="hands mobile" />
            </div>
          </BlockProduct>
        </div>
      </HeroContainer>
    );
  }
}

export default Hero;