import React, { useState } from 'react';
import Slider from 'react-slick';
import { ImageType, ACFLink } from 'src/interfaces';
import {PrimaryButtonDarkLink} from '../../core/button/button';
import {
  HeroCarouselContainer,
  BackgroundImage,
  ButtonContainer,
  ContentBlock,
  ContentDescription,
  ContentTitle,
} from './heroCarousel.styles';

export const HERO_CAROUSEL_NAME = 'Page_Sections_layout_Content_HeroCarousel';

export const HERO_CAROUSEL_QUERY = `
  ${HERO_CAROUSEL_NAME} {
    fieldGroupName
    heroImages {
      image {
        altText
        sourceUrl
      }
      titleEn
      titleSp
      descriptionEn
      descriptionSp
      buttonOneEn {
        target
        title
        url
      }
      buttonOneSp {
        target
        title
        url
      }
      buttonTwoEn {
        target
        title
        url
      }
      buttonTwoSp {
        target
        title
        url
      }
    }
  }
`;

interface HeroImage{
  image: ImageType;
  titleEn: string;
  titleSp: string;
  descriptionEn: string;
  descriptionSp: string;
  buttonOneEn: ACFLink;
  buttonOneSp: ACFLink;
  buttonTwoEn: ACFLink;
  buttonTwoSp: ACFLink;
}
interface HeroCarouselProps {
  language: string;
  heroImages: HeroImage[];
}

export const HeroCarousel: React.FC<HeroCarouselProps> = ({
  heroImages,
  language,
}): JSX.Element => {

  const [activeImage, setActiveImage] = useState <HeroImage>(heroImages[0]);

  const settings = {
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 500,
    dots: true,
    beforeChange: (current: number, next: number) => { console.log(current); setActiveImage(heroImages[next])}
  }

  return (
    <HeroCarouselContainer>
      <Slider {...settings}>
        {heroImages.map(({image}, idx) => (
          image && <BackgroundImage key={`${image.sourceUrl} - ${idx}`} src={image.sourceUrl} alt={image.altText} />
        ))}
      </Slider>

      { language == 'english' && (activeImage.titleEn || activeImage.descriptionEn) && 
        <ContentBlock>
          <ContentTitle>{activeImage.titleEn}</ContentTitle>
          <ContentDescription>{activeImage.descriptionEn}</ContentDescription>
          <ButtonContainer>
            {activeImage.buttonOneEn && <PrimaryButtonDarkLink href={activeImage.buttonOneEn.url}>{activeImage.buttonOneEn.title}</PrimaryButtonDarkLink>}
            {activeImage.buttonTwoEn && <PrimaryButtonDarkLink href={activeImage.buttonTwoEn.url}>{activeImage.buttonTwoEn.title}</PrimaryButtonDarkLink>}
          </ButtonContainer>
        </ContentBlock>
      }

      { language != 'english' && (activeImage.titleSp || activeImage.descriptionSp) &&
        <ContentBlock>
          <ContentTitle>{activeImage.titleSp}</ContentTitle>
          <ContentDescription>{activeImage.descriptionSp}</ContentDescription>
          <ButtonContainer>
            {activeImage.buttonOneSp && <PrimaryButtonDarkLink href={activeImage.buttonOneSp.url}>{activeImage.buttonOneSp.title}</PrimaryButtonDarkLink>}
            {activeImage.buttonTwoSp && <PrimaryButtonDarkLink href={activeImage.buttonTwoSp.url}>{activeImage.buttonTwoSp.title}</PrimaryButtonDarkLink>}
          </ButtonContainer>
        </ContentBlock>
      }

    </HeroCarouselContainer>
  );
};

export default HeroCarousel;