import { ICharacterDailyTask, isMobileOrTablet } 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;
  const isMobile = isMobileOrTablet();

  return (
    <ProgressContainer isMobile={isMobile}>
      <ProgressList isMobile={isMobile}>
        <ProgressRow>
          <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>
        </ProgressRow>

        <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<{ isMobile: boolean }>`
  width: 100%;
  position: relative;
`;

const ProgressList = styled.div<{ isMobile: boolean }>`
  display: flex;
  flex-direction: column;
  gap: ${props => props.isMobile ? '3px' : '4px'};
`;

const ProgressRow = styled.div`
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
`;

const ProgressItem = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  min-width: 100px;
`;

const ProgressLabel = styled.span`
  color: ${uiColors.lightGray} !important;
  font-size: 0.7rem;
`;

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