import {
  getItemTextureKeyPath,
  IItem,
  IRawSpell,
  IShortcut,
  ShortcutType,
} from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';

type ShortcutsSetterProps = {
  setSettingShortcutIndex: (index: number) => void;
  settingShortcutIndex: number;
  shortcuts: IShortcut[];
  removeShortcut: (index: number) => void;
  atlasJSON: any;
  atlasIMG: any;
};

export const ShortcutsSetter: React.FC<ShortcutsSetterProps> = ({
  setSettingShortcutIndex,
  settingShortcutIndex,
  shortcuts,
  removeShortcut,
  atlasJSON,
  atlasIMG,
}) => {
  const getContent = (index: number) => {
    if (shortcuts[index]?.type === ShortcutType.Item) {
      const payload = shortcuts[index]?.payload as IItem | undefined;

      if (!payload) return null;

      return (
        <SpriteFromAtlas
          atlasIMG={atlasIMG}
          atlasJSON={atlasJSON}
          spriteKey={getItemTextureKeyPath(
            {
              key: payload.texturePath,
              texturePath: payload.texturePath,
              stackQty: payload.stackQty || 1,
              isStackable: payload.isStackable,
            },
            atlasJSON
          )}
          width={32}
          height={32}
          imgScale={1.2}
          imgStyle={{ left: '3px' }}
        />
      );
    }
    const IMAGE_SIZE = 32;
    const IMAGE_SCALE = 1;

    const shortcut = shortcuts[index];

    if (shortcut?.type === ShortcutType.Spell && shortcut.payload) {
      const payload = shortcut.payload as IRawSpell; // TypeScript type assertion

      return (
        <SpriteFromAtlas
          atlasIMG={payload.atlasIMG}
          atlasJSON={payload.atlasJSON}
          spriteKey={payload.texturePath ?? ''}
          width={IMAGE_SIZE}
          height={IMAGE_SIZE}
          imgScale={IMAGE_SCALE}
          centered
          borderRadius="50%"
        />
      );
    }

    return null;
  };

  return (
    <Container>
      <p>Shortcuts:</p>
      <List id="shortcuts_list">
        {Array.from({ length: 12 }).map((_, i) => (
          <Shortcut
            key={i}
            onPointerDown={() => {
              if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);

              removeShortcut(i);
              if (
                settingShortcutIndex === -1 &&
                (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)
              )
                setSettingShortcutIndex(i);
            }}
            disabled={settingShortcutIndex !== -1 && settingShortcutIndex !== i}
            isBeingSet={settingShortcutIndex === i}
            id={`shortcutSetter_${i}`}
          >
            {getContent(i)}
          </Shortcut>
        ))}
      </List>
    </Container>
  );
};

const Container = styled.div`
  p {
    margin: 0;
    margin-left: 0.5rem;
    font-size: 10px;
  }

  width: 100%;
`;

const Shortcut = styled.button<{ isBeingSet?: boolean }>`
  width: 2.4rem;
  height: 2.4rem;

  background-color: ${uiColors.lightGray};
  border: 2px solid
    ${({ isBeingSet }) => (isBeingSet ? uiColors.yellow : uiColors.darkGray)};
  border-radius: 50%;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    margin-top: 4px;
  }

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

  &:active {
    background-color: ${uiColors.gray};
  }

  &:disabled {
    opacity: 0.5;
  }
`;

const List = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-sizing: border-box;
  margin: 0 !important;

  flex-wrap: wrap;

  padding: 0.3rem;

  padding-bottom: 1rem;
`;
