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 { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
import { SpellInfoWrapper } from './cards/SpellInfoWrapper';

export interface ISpellProps {
  atlasJSON: any;
  atlasIMG: any;
  charMana: number;
  charMagicLevel: number;
  onPointerUp?: (spellKey: string) => void;
  isSettingShortcut?: boolean;
  spellKey: string;
  spell: ISpell;
  activeCooldown?: number;
}

export const Spell: React.FC<ISpellProps> = ({
  atlasIMG,
  atlasJSON,
  spellKey,
  charMana,
  charMagicLevel,
  onPointerUp,
  isSettingShortcut,
  spell,
  activeCooldown,
}) => {
  const {
    manaCost,
    minMagicLevelRequired,
    magicWords,
    name,
    description,
  } = spell;
  const disabled = isSettingShortcut
    ? charMagicLevel < minMagicLevelRequired
    : manaCost > charMana || charMagicLevel < minMagicLevelRequired;

  const CONTAINER_STYLE = { width: '32px', height: '32px' };
  const IMAGE_SCALE = 2;

  return (
    <SpellInfoWrapper spell={spell}>
      <Container
        onPointerUp={onPointerUp?.bind(null, spellKey)}
        isSettingShortcut={isSettingShortcut && !disabled}
        className="spell"
      >
        {disabled && (
          <Overlay>
            {charMagicLevel < minMagicLevelRequired
              ? 'Low magic level'
              : manaCost > charMana && 'No mana'}
          </Overlay>
        )}
        <SpellImage>
          {activeCooldown && activeCooldown > 0 ? (
            <span className="cooldown">
              {activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)}
            </span>
          ) : null}
          <SpriteFromAtlas
            atlasIMG={atlasIMG}
            atlasJSON={atlasJSON}
            spriteKey={spell.texturePath ?? ''}
            imgScale={IMAGE_SCALE}
            containerStyle={CONTAINER_STYLE}
            centered
          />
        </SpellImage>
        <Info>
          <Title>
            <span>{name}</span>
            <span className="spell">({magicWords})</span>
          </Title>
          <Description>{description}</Description>
        </Info>

        <Divider />
        <Cost>
          <span>Mana cost:</span>
          <span className="mana">{manaCost}</span>
        </Cost>
      </Container>
    </SpellInfoWrapper>
  );
};

const Container = styled.button<{ isSettingShortcut?: boolean }>`
  display: block;
  background: none;
  border: 2px solid transparent;
  border-radius: 1rem;
  width: 100%;
  display: flex;

  gap: 1rem;
  align-items: center;
  padding: 0 1rem;
  text-align: left;
  position: relative;

  animation: ${({ isSettingShortcut }) =>
    isSettingShortcut ? 'border-color-change 1s infinite' : 'none'};

  @keyframes border-color-change {
    0% {
      border-color: ${uiColors.yellow};
    }
    50% {
      border-color: transparent;
    }
    100% {
      border-color: ${uiColors.yellow};
    }
  }

  &:hover,
  &:focus {
    background-color: ${uiColors.darkGray};
  }

  &:active {
    background: none;
  }
`;

const SpellImage = styled.div`
  width: 4rem;
  height: 4rem;
  font-size: ${uiFonts.size.xLarge};
  font-weight: bold;
  background-color: ${uiColors.darkGray};
  color: ${uiColors.lightGray};
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;

  .cooldown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0 0 0 / 20%);
    color: ${uiColors.darkYellow};
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
  }
`;

const Info = styled.span`
  width: 0;
  flex: 1;

  @media (orientation: portrait) {
    display: none;
  }
`;
const Title = styled.p`
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 5px;
  margin: 0;

  span {
    font-size: ${uiFonts.size.medium} !important;
    font-weight: bold !important;
    color: ${uiColors.yellow} !important;
    margin-right: 0.5rem;
  }

  .spell {
    font-size: ${uiFonts.size.small} !important;
    font-weight: normal !important;
    color: ${uiColors.lightGray} !important;
  }
`;

const Description = styled.div`
  font-size: ${uiFonts.size.small} !important;
  line-height: 1.1 !important;
`;

const Divider = styled.div`
  width: 1px;
  height: 100%;
  margin: 0 1rem;
  background-color: ${uiColors.lightGray};
`;

const Cost = styled.p`
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.5rem;

  div {
    z-index: 1;
  }

  .mana {
    position: relative;
    font-size: ${uiFonts.size.medium};
    font-weight: bold;
    z-index: 1;

    &::after {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      background-color: ${uiColors.blue};
      width: 100%;
      height: 100%;
      border-radius: 50%;
      transform: scale(1.8);
      filter: blur(10px);
      z-index: -1;
    }
  }
`;

const Overlay = styled.p`
  margin: 0 !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: ${uiColors.yellow};
  font-size: ${uiFonts.size.large} !important;
  font-weight: bold;
  z-index: 10;
  background-color: rgba(0 0 0 / 0.2);
`;
