import React from 'react';

import { Link as RouterLink } from '../../i18n';
import Container from '../shared/Container';
import { OfferBlock, OfferWrapper } from '../../styles/components/main/Offer.style';
import { Tooltip } from '../shared/Tooltip';
import { ButtonContainer, TButtonColors } from '../../styles/components/shared/Button.style';
import { hrefResolverProduct, linkResolverProduct } from '../../prismic';
import { PrismicLink as PrismicLinkInterface, PrismicDocument } from 'easy-prismic-react';
import PrismicLink from '../PrismicLink';
import { SharedProductData } from '../../typings/entities';
import RichText from '../RichText';
import { THardcodedPagesSlugs } from '../../pages/products/[slug]';

interface OfferProps {
  slug: THardcodedPagesSlugs | string;
  name: string;
  startingPrice: string;
  priceHoverText: JSX.Element | string;
  illustration: { url: string; alt?: string };
}

interface Props {
  title: string;
  offers: OfferProps[];
  CTAFindLabel: string;
  CATFindLink: PrismicLinkInterface;
  CTAButtonColor?: TButtonColors;
}

export function convertOffer(offer: PrismicDocument<SharedProductData>): OfferProps {
  return {
    slug: offer.uid,
    name: offer.data.product_name,
    startingPrice: offer.data.product_starting_price,
    priceHoverText: <RichText content={offer.data.product_price_hover_text} />,
    illustration: offer.data.product_illustration
  };
}

const Offers: React.FC<Props> = ({ title, offers, CTAFindLabel, CATFindLink, CTAButtonColor }) => (
  <Container color="blue">
    <h2>{title}</h2>
    <OfferWrapper>
      {offers.map((offer, index) =>
        <OfferBlock key={`offer-${index}`}>
          <div className="text-center">
            <img src={offer.illustration.url} alt={offer.illustration.alt} />
          </div>
          <h4>{offer.name}</h4>
          <Tooltip
            id={`tooltip-${offer.slug.replace(' ', '-')}`}
            display="inline-block"
            hoverable={
              <>
                <small>à partir de</small>
                <u><strong>{offer.startingPrice} €</strong></u>
              </>
            }
          >
            {offer.priceHoverText}
          </Tooltip>
          <RouterLink href={hrefResolverProduct(offer.slug)} as={linkResolverProduct(offer.slug)}>
            <a>
              <i className="fas fa-plus" />
              En savoir plus
            </a>
          </RouterLink>
        </OfferBlock>)}

    </OfferWrapper>
    <ButtonContainer>
      <PrismicLink
        link={CATFindLink}
        linkProps={{
          button: true,
          large: true,
          display: 'inline-block',
          color: CTAButtonColor
        }}>
        {CTAFindLabel}
      </PrismicLink>
    </ButtonContainer>
  </Container>
);

export default Offers;