import { IQuest } from '@rpg-engine/shared';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { uiColors } from '../../../constants/uiColors';
import { uiFonts } from '../../../constants/uiFonts';
import SelectArrow from '../../Arrow/SelectArrow';
import { Button, ButtonTypes } from '../../Button';
import { DraggableContainer } from '../../DraggableContainer';

import { RPGUIContainerTypes } from '../../RPGUI/RPGUIContainer';
import { Column } from '../../shared/Column';
import thumbnailDefault from './img/default.png';

export interface IQuestsButtonProps {
  disabled: boolean;
  title: string;
  onClick: (questId: string, npcId: string) => void;
}

export interface IQuestInfoProps {
  onClose?: () => void;
  buttons?: IQuestsButtonProps[];
  quests: IQuest[];
  onChangeQuest: (currentQuestIndex: number, currentQuestId: string) => void;
  scale?: number;
}

export const QuestInfo: React.FC<IQuestInfoProps> = ({
  quests,
  onClose,
  buttons,
  onChangeQuest,
  scale,
}) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const questsLength = quests.length - 1;

  useEffect(() => {
    if (onChangeQuest) {
      onChangeQuest(currentIndex, quests[currentIndex]._id);
    }
  }, [currentIndex]);

  const onLeftClick = () => {
    if (currentIndex === 0) setCurrentIndex(questsLength);
    else setCurrentIndex(index => index - 1);
  };
  const onRightClick = () => {
    if (currentIndex === questsLength) setCurrentIndex(0);
    else setCurrentIndex(index => index + 1);
  };

  return (
    <QuestDraggableContainer
      type={RPGUIContainerTypes.Framed}
      onCloseButton={() => {
        if (onClose) onClose();
      }}
      width="730px"
      cancelDrag=".equipment-container-body .arrow-selector"
      scale={scale}
    >
      {quests.length >= 2 ? (
        <QuestsContainer>
          {currentIndex !== 0 && (
            <SelectArrow
              direction="left"
              onPointerDown={onLeftClick}
            ></SelectArrow>
          )}
          {currentIndex !== quests.length - 1 && (
            <SelectArrow
              direction="right"
              onPointerDown={onRightClick}
            ></SelectArrow>
          )}

          <QuestContainer>
            <TitleContainer className="drag-handler">
              <Title>
                <Thumbnail
                  src={quests[currentIndex].thumbnail || thumbnailDefault}
                />
                {quests[currentIndex].title}
              </Title>
              <QuestSplitDiv>
                <hr className="golden" />
              </QuestSplitDiv>
            </TitleContainer>
            <Content>
              <p>{quests[currentIndex].description}</p>
            </Content>
            <QuestColumn className="dark-background" justifyContent="flex-end">
              {buttons &&
                buttons.map((button, index) => (
                  <Button
                    key={index}
                    onPointerDown={() =>
                      button.onClick(
                        quests[currentIndex]._id,
                        quests[currentIndex].npcId
                      )
                    }
                    disabled={button.disabled}
                    buttonType={ButtonTypes.RPGUIButton}
                    id={`button-${index}`}
                  >
                    {button.title}
                  </Button>
                ))}
            </QuestColumn>
          </QuestContainer>
        </QuestsContainer>
      ) : (
        <QuestsContainer>
          <QuestContainer>
            <TitleContainer className="drag-handler">
              <Title>
                <Thumbnail src={quests[0].thumbnail || thumbnailDefault} />
                {quests[0].title}
              </Title>
              <QuestSplitDiv>
                <hr className="golden" />
              </QuestSplitDiv>
            </TitleContainer>
            <Content>
              <p>{quests[0].description}</p>
            </Content>
            <QuestColumn className="dark-background" justifyContent="flex-end">
              {buttons &&
                buttons.map((button, index) => (
                  <Button
                    key={index}
                    onPointerDown={() =>
                      button.onClick(quests[0]._id, quests[0].npcId)
                    }
                    disabled={button.disabled}
                    buttonType={ButtonTypes.RPGUIButton}
                    id={`button-${index}`}
                  >
                    {button.title}
                  </Button>
                ))}
            </QuestColumn>
          </QuestContainer>
        </QuestsContainer>
      )}
    </QuestDraggableContainer>
  );
};

const QuestDraggableContainer = styled(DraggableContainer)`
  border: 1px solid black;
  width: 600px;
  padding: 0 0 0 0 !important;
  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
    height: auto;
  }
  .container-close {
    position: absolute;
    margin-left: auto;
    top: 20px;
    padding-right: 5px;
  }
  img {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
  }
`;

const QuestContainer = styled.div`
  margin-right: 40px;
  margin-left: 40px;
`;

const QuestsContainer = styled.div`
  display: flex;
  align-items: center;
`;

const Content = styled.div`
  padding: 18px;
  h1 {
    text-align: left;
    margin: 14px 0px;
  }
`;

const QuestSplitDiv = styled.div`
  width: 100%;
  font-size: 11px;
  margin-bottom: 10px;
  hr {
    margin: 0px;
    padding: 0px;
  }
  p {
    margin-bottom: 0px;
  }
`;

const QuestColumn = styled(Column)`
  padding-top: 5px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-evenly;
`;

const TitleContainer = styled.div`
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1rem;
`;

const Title = styled.h1`
  color: white;
  z-index: 22;
  font-size: ${uiFonts.size.medium} !important;
  color: ${uiColors.yellow} !important;
`;

const Thumbnail = styled.img`
  color: white;
  z-index: 22;
  width: 32px * 1.5;
  margin-right: 0.5rem;
  position: relative;
  top: -4px;
`;
