import React, {useState, useRef} from 'react';
import Slider from 'react-slick';
import {TimelineCarouselType, ACFLink} from 'src/interfaces';
import {ComponentWrapper} from '../../layouts/wrappers';
import {
  TimelineCarouselContainer,
  Title,
  TimelineIncrementorLi,
  TimelineIncrementorWrapper,
  TimelineIncrementorUl,
  TimelineCarouselWrapper,
  TimelineCarouselCopy,
  TimelineCarouselDescription,
  TimelineCarouselImage,
  TimelineCarouselItemWrapper,
  TimelineCarouselItem,
  TimelineCarouselTitle,
  TimelineLink
} from './timelineCarousel.styles';

export const TIMELINE_CAROUSEL_NAME = 'Page_Sections_layout_Content_TimelineCarousel';

export const TIMELINE_CAROUSEL_QUERY = `
  ${TIMELINE_CAROUSEL_NAME} {
    fieldGroupName
    titleEn
    titleSp
    carouselItems {
      timelineIncrementor
      timelineDescriptionEn
      timelineDescriptionSp
      timelineTitleEn
      timelineTitleSp
      timelineImage {
        altText
        sourceUrl
      }
      timelineLink {
        target
        title
        url
      }
    }
  }
`;

interface TimelineCarouselProps {
  language: string;
  titleEn: string;
  titleSp: string;
  carouselItems: TimelineCarouselType[];
  timelineLink: ACFLink;
}

export const TimelineCarousel: React.FC<TimelineCarouselProps> = ({
  titleEn,
  titleSp,
  carouselItems,
  language
}): JSX.Element => {
  const [slideIndex, setSlideIndex] = useState(0);
  const sliderRef = useRef<any>(null);
  const timelineRef = useRef<any>(null);

  const title = language === 'english' ? titleEn : titleSp;

  const timelineIncrementor = carouselItems.map(item => item.timelineIncrementor);

  const carouselSlides = carouselItems.map(item => {
    return language === 'english'
      ? {
          timelineTitle: item.timelineTitleEn as string,
          timelineDescription: item.timelineDescriptionEn as string,
          timelineImage: item.timelineImage,
          timelineLink: item.timelineLink
        }
      : {
          timelineTitle: item.timelineTitleSp as string,
          timelineDescription: item.timelineDescriptionSp as string,
          timelineImage: item.timelineImage,
          timelineLink: item.timelineLink
        };
  });

  const settings = {
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 500,
    dots: false,
    beforeChange: (_current: number, next: number) => {
      setSlideIndex(next);
      const currentIncrementor = document.getElementById(`timeline-incrementor-${next}`);

      if (currentIncrementor) {
        currentIncrementor.scrollIntoView({behavior: 'smooth', inline: 'center', block: 'nearest'});
      }
    },
  };

  const onSliderClick = (e: any, slideIdx: number) => {
    e.target.scrollIntoView({behavior: 'smooth', inline: 'center', block: 'nearest'});
    sliderRef.current.slickGoTo(slideIdx);
  };

  return (
    <ComponentWrapper>
      <TimelineCarouselContainer>
        <Title>{title}</Title>
        <TimelineIncrementorWrapper>
          <TimelineIncrementorUl ref={timelineRef}>
            {timelineIncrementor.map((timeline, idx) => (
              <TimelineIncrementorLi
                key={`${timeline} - ${idx}`}
                id={`timeline-incrementor-${idx}`}
                data-text={timeline}
                active={idx === slideIndex}
                onClick={e => onSliderClick(e, idx)}
                titleLength={timeline.length}
              />
            ))}
          </TimelineIncrementorUl>
        </TimelineIncrementorWrapper>
        <TimelineCarouselWrapper>
          <Slider ref={sliderRef} {...settings}>
            {carouselSlides.map(({timelineTitle, timelineDescription, timelineImage, timelineLink}, idx) => (
              <TimelineCarouselItemWrapper key={`${timelineTitle} - ${idx}`}>
                <TimelineCarouselItem>
                  {timelineImage && <TimelineCarouselImage src={timelineImage.sourceUrl} alt={timelineImage.altText} />}
                  <TimelineCarouselCopy>
                    {timelineLink ? 
                        <TimelineLink as="a" href={timelineLink.url}>
                          <TimelineCarouselTitle>{timelineTitle}&#8198;&#8198;<span style={{fontSize: '.75em'}}>⇨</span></TimelineCarouselTitle>
                        </TimelineLink>
                      : <TimelineCarouselTitle>{timelineTitle}</TimelineCarouselTitle>
                    }          
                    <TimelineCarouselDescription>{timelineDescription}
                      &#8198;&#8198;&#8198;
                      {timelineLink ? 
                        <TimelineLink as="a" href={timelineLink.url}>&gt;</TimelineLink>
                      : ''}
                    </TimelineCarouselDescription>
                    
                  </TimelineCarouselCopy>
                </TimelineCarouselItem>
              </TimelineCarouselItemWrapper>
            ))}
          </Slider>
        </TimelineCarouselWrapper>
      </TimelineCarouselContainer>
    </ComponentWrapper>
  );
};

export default TimelineCarousel;