import {
  ICharacterDailyTask,
  ICollectGlobalRewardRequest,
  ICollectRewardRequest,
  TaskType,
} from '@rpg-engine/shared';
import React, { useState } from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { useResponsiveSize } from '../CraftBook/hooks/useResponsiveSize';
import { DraggableContainer } from '../DraggableContainer';
import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
import { DailyTaskItem } from './DailyTaskItem';
import { GlobalDailyProgress } from './GlobalDailyProgress';
import { getTaskIcon } from './utils/dailyTasks.utils';

export interface IDailyTasksProps {
  tasks: ICharacterDailyTask[];
  onClaimReward: (task: ICollectRewardRequest) => void;
  onClaimGlobalReward: (tasks: ICollectGlobalRewardRequest) => void;
  onClose: () => void;
  scale?: number;
  itemsAtlasJSON: Record<string, any>;
  itemsAtlasIMG: string;
  iconAtlasJSON?: Record<string, any>;
  iconAtlasIMG?: string;
  globalRewardClaimed?: boolean;
}

export const DailyTasks: React.FC<IDailyTasksProps> = ({
  tasks,
  onClaimReward,
  onClaimGlobalReward,
  onClose,
  scale = 1,
  itemsAtlasJSON,
  itemsAtlasIMG,
  iconAtlasJSON,
  iconAtlasIMG,
  globalRewardClaimed = false,
}): JSX.Element | null => {
  const [localTasks] = React.useState(tasks);
  const size = useResponsiveSize(scale);
  const [claimedTasks, setClaimedTasks] = useState<string[]>([]);
  const [globalRewardClaimedLocal, setGlobalRewardClaimedLocal] = useState(
    false
  );

  const handleClaimReward = (taskKey: string, taskType: TaskType) => {
    onClaimReward({
      taskKey,
      type: taskType,
    });
    setClaimedTasks(prev => [...prev, taskKey]);
  };

  const handleClaimGlobalRewards = (tasks: ICollectGlobalRewardRequest) => {
    onClaimGlobalReward(tasks);
    setGlobalRewardClaimedLocal(true);
  };

  const isTaskRewardClaimed = (taskKey: string): boolean => {
    return claimedTasks.includes(taskKey);
  };

  if (!size) return null;

  return (
    <TasksContainer
      type={RPGUIContainerTypes.Framed}
      onCloseButton={onClose}
      cancelDrag=".tasks-container"
      scale={scale}
      width={size.width}
      height={size.height}
    >
      <TaskTitle>Daily Tasks</TaskTitle>
      <Container>
        <TasksList className="tasks-container">
          <GlobalDailyProgress
            tasks={localTasks}
            onClaimAllRewards={handleClaimGlobalRewards}
            globalRewardClaimed={
              globalRewardClaimed || globalRewardClaimedLocal
            }
          />
          {localTasks.map(task => (
            <DailyTaskItem
              key={task.key}
              task={task}
              spriteKey={getTaskIcon(task.type, task.difficulty)}
              onClaimReward={handleClaimReward}
              itemsAtlasJSON={itemsAtlasJSON}
              itemsAtlasIMG={itemsAtlasIMG}
              iconAtlasJSON={iconAtlasJSON}
              iconAtlasIMG={iconAtlasIMG}
              isRewardClaimed={task.claimed || isTaskRewardClaimed(task.key)}
            />
          ))}
        </TasksList>
      </Container>
    </TasksContainer>
  );
};

const TasksContainer = styled(DraggableContainer)`
  min-width: 450px;
  max-width: 550px;
  margin: 0 auto;

  .rpgui-container-title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .rpgui-container {
    padding: 0 !important;
    overflow: hidden !important;
    background-color: rgba(30, 30, 30, 0.9) !important;
  }
`;

const Container = styled.div`
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0.125rem;
  overflow-y: auto;

  box-sizing: border-box;

  @media (min-width: 320px) {
    padding: 0.25rem;
  }

  @media (min-width: 360px) {
    padding: 0.5rem;
  }

  @media (min-width: 480px) {
    padding: 0.75rem;
  }
`;

const TasksList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
  max-height: 70vh;
`;

const TaskTitle = styled.h2`
  color: ${uiColors.yellow} !important;
  text-align: center;
  padding-right: 30px !important;
  font-size: 1.4rem !important;
  width: 100%;
`;


