import React, { FC, useState } from 'react';
import { Placeholder } from '@times-components/image';
import { TripCardProps } from './types';
import {
  CardContainer,
  ImageContainer,
  CardImage,
  OfferLabel,
  GiftBanner,
  CardContent,
  TopContainer,
  BottomContainer,
  Headline,
  DataPointsList,
  DataPoint,
  DataIcon,
  PriceSection,
  PriceContainer,
  OfferContainer,
  PriceLabel,
  OriginalPrice,
  CurrentPrice,
  LogoContainer,
  CTAButton,
  PriceSuffix,
  StyledLink
} from './styles';
import { MoonIcon, LocationIcon, BoatIcon, CalendarIcon } from './assets';
import { tealiumTrackingHandler } from '../../helpers/tracking/TrackingHandler';
import { getPreferredEdition } from '../../utils/cookie';

export const TripCard: FC<TripCardProps> = ({
  card,
  isStaticGrid,
  imgHeight = {}
}) => {
  const [imageLoaded, setImageLoaded] = useState(false);
  const trackEvent = (eventName: string) => {
    tealiumTrackingHandler(
      eventName,
      'navigation',
      'click',
      card.headline,
      undefined,
      {
        app_content_location: getPreferredEdition()
      }
    );
  };

  const handleCardClick = (type: 'headline' | 'img') => () =>
    type === 'headline'
      ? trackEvent(`trip card: ${card.headline}`)
      : trackEvent('trip card: img click');

  const handleCTAClick = () =>
    trackEvent(`trip card: ${card.cta_text || 'View Itinerary'}`);

  const handleLogoClick = () => trackEvent(`trip card: ${card.logo_name}`);

  return (
    <CardContainer>
      <StyledLink
        href={card.cta_url}
        target="_blank"
        rel="noopener noreferrer"
        onClick={handleCardClick('img')}
      >
        <ImageContainer isStaticGrid={isStaticGrid} {...imgHeight}>
          {!imageLoaded && <Placeholder />}
          <CardImage
            src={card.image}
            alt={card.headline}
            onLoad={() => setImageLoaded(true)}
            isLoaded={imageLoaded}
          />
          {card.offer_label && <OfferLabel>{card.offer_label}</OfferLabel>}
          {card.gift_banner && <GiftBanner>{card.gift_banner}</GiftBanner>}
        </ImageContainer>
      </StyledLink>

      <CardContent>
        <TopContainer>
          <StyledLink
            href={card.cta_url}
            target="_blank"
            rel="noopener noreferrer"
            onClick={handleCardClick('headline')}
          >
            <Headline>{card.headline}</Headline>
          </StyledLink>

          <DataPointsList>
            {card.date && (
              <DataPoint>
                <DataIcon>
                  <CalendarIcon />
                </DataIcon>
                <span>{card.date}</span>
              </DataPoint>
            )}
            {card.duration && (
              <DataPoint>
                <DataIcon>
                  <MoonIcon />
                </DataIcon>
                <span>{card.duration}</span>
              </DataPoint>
            )}
            {card.destination && (
              <DataPoint>
                <DataIcon>
                  <LocationIcon />
                </DataIcon>
                <span>{card.destination}</span>
              </DataPoint>
            )}
            {card.ship && (
              <DataPoint>
                <DataIcon>
                  <BoatIcon />
                </DataIcon>
                <span>{card.ship}</span>
              </DataPoint>
            )}
          </DataPointsList>
        </TopContainer>

        <BottomContainer>
          <PriceSection>
            <PriceContainer>
              {card.price !== 'Enquire now' && (
                <OfferContainer>
                  {<PriceLabel>From</PriceLabel>}
                  {card.original_price && (
                    <OriginalPrice>
                      {card.original_price}
                      pp
                    </OriginalPrice>
                  )}
                </OfferContainer>
              )}
              <CurrentPrice $isEnquire={card.price === 'Enquire now'}>
                {card.price}
                {card.price !== 'Enquire now' && <PriceSuffix>pp</PriceSuffix>}
              </CurrentPrice>
            </PriceContainer>

            {card.logo && (
              <LogoContainer>
                <a
                  href={card.logo_url}
                  target="_blank"
                  rel="noopener noreferrer"
                  onClick={handleLogoClick}
                >
                  <img src={card.logo} alt="Partner logo" />
                </a>
              </LogoContainer>
            )}
          </PriceSection>

          <CTAButton
            href={card.cta_url}
            target="_blank"
            rel="noopener noreferrer"
            onClick={handleCTAClick}
          >
            {card.cta_text || 'View Itinerary'}
          </CTAButton>
        </BottomContainer>
      </CardContent>
    </CardContainer>
  );
};