import { ISpell } from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../../constants/uiColors';
import { uiFonts } from '../../../constants/uiFonts';
import { formatSpellCastingType } from '../../../libs/CastingTypeHelper';

interface ISpellInfoProps {
  spell: ISpell;
}

export const SpellInfo: React.FC<ISpellInfoProps> = ({ spell }) => {
  const {
    magicWords,
    name,
    manaCost,
    requiredItem,
    description,
    castingType,
    cooldown,
    maxDistanceGrid,
  } = spell;
  return (
    <Container>
      <Header>
        <div>
          <Title>{name}</Title>
          <Type>{magicWords}</Type>
        </div>
      </Header>
      <Statistic>
        <div className="label">Casting Type:</div>
        <div className="value">{formatSpellCastingType(castingType)}</div>
      </Statistic>
      <Statistic>
        <div className="label">Magic words:</div>
        <div className="value">{magicWords}</div>
      </Statistic>
      <Statistic>
        <div className="label">Mana cost:</div>
        <div className="value">{manaCost}</div>
      </Statistic>
      <Statistic>
        <div className="label">Cooldown:</div>
        <div className="value">{cooldown}</div>
      </Statistic>
      {maxDistanceGrid && (
        <Statistic>
          <div className="label">Max Distance Grid:</div>
          <div className="value">{maxDistanceGrid}</div>
        </Statistic>
      )}
      <Statistic>
        {requiredItem && (
          <>
            <div className="label">Required Item:</div>
            <div className="value">{requiredItem}</div>
          </>
        )}
      </Statistic>
      <Description>{description}</Description>
    </Container>
  );
};

const Container = styled.div`
  color: white;
  background-color: #222;
  border-radius: 5px;
  padding: 0.5rem;
  font-size: ${uiFonts.size.small};
  border: 3px solid ${uiColors.lightGray};
  height: max-content;
  width: 30rem;

  @media (max-width: 580px) {
    width: 80vw;
  }
`;

const Title = styled.div`
  font-size: ${uiFonts.size.medium};
  font-weight: bold;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  margin: 0;
`;

const Type = styled.div`
  font-size: ${uiFonts.size.small};
  margin-top: 0.2rem;
  color: ${uiColors.lightGray};
`;

const Description = styled.div`
  margin-top: 1.5rem;
  font-size: ${uiFonts.size.small};
  color: ${uiColors.lightGray};
  font-style: italic;
`;

const Header = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
`;

const Statistic = styled.div`
  margin-bottom: 0.4rem;
  width: max-content;

  .label {
    display: inline-block;
    margin-right: 0.5rem;
    color: inherit;
  }

  .value {
    display: inline-block;
    color: inherit;
  }

  &.better,
  .better {
    color: ${uiColors.lightGreen};
  }

  &.worse,
  .worse {
    color: ${uiColors.cardinal};
  }
`;
