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

import HeroCrop from '../../../assets/img/hero-crop.svg';
import { HeroContainer, BlockProduct } from '../../../styles/components/main/product/Hero.style';
import { Tooltip } from '../../shared/Tooltip';
import { Link } from '../../../styles/components/shared/Link.style';
import { PrismicElement, PrismicImage, PrismicLink } from 'easy-prismic-react';
import RichText from '../../RichText';

export interface HeroComponent {
  getHeight: () => number;
}

interface Props {
  name: string;
  CTALink: PrismicLink;
  shortName: string;
  shortDescription: PrismicElement;
  illustration: PrismicImage;
  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 {
      name,
      CTALink,
      shortDescription,
      illustration,
      startingPrice,
      hoverText,
      shortName
    } = this.props;

    return (
      <HeroContainer color="blue">
        <HeroCrop />
        <div>
          <BlockProduct ref={this.refContent}>
            <div>
              <img src={illustration.url} alt={illustration.alt} />
              <h1>{name}</h1>
              <RichText content={shortDescription} />
            </div>
            <div>
              <div><strong>Assurance professionnelle</strong> à partir de :</div>
              <Tooltip
                id="price-tooltip"
                display="inline-block"
                hoverable={
                  <u><strong>{startingPrice} €</strong></u>
                }
              >
                <RichText content={hoverText} />
              </Tooltip>
              <Link
                href={CTALink?.url || '/'}
                button
                color="yellow"
                large>
                Je trouve mon offre
              </Link>
              <small>
                <strong>Déjà un contrat {shortName} en cours ?</strong><br />
                Easyblue prend en charge votre résiliation
              </small>
            </div>
          </BlockProduct>
        </div>
      </HeroContainer>
    );
  }
}

export default Hero;