import React, { useState } from 'react';
import styled from 'styled-components';
import SelectArrow from '../Arrow/SelectArrow';
import { DraggableContainer } from '../DraggableContainer';
import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
import { DynamicText } from '../typography/DynamicText';

export interface ITextImageProps {
  image: string;
  textPosition?: 'flex-start' | 'flex-end';
  text: string;
}

export interface IImageCarouselProps {
  textImage: ITextImageProps[];
  isTextFixed: boolean;
  onCloseButton?: () => void;
}

export const ImageCarousel: React.FC<IImageCarouselProps> = ({
  textImage,
  isTextFixed,
  onCloseButton,
}) => {
  const [textImageSelected, setTextImageSelected] = useState(textImage[0]);

  const goToPreviousImage = () => {
    const currentIndex = textImage.indexOf(textImageSelected);
    if (currentIndex > 0) {
      setTextImageSelected(textImage[currentIndex - 1]);
    }
  };

  const goToNextImage = () => {
    const currentIndex = textImage.indexOf(textImageSelected);
    if (currentIndex < textImage.length - 1) {
      setTextImageSelected(textImage[currentIndex + 1]);
    }
  };

  return (
    <CarouselWrapper type={RPGUIContainerTypes.Framed}>
      {isTextFixed ? (
        <>
          <BackgroundImage
            imagePath={textImageSelected.image}
            isTextFixed={isTextFixed}
          >
            <ArrowContainer>
              {textImageSelected !== textImage[0] && (
                <SelectArrow
                  direction="left"
                  onPointerDown={() => goToPreviousImage()}
                ></SelectArrow>
              )}

              {textImageSelected !== textImage[textImage.length - 1] && (
                <SelectArrow
                  direction="right"
                  onPointerDown={() => goToNextImage()}
                ></SelectArrow>
              )}
            </ArrowContainer>
          </BackgroundImage>
          <Description
            textPosition={textImageSelected.textPosition ?? 'flex-start'}
            isTextFixed={isTextFixed}
          >
            <DynamicText text={textImageSelected.text} />
          </Description>
        </>
      ) : (
        <BackgroundImage
          imagePath={textImageSelected.image}
          isTextFixed={isTextFixed}
        >
          <ArrowContainer>
            {textImageSelected !== textImage[0] && (
              <SelectArrow
                direction="left"
                onPointerDown={() => goToPreviousImage()}
              ></SelectArrow>
            )}
            <Description
              textPosition={textImageSelected.textPosition ?? 'flex-start'}
              isTextFixed={isTextFixed}
            >
              <DynamicText text={textImageSelected.text} />
            </Description>
            {textImageSelected !== textImage[textImage.length - 1] && (
              <SelectArrow
                direction="right"
                onPointerDown={() => goToNextImage()}
              ></SelectArrow>
            )}
          </ArrowContainer>
        </BackgroundImage>
      )}
      {onCloseButton && (
        <CloseButton className="container-close" onPointerDown={onCloseButton}>
          X
        </CloseButton>
      )}
    </CarouselWrapper>
  );
};

interface IBackgroundImage {
  imagePath: string;
  isTextFixed: boolean;
}

interface ITextDescription {
  textPosition: 'flex-start' | 'flex-end';
  isTextFixed: boolean;
}

const CarouselWrapper = styled(DraggableContainer)`
  width: 100%;
  height: 100%;
`;

const ArrowContainer = styled.span`
  display: flex;
  height: 100%;
  align-items: center;
`;

const BackgroundImage = styled.div<IBackgroundImage>`
  background-image: url(${props => props.imagePath});
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: ${props => (props.isTextFixed ? '80%' : '100%')};
`;

const Description = styled.div<ITextDescription>`
  width: 100%;
  height: ${props => (props.isTextFixed ? 'auto' : '100%')};
  display: flex;
  align-items: ${props => props.textPosition};
  p {
    background-color: ${props =>
      props.isTextFixed ? 'none' : 'rgba(0, 0, 0, 0.6)'};
    border-radius: 5px;
    text-align: justify;
    height: auto;
  }
`;

const CloseButton = styled.div`
  position: absolute;
  top: 3px;
  right: 0px;
  color: white;
  z-index: 22;
  font-size: 1.5rem;
  @media (max-width: 950px) {
    font-size: 1.7rem;
    padding: 12px;
  }
`;
