import { ICharacterDailyTask } from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { DailyRewardsTooltip } from './DailyRewardsTooltip';
import { TaskProgressDetails } from './TaskProgressDetails';
import { formatDifficulty, getStatusInfo } from './utils/dailyTasks.utils';

interface TaskProgressProps {
  task: ICharacterDailyTask;
  itemsAtlasJSON: Record<string, any>;
  itemsAtlasIMG: string;
  iconAtlasJSON?: Record<string, any>;
  iconAtlasIMG?: string;
}

export const TaskProgress: React.FC<TaskProgressProps> = ({
  task,
  itemsAtlasJSON,
  itemsAtlasIMG,
  iconAtlasJSON,
  iconAtlasIMG,
}) => {
  const { difficulty } = task;

  return (
    <ProgressContainer>
      <ProgressList>
        <ProgressItem>
          <ProgressLabel>Difficulty:</ProgressLabel>
          <TaskDifficulty difficulty={difficulty}>
            {formatDifficulty(difficulty)}
          </TaskDifficulty>
        </ProgressItem>

        <ProgressItem>
          <ProgressLabel>Status:</ProgressLabel>
          <StatusText color={getStatusInfo(task).color}>
            {getStatusInfo(task).text}
          </StatusText>
        </ProgressItem>

        <TaskProgressDetails task={task} />

        {task.rewards && task.rewards.length > 0 && (
          <ProgressItem>
            <DailyRewardsTooltip
              rewards={task.rewards}
              itemsAtlasJSON={itemsAtlasJSON}
              itemsAtlasIMG={itemsAtlasIMG}
              iconAtlasJSON={iconAtlasJSON}
              iconAtlasIMG={iconAtlasIMG}
            />
          </ProgressItem>
        )}
      </ProgressList>
    </ProgressContainer>
  );
};

const ProgressContainer = styled.div`
  width: 100%;
  position: relative;
`;

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

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

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

const TaskDifficulty = styled.span<{ difficulty: string }>`
  color: ${props =>
    props.difficulty.toLowerCase() === 'challenge'
      ? uiColors.red
      : uiColors.lightGray} !important;
`;

const StatusText = styled.span<{ color: string }>`
  color: ${props => props.color} !important;
  font-weight: bold;
`;
