import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
import { NPCDialogText } from './NPCDialogText';
import aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';
import pressSpaceGif from './img/space.gif';

export enum ImgSide {
  right = 'right',
  left = 'left',
}

export interface NPCMultiDialogType {
  text: string;
  imagePath?: string;
  imageSide: ImgSide;
}

export interface INPCMultiDialogProps {
  onClose: () => void;
  textAndTypeArray: NPCMultiDialogType[];
}

export const NPCMultiDialog: React.FC<INPCMultiDialogProps> = ({
  onClose,
  textAndTypeArray,
}) => {
  const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(
    false
  );
  const [slide, setSlide] = useState<number>(0);

  const onHandleSpacePress = (event: KeyboardEvent) => {
    if (event.code === 'Space') {
      if (slide < textAndTypeArray?.length - 1) {
        setSlide(prev => prev + 1);
      } else {
        // if there's no more text chunks, close the dialog
        onClose();
      }
    }
  };

  useEffect(() => {
    document.addEventListener('keydown', onHandleSpacePress);

    return () => document.removeEventListener('keydown', onHandleSpacePress);
  }, [slide]);

  return (
    <RPGUIContainer
      type={RPGUIContainerTypes.FramedGold}
      width={'50%'}
      height={'180px'}
    >
      <>
        <Container>
          {textAndTypeArray[slide]?.imageSide === 'right' && (
            <>
              <TextContainer flex={'70%'}>
                <NPCDialogText
                  onStartStep={() => setShowGoNextIndicator(false)}
                  onEndStep={() => setShowGoNextIndicator(true)}
                  text={textAndTypeArray[slide].text || 'No text provided.'}
                  onClose={() => {
                    if (onClose) {
                      onClose();
                    }
                  }}
                />
              </TextContainer>
              <ThumbnailContainer>
                <NPCThumbnail
                  src={
                    textAndTypeArray[slide].imagePath || aliceDefaultThumbnail
                  }
                />
              </ThumbnailContainer>
              {showGoNextIndicator && (
                <PressSpaceIndicator right={'10.5rem'} src={pressSpaceGif} />
              )}
            </>
          )}
          {textAndTypeArray[slide].imageSide === 'left' && (
            <>
              <ThumbnailContainer>
                <NPCThumbnail
                  src={
                    textAndTypeArray[slide].imagePath || aliceDefaultThumbnail
                  }
                />
              </ThumbnailContainer>
              <TextContainer flex={'70%'}>
                <NPCDialogText
                  onStartStep={() => setShowGoNextIndicator(false)}
                  onEndStep={() => setShowGoNextIndicator(true)}
                  text={textAndTypeArray[slide].text || 'No text provided.'}
                  onClose={() => {
                    if (onClose) {
                      onClose();
                    }
                  }}
                />
              </TextContainer>
              {showGoNextIndicator && (
                <PressSpaceIndicator right={'1rem'} src={pressSpaceGif} />
              )}
            </>
          )}
        </Container>
        )
      </>
    </RPGUIContainer>
  );
};

const Container = styled.div`
  display: flex;
  width: 100%;
  height: 100%;

  box-sizing: border-box;
  justify-content: center;
  align-items: flex-start;
  position: relative;
`;

interface ITextContainerProps {
  flex: string;
}

const TextContainer = styled.div<ITextContainerProps>`
  flex: ${({ flex }) => flex} 0 0;
  width: 355px;
`;

const ThumbnailContainer = styled.div`
  flex: 30% 0 0;
  display: flex;
  justify-content: flex-end;
`;

const NPCThumbnail = styled.img`
  image-rendering: pixelated;
  height: 128px;
  width: 128px;
`;

interface IPressSpaceIndicatorProps {
  right: string;
}

const PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`
  position: absolute;
  right: ${({ right }) => right};
  bottom: 1rem;
  height: 20.7px;
  image-rendering: -webkit-optimize-contrast;
`;
