import {
  getItemTextureKeyPath,
  IEquipmentSet,
  IItem,
} from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { uiFonts } from '../../constants/uiFonts';
import { Button, ButtonTypes } from '../Button';
import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
import { onRenderGems } from '../Item/Inventory/ItemGem';
import { rarityColor } from '../Item/Inventory/ItemSlotRarity';
import { Ellipsis } from '../shared/Ellipsis';
import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';

export interface IMarketPlaceRowsPropos {
  atlasJSON: any;
  atlasIMG: any;
  item: IItem;
  itemPrice: number;
  equipmentSet?: IEquipmentSet | null;
  scale?: number;
  onMarketPlaceItemBuy?: () => void;
  onMarketPlaceItemRemove?: () => void;
  disabled?: boolean;
}

export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
  atlasJSON,
  atlasIMG,
  item,
  itemPrice,
  equipmentSet,
  scale,
  onMarketPlaceItemBuy,
  onMarketPlaceItemRemove,
  disabled,
}) => {
  const renderGems = (item: IItem) => {
    return item.attachedGems && onRenderGems(item);
  };

  return (
    <MarketplaceWrapper>
      <ItemIconContainer>
        <SpriteContainer>
          <ItemInfoWrapper
            item={item}
            atlasIMG={atlasIMG}
            atlasJSON={atlasJSON}
            equipmentSet={equipmentSet}
            scale={scale}
          >
            <GemContainer>{renderGems(item)}</GemContainer>
            <RarityContainer item={item}>
              <SpriteFromAtlas
                atlasIMG={atlasIMG}
                atlasJSON={atlasJSON}
                spriteKey={getItemTextureKeyPath(
                  {
                    key: item.key,
                    stackQty: item.stackQty || 1,
                    texturePath: item.texturePath,
                    isStackable: item.isStackable,
                  },
                  atlasJSON
                )}
                imgScale={2}
                imgClassname="sprite-from-atlas-img--item"
              />
            </RarityContainer>

            <QuantityContainer>
              {item.stackQty &&
                item.stackQty > 1 &&
                `x${Math.round(item.stackQty * 10) / 10}`}
            </QuantityContainer>
          </ItemInfoWrapper>
        </SpriteContainer>
        <PriceValue>
          <p>
            <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
              {item.name}
            </Ellipsis>
          </p>
        </PriceValue>
      </ItemIconContainer>

      <Flex>
        <ItemIconContainer>
          <GoldContainer>
            <SpriteFromAtlas
              atlasIMG={atlasIMG}
              atlasJSON={atlasJSON}
              spriteKey="others/gold-coin-qty-5.png"
              imgScale={2}
            />
          </GoldContainer>
          <PriceValue>
            <p>
              <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
                ${itemPrice}
              </Ellipsis>
            </p>
          </PriceValue>
        </ItemIconContainer>
        <ButtonContainer>
          <Button
            buttonType={ButtonTypes.RPGUIButton}
            disabled={disabled}
            onPointerDown={() => {
              if (disabled) return;

              onMarketPlaceItemBuy?.();
              onMarketPlaceItemRemove?.();
            }}
          >
            {onMarketPlaceItemBuy ? 'Buy' : 'Remove'}
          </Button>
        </ButtonContainer>
      </Flex>
    </MarketplaceWrapper>
  );
};

const MarketplaceWrapper = styled.div`
  margin: auto;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;

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

  p {
    font-size: 0.8rem;
  }
`;

const QuantityContainer = styled.p`
  position: absolute;
  display: block;
  top: 15px;
  left: 25px;
  font-size: ${uiFonts.size.xsmall} !important;
`;

const GemContainer = styled.p`
  position: absolute;
  display: block;
  top: -5px;
  left: -10px;
  font-size: ${uiFonts.size.xsmall} !important;
`;

const Flex = styled.div`
  display: flex;
  gap: 24px;
`;

const ItemIconContainer = styled.div`
  display: flex;
  justify-content: flex-start;
  align-items: center;
`;

const GoldContainer = styled.div`
  position: relative;
  top: -0.5rem;
  left: 0.5rem;
`;
const SpriteContainer = styled.div`
  position: relative;
  left: 0.5rem;
`;

const PriceValue = styled.div`
  margin-left: 40px;
`;

const ButtonContainer = styled.div`
  margin: auto;
`;

const RarityContainer = styled.div<{ item: IItem }>`
  border-color: ${({ item }) => rarityColor(item)};
  box-shadow: ${({ item }) => `0 0 5px 8px ${rarityColor(item)}`} inset,
    ${({ item }) => `0 0 8px 6px ${rarityColor(item)}`};
  width: 32px;
  height: 32px;
`;
