import { IItem } from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';

interface IProps {
  item: IItem;
}

export const gemColors: { [key: string]: string } = {
  'emerald-gem': '#50C878', // Emerald green
  'topaz-radiance': '#FFC87C', // Topaz yellow
  'sapphire-gem': '#0F52BA', // Sapphire blue
  'ruby-gem': '#E0115F', // Ruby red
  'misty-quartz-gem': '#D9D9F3', // Misty Quartz purple
  'coral-reef-gem': '#FF7F50', // Coral reef orange
  'jasper-gem': '#D73B3E', // Jasper red
  'earthstone-gem': '#8B4513', // Earthstone brown
  'obsidian-gem': '#0B0C0E', // Obsidian black
  'amethyst-gem': '#9966CC', // Amethyst purple
};

const defaultColor = '#FFFFFF'; // Default color (white)

export const onRenderGems = (item: IItem) => {
  const gemQty = item.attachedGems?.length || 0;

  if (gemQty > 0) {
    return <ItemSlotQty item={item} />;
  }
  return undefined;
};

export const ItemSlotQty = ({ item }: IProps): JSX.Element => {
  const itemId = item._id;

  return (
    <ItemQtyContainer key={`qty-${itemId}`} className="item-slot-qty">
      {item.attachedGems?.map((gem, index) => (
        <Gem
          key={`${itemId}-gem-${index}`}
          color={gemColors[gem.key] || defaultColor}
        />
      ))}
    </ItemQtyContainer>
  );
};

const ItemQtyContainer = styled.div`
  position: relative;
  width: 85%;
  height: 16px;
  top: 28px;
  left: 0px;
  pointer-events: none;
  transform: scale(0.8);
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align gems to the left */
  opacity: 0.8;
`;

const Gem = styled.div<{ color: string }>`
  width: 8px;
  height: 8px;
  background: ${({ color }) =>
    `radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.8), transparent 30%), 
     linear-gradient(45deg, ${color}, ${color} 50%, rgba(255, 255, 255, 0.2))`};
  border: 1px solid black;
  transform: rotate(45deg);
  margin: 0 2px;
  box-shadow: 0 0 5px ${({ color }) => color}; /* Glow effect */
  transition: transform 0.2s, box-shadow 0.2s; /* Smooth transition for hover effect */

  &:hover {
    transform: rotate(45deg) scale(1.2);
    box-shadow: 0 0 10px ${({ color }) => color}; /* Enhanced glow on hover */
  }
`;

export default ItemSlotQty;
