import React from 'react';
import styled from 'styled-components';
import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
import { NPCDialogText } from './NPCDialogText';
import {
  IQuestionDialog,
  IQuestionDialogAnswer,
  QuestionDialog,
} from './QuestionDialog/QuestionDialog';
import aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';

export enum NPCDialogType {
  TextOnly = 'TextOnly',
  TextAndThumbnail = 'TextAndThumbnail',
}

export interface INPCDialogProps {
  text?: string;
  type: NPCDialogType;
  imagePath?: string;
  onClose?: () => void;
  isQuestionDialog?: boolean;
  answers?: IQuestionDialogAnswer[];
  questions?: IQuestionDialog[];
}

export const NPCDialog: React.FC<INPCDialogProps> = ({
  text,
  type,
  onClose,
  imagePath,
  isQuestionDialog = false,
  questions,
  answers,
}) => {
  return (
    <RPGUIContainer
      type={RPGUIContainerTypes.FramedGold}
      width={isQuestionDialog ? '600px' : '80%'}
      height={'180px'}
    >
      {isQuestionDialog && questions && answers ? (
        <>
          <TextContainer
            flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}
          >
            <QuestionDialog
              questions={questions}
              answers={answers}
              onClose={() => {
                if (onClose) {
                  onClose();
                }
              }}
            />
          </TextContainer>
          {type === NPCDialogType.TextAndThumbnail && (
            <ThumbnailContainer>
              <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />
            </ThumbnailContainer>
          )}
        </>
      ) : (
        <>
          <Container>
            <CloseIcon onPointerDown={onClose}>X</CloseIcon>
            <TextContainer
              flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}
            >
              <NPCDialogText
                type={type}
                text={text || 'No text provided.'}
                onClose={() => {
                  if (onClose) {
                    onClose();
                  }
                }}
              />
            </TextContainer>
            {type === NPCDialogType.TextAndThumbnail && (
              <ThumbnailContainer>
                <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />
              </ThumbnailContainer>
            )}
          </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;
`;

const CloseIcon = styled.p`
  position: absolute;
  top: -1.5rem;
  right: -0.4rem;
  cursor: pointer;
  color: white;
  font-size: 1.1rem !important;
`;

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;
`;
