import { IInformationCenterItem } from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../../../constants/uiColors';
import BaseTooltip, {
  Section,
  SectionTitle,
  StatItem,
  StatsContainer,
  TooltipTitle,
} from '../../../shared/BaseTooltip';

interface IItemTooltipProps {
  item: IInformationCenterItem;
}

const ItemHeader = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
`;

const Description = styled.div`
  color: ${uiColors.white};
  font-size: 0.5rem;
  line-height: 1.4;
  margin-top: 8px;
  opacity: 0.8;
`;

const RarityText = styled.span<{ rarity: string }>`
  color: ${props => {
    switch (props.rarity.toLowerCase()) {
      case 'legendary':
        return '#ff8c00';
      case 'rare':
        return '#0070dd';
      case 'uncommon':
        return '#1eff00';
      default:
        return '#ffffff';
    }
  }};
  font-size: 0.5rem;
`;

export const InformationCenterItemTooltip: React.FC<IItemTooltipProps> = ({
  item,
}) => {
  return (
    <BaseTooltip>
      <ItemHeader>
        <TooltipTitle>{item.name}</TooltipTitle>
      </ItemHeader>

      <Description>{item.description}</Description>

      <Section>
        <SectionTitle>Details</SectionTitle>
        <StatsContainer>
          <StatItem>Type: {item.type}</StatItem>
          <StatItem>Weight: {item.weight}</StatItem>
          {item.attack !== undefined && (
            <StatItem>Attack: {item.attack}</StatItem>
          )}
          {item.defense !== undefined && (
            <StatItem>Defense: {item.defense}</StatItem>
          )}
          {item.tier !== undefined && <StatItem>Tier: {item.tier}</StatItem>}
          {item.rangeType && <StatItem>Range: {item.rangeType}</StatItem>}
        </StatsContainer>
      </Section>

      <Section>
        <SectionTitle>Market</SectionTitle>
        <StatsContainer>
          <StatItem>Price: {item.basePrice}</StatItem>
          {item.rarity && (
            <StatItem>
              Rarity:{' '}
              <RarityText rarity={item.rarity}>{item.rarity}</RarityText>
            </StatItem>
          )}
        </StatsContainer>
      </Section>
    </BaseTooltip>
  );
};
