import { ITaskReward, RewardType } from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { Ellipsis } from '../shared/Ellipsis';
import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
import { formatTaskKey } from './utils/dailyTasks.utils';

interface IDailyRewardsTooltipProps {
  rewards: ITaskReward[];
  itemsAtlasJSON: Record<string, any>;
  itemsAtlasIMG: string;
  iconAtlasJSON?: Record<string, any>;
  iconAtlasIMG?: string;
}

export const DailyRewardsTooltip: React.FC<IDailyRewardsTooltipProps> = ({
  rewards,
  itemsAtlasJSON,
  itemsAtlasIMG,
}) => {
  const [isExpanded, setIsExpanded] = React.useState(true);

  const sortedRewards = React.useMemo(() => {
    if (!rewards) return [];

    const REWARD_PRIORITY = {
      [RewardType.Item]: 1,
      [RewardType.Gold]: 2,
      [RewardType.Experience]: 3,
    } as const;

    const getPriority = (type: RewardType) =>
      REWARD_PRIORITY[type] ?? Number.MAX_SAFE_INTEGER;

    return [...rewards].sort((a, b) => {
      return getPriority(a.type) - getPriority(b.type);
    });
  }, [rewards]);

  const toggleExpand = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <TooltipContainer>
      <CollapsibleHeader onClick={toggleExpand}>
        <HeaderText>Rewards?</HeaderText>
        <ExpandIcon>{isExpanded ? '▼' : '▶'}</ExpandIcon>
      </CollapsibleHeader>

      {isExpanded && (
        <CollapsibleContent>
          <RewardsList>
            {sortedRewards.map((reward: ITaskReward, index: number) => (
              <RewardItem key={index}>
                <SpriteFromAtlas
                  atlasJSON={itemsAtlasJSON}
                  atlasIMG={itemsAtlasIMG}
                  spriteKey={reward.texturePath ?? 'check.png'}
                  width={24}
                  height={24}
                  imgScale={1.75}
                />
                <ItemContent>
                  <RewardLabel>
                    <Ellipsis maxWidth="100%" maxLines={2}>
                      {formatTaskKey(reward.key ?? reward.type)}:
                    </Ellipsis>
                  </RewardLabel>
                </ItemContent>
                <RewardValue>x{reward.quantity}</RewardValue>
              </RewardItem>
            ))}
          </RewardsList>
        </CollapsibleContent>
      )}
    </TooltipContainer>
  );
};

const TooltipContainer = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
`;

const RewardsList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
`;

const CollapsibleHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid ${uiColors.darkGray};
  width: 100%;
`;

const HeaderText = styled.span`
  color: ${uiColors.yellow} !important;
`;

const ExpandIcon = styled.span`
  color: ${uiColors.yellow};
  font-size: 0.8rem;
  margin-left: 8px;
`;

const CollapsibleContent = styled.div`
  display: block;
  padding-top: 8px;
  width: 100%;
`;

const RewardItem = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 200px;
`;

const ItemContent = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
`;

const RewardLabel = styled.span`
  color: ${uiColors.yellow};
  font-size: 0.9rem;
  line-height: 1.2;
  padding-top: 15px;
  display: inline-flex;
  align-items: center;
`;

const RewardValue = styled.span`
  color: ${uiColors.yellow};
  font-size: 0.9rem;
  margin-left: auto;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  min-width: 50px;
  text-align: right;
`;
