import {
  ICharacterDailyTask,
  ICollectItemsRequirement,
  ICollectProgress,
  ICraftProgress,
  ICraftRequirement,
  IKillMobsProgress,
  IKillMobsRequirement,
  IMapVisitProgress,
  TaskType,
} from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { ReadOnlyCheckItem } from '../ReadOnlyCheckItem';
import { formatTaskKey } from './utils/dailyTasks.utils';

interface ITaskProgressDetailsProps {
  task: ICharacterDailyTask;
}

export const TaskProgressDetails: React.FC<ITaskProgressDetailsProps> = ({
  task,
}) => {
  const { progress, type } = task;

  const progressRenderers = {
    [TaskType.KillMobs]: () => {
      return (
        (progress as IKillMobsProgress).kills &&
        Object.entries((progress as IKillMobsProgress).kills).map(
          ([key, value], index) => (
            <ProgressItem key={index}>
              <span>{formatTaskKey(key)}:</span>
              <ProgressCount>
                {value}/
                {(task.requirements as IKillMobsRequirement).targets.find(
                  t => t.key === key
                )?.quantity || 0}
              </ProgressCount>
            </ProgressItem>
          )
        )
      );
    },

    [TaskType.CollectItems]: () => {
      return Object.entries((progress as ICollectProgress).collected || {}).map(
        ([key, value], index) => (
          <ProgressItem key={index}>
            <span>{formatTaskKey(key)}:</span>
            <ProgressCount>
              {value}/
              {(task.requirements as ICollectItemsRequirement).targets.find(
                t => t.key === key
              )?.quantity || 0}
            </ProgressCount>
          </ProgressItem>
        )
      );
    },

    [TaskType.CraftItems]: () => {
      return Object.entries((progress as ICraftProgress).crafted || {}).map(
        ([key, value], index) => (
          <ProgressItem key={index}>
            <span>{formatTaskKey(key)}:</span>
            <ProgressCount>
              {value}/
              {(task.requirements as ICraftRequirement).targets.find(
                t => t.key === key
              )?.quantity || 0}
            </ProgressCount>
          </ProgressItem>
        )
      );
    },

    [TaskType.MapVisit]: () => {
      return Object.entries(
        (progress as IMapVisitProgress).visitedMaps || {}
      ).map(([mapName, visited], index) => (
        <ProgressItem key={index}>
          <CheckItemWrapper>
            <ReadOnlyCheckItem
              labelLeft={formatTaskKey(mapName)}
              checked={visited}
            />
          </CheckItemWrapper>
        </ProgressItem>
      ));
    },
  };

  return (
    <ProgressList>
      {progressRenderers[type] ? progressRenderers[type]() : null}
    </ProgressList>
  );
};

const ProgressList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 8px;
`;

const ProgressItem = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const ProgressCount = styled.span`
  color: ${uiColors.white} !important;
`;

const CheckItemWrapper = styled.div`
  display: flex;
  justify-content: center;
  width: 100%;
  height: 20px;

  input.rpgui-checkbox + label {
    margin: 0 !important;
    padding-left: 23px !important;
  }
`;
