import { IEquipmentSet, IItem, IMarketplaceItem } from '@rpg-engine/shared';
import React, { useState } from 'react';
import styled from 'styled-components';
import { Button, ButtonTypes } from '../Button';
import { DraggableContainer } from '../DraggableContainer';
import { Pager } from '../Pager';
import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
import { BuyPanel } from './BuyPanel';
import { ManagmentPanel } from './ManagmentPanel';

export interface IMarketPlaceProps {
  items: IMarketplaceItem[];
  atlasJSON: any;
  atlasIMG: any;
  onClose: () => void;
  onChangeType: (value: string) => void;
  onChangeRarity: (value: string) => void;
  onChangeOrder: (value: string) => void;
  onChangeNameInput: (value: string) => void;
  onChangeMainLevelInput: (
    value: [number | undefined, number | undefined]
  ) => void;
  onChangeSecondaryLevelInput: (
    value: [number | undefined, number | undefined]
  ) => void;
  onChangePriceInput: (value: [number | undefined, number | undefined]) => void;
  scale?: number;
  equipmentSet?: IEquipmentSet | null;
  onMarketPlaceItemBuy?: (marketPlaceItemId: string) => void;
  onMarketPlaceItemRemove?: (marketPlaceItemId: string) => void;
  availableGold: number;
  selectedItemToSell: IItem | null;
  onSelectedItemToSellRemove: (item: IItem) => void;
  onYourPanelToggle: (yourPanel: boolean) => void;
  onAddItemToMarketplace: (item: IItem, price: number) => void;
  characterId: string;
  enableHotkeys?: () => void;
  disableHotkeys?: () => void;
  onMoneyWithdraw: () => void;
  totalItems: number;
  currentPage: number;
  itemsPerPage: number;
  onPageChange: (page: number) => void;
}

export const Marketplace: React.FC<IMarketPlaceProps> = props => {
  const { onClose, scale, onYourPanelToggle } = props;

  const [isYourPanel, setIsYourPanel] = useState(false);

  return (
    <DraggableContainer
      type={RPGUIContainerTypes.Framed}
      onCloseButton={() => {
        if (onClose) onClose();
      }}
      width="800px"
      cancelDrag="#MarketContainer, .rpgui-dropdown-imp, input, .empty-slot, button"
      scale={scale}
    >
      {isYourPanel && (
        <>
          <ManagmentPanel {...props} />

          <PagerContainer>
            <Button
              buttonType={ButtonTypes.RPGUIButton}
              onPointerDown={() => {
                onYourPanelToggle(false);
                setIsYourPanel(false);
              }}
            >
              Go to marketplace
            </Button>
            <Pager {...props} />
          </PagerContainer>
        </>
      )}
      {!isYourPanel && (
        <>
          <BuyPanel {...props} />

          <PagerContainer>
            <Button
              buttonType={ButtonTypes.RPGUIButton}
              onPointerDown={() => {
                onYourPanelToggle(true);
                setIsYourPanel(true);
              }}
            >
              Go to your panel
            </Button>
            <Pager {...props} />
          </PagerContainer>
        </>
      )}
    </DraggableContainer>
  );
};

const PagerContainer = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 30px);
`;
