import {
  IEquipmentSet,
  ITradeRequestItem,
  ITradeResponseItem,
  TradeTransactionType,
} from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { Button, ButtonTypes } from '../Button';
import { DraggableContainer } from '../DraggableContainer';
import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
import { TradingItemRow } from './TradingItemRow';
import { useTradingGold } from './useTradingGold';

export interface ITradingMenu {
  traderItems: ITradeResponseItem[];
  onClose: () => void;
  onConfirm: (items: ITradeRequestItem[]) => void;
  type: TradeTransactionType;
  atlasJSON: any;
  atlasIMG: any;
  characterAvailableGold: number;
  equipmentSet?: IEquipmentSet | null;
  scale?: number;
}

export const TradingMenu: React.FC<ITradingMenu> = ({
  traderItems,
  onClose,
  type,
  atlasJSON,
  atlasIMG,
  characterAvailableGold,
  onConfirm,
  equipmentSet,
  scale,
}) => {
  const {
    sum,
    qtyMap,
    isBuy,
    hasGoldForSale,
    getFinalGold,
    getTradeItems,
    updateQuantity,
  } = useTradingGold({ characterAvailableGold, type, traderItems });

  return (
    <DraggableContainer
      type={RPGUIContainerTypes.Framed}
      onCloseButton={onClose}
      width="500px"
      cancelDrag="#TraderContainer"
      scale={scale}
    >
      <Container>
        <Title>{type.charAt(0).toUpperCase() + type.slice(1)} Menu</Title>
        <hr className="golden" />

        <ScrollWrapper id="TraderContainer">
          {traderItems.map((tradeItem, index) => (
            <TradingItemRow
              key={`${tradeItem.key}_${index}`}
              atlasIMG={atlasIMG}
              atlasJSON={atlasJSON}
              onQuantityChange={updateQuantity}
              traderItem={tradeItem}
              selectedQty={qtyMap.get(tradeItem.key) ?? 0}
              equipmentSet={equipmentSet}
              scale={scale}
              isBuy={isBuy()}
            />
          ))}
        </ScrollWrapper>

        <InfoSection>
          <GoldInfo>
            <p>Available Gold:</p>
            <p>${characterAvailableGold.toFixed(2)}</p>
          </GoldInfo>
          <GoldInfo>
            <p>Total:</p>
            <p>${sum}</p>
          </GoldInfo>
          {!hasGoldForSale() ? (
            <AlertText>Sorry, not enough money.</AlertText>
          ) : (
            <GoldInfo>
              <p>Final Gold:</p>
              <p>${getFinalGold().toFixed(2)}</p>
            </GoldInfo>
          )}
        </InfoSection>

        <ButtonWrapper>
          <Button
            buttonType={ButtonTypes.RPGUIButton}
            disabled={!hasGoldForSale()}
            onPointerDown={() => onConfirm(getTradeItems())}
          >
            Confirm
          </Button>
          <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={onClose}>
            Cancel
          </Button>
        </ButtonWrapper>
      </Container>
    </DraggableContainer>
  );
};

const Container = styled.div`
  width: 100%;
`;

const Title = styled.h1`
  font-size: 0.7rem !important;
  color: yellow !important;
  text-align: center;
`;

const ScrollWrapper = styled.div`
  overflow-y: scroll;
  height: 250px;
  width: 100%;
  margin-top: 0.3rem;
  overflow-x: hidden;
  padding: 0 0.3rem;
`;

const InfoSection = styled.div`
  margin-top: 0.3rem;
  padding: 0 0.5rem;
`;

const GoldInfo = styled.div`
  display: flex;
  justify-content: space-between;
  height: 16px;
  width: 100%;
  margin: 0.5rem 0;
  p {
    color: yellow !important;
    margin: 0;
    font-size: 0.6rem;
  }
`;

const AlertText = styled.p`
  color: red !important;
  text-align: center;
  margin: 0.3rem 0;
  font-size: 0.5rem;
`;

const ButtonWrapper = styled.div`
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 1rem;
`;
