import {
  ICharacterDailyTask,
  isMobileOrTablet,
  TaskStatus,
  TaskType,
} from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { Button, ButtonTypes } from '../Button';
import { Ellipsis } from '../shared/Ellipsis';
import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
import { TaskProgress } from './TaskProgress';
import { formatTaskKey } from './utils/dailyTasks.utils';

interface IDailyTaskItemProps {
  task: ICharacterDailyTask;
  spriteKey: string;
  onClaimReward: (taskKey: string, taskType: TaskType) => void;
  itemsAtlasJSON: Record<string, any>;
  itemsAtlasIMG: string;
  iconAtlasJSON?: Record<string, any>;
  iconAtlasIMG?: string;
  isRewardClaimed: boolean;
}

export const DailyTaskItem: React.FC<IDailyTaskItemProps> = ({
  task,
  spriteKey,
  onClaimReward,
  itemsAtlasJSON,
  itemsAtlasIMG,
  iconAtlasJSON,
  iconAtlasIMG,
  isRewardClaimed,
}) => {
  const isMobile = isMobileOrTablet();

  const isCompleted = task.status === TaskStatus.Completed;
  const isClaimed = task.claimed || isRewardClaimed;

  const handleClaimReward = () => {
    onClaimReward(task.key, task.type);
  };

  return (
    <TaskContainer>
      <TaskHeader>
        {iconAtlasJSON && iconAtlasIMG && (
          <NonInteractiveWrapper>
            <SpriteFromAtlas
              atlasJSON={iconAtlasJSON}
              atlasIMG={iconAtlasIMG}
              spriteKey={spriteKey}
              width={12}
              height={12}
              imgScale={2.75}
            />
          </NonInteractiveWrapper>
        )}
        <TaskContent>
          <TaskTitle>
            <Ellipsis maxWidth="100%" maxLines={isMobile ? 3 : 2}>
              {task.name ?? formatTaskKey(task.key)}
            </Ellipsis>
          </TaskTitle>
          <TaskDescription>
            <Ellipsis maxWidth="100%" maxLines={isMobile ? 5 : 3}>
              {task.description}
            </Ellipsis>
          </TaskDescription>
        </TaskContent>
      </TaskHeader>

      <TaskProgress
        task={task}
        itemsAtlasJSON={itemsAtlasJSON}
        itemsAtlasIMG={itemsAtlasIMG}
      />

      {isCompleted && !isClaimed && (
        <CollectWrapper>
          <Button
            buttonType={ButtonTypes.RPGUIButton}
            onPointerDown={handleClaimReward}
          >
            Collect Reward
          </Button>
        </CollectWrapper>
      )}

      {isClaimed && <ClaimedText>Reward Claimed</ClaimedText>}
    </TaskContainer>
  );
};

const TaskContainer = styled.div`
  background: rgba(0, 0, 0, 0.5) !important;
  border: 2px solid ${uiColors.darkGray} !important;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
`;

const TaskHeader = styled.div`
  display: flex;
  width: 100%;
  justify-content: center;
  border-bottom: 1.3px solid ${uiColors.darkGray};
`;

const NonInteractiveWrapper = styled.div`
  pointer-events: none;
  user-select: none;
  margin-top: 5px;
`;

const TaskContent = styled.div`
  display: flex;
  flex-direction: column;
  flex: 1;
`;

const TaskTitle = styled.h3`
  && {
    color: ${uiColors.yellow};
    padding-left: 10px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    flex: 1;
    display: block;

    span {
      color: inherit;
    }
  }
`;

const TaskDescription = styled.h3`
  font-size: 0.6rem !important;
  text-decoration: none !important;
  a
`;

const ClaimedText = styled.span`
  color: ${uiColors.green};
  font-size: 0.9rem;
  text-align: center;
  font-weight: bold;
`;

const CollectWrapper = styled.div`
  && {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 5px 0 !important;
  }
`;
