import React from 'react';
import Slider from 'react-slick';
import {TestimonialType} from 'src/interfaces';
import {ComponentWrapper} from 'src/components/layouts/wrappers';
import {
  TestimonialCopyContainer,
  TestimonialDescription,
  TestimonialImage,
  TestimonialInfo,
  TestimonialItemWrapper,
  TestimonialItem,
  TestimonialName,
  TestimonialQuote,
  TestimonialsContainer,
} from './testimonials.styles';

export const TESTIMONIALS_NAME = 'Page_Sections_layout_Content_Testimonials';

export const TESTIMONIALS_QUERY = `
  ${TESTIMONIALS_NAME} {
    fieldGroupName
    testimonialBlocks {
      fieldGroupName
      descriptionEn
      descriptionSp
      image {
        altText
        sourceUrl
      }
      name
      quoteEn
      quoteSp
    }
  }
`;

interface TestimonialsProps {
  language: string;
  testimonialBlocks: TestimonialType[];
}

export const Testimonials: React.FC<TestimonialsProps> = ({language, testimonialBlocks}): JSX.Element => {
  const settings = {
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 500,
    dots: false,
  };

  testimonialBlocks = testimonialBlocks.map(testimonial => {
    return language === 'english'
      ? {
          description: testimonial.descriptionEn as string,
          quote: testimonial.quoteEn as string,
          image: testimonial.image,
          name: testimonial.name,
        }
      : {
          description: testimonial.descriptionSp as string,
          quote: testimonial.quoteSp as string,
          image: testimonial.image,
          name: testimonial.name,
        };
  });

  return (
    <ComponentWrapper>
      <TestimonialsContainer>
        <Slider {...settings}>
          {testimonialBlocks.map(({image, name, description, quote}, idx) => (
            <TestimonialItemWrapper key={`${name} - ${idx}`}>
              <TestimonialItem>
                {image && <TestimonialImage src={image.sourceUrl} alt={image.altText} />}
                <TestimonialCopyContainer>
                  <TestimonialQuote>“{quote}”</TestimonialQuote>
                  <TestimonialInfo>
                    <TestimonialName>&#8212; {name}</TestimonialName>
                    <TestimonialDescription>{description}</TestimonialDescription>
                  </TestimonialInfo>
                </TestimonialCopyContainer>
              </TestimonialItem>
            </TestimonialItemWrapper>
          ))}
        </Slider>
      </TestimonialsContainer>
    </ComponentWrapper>
  );
};

export default Testimonials;