import React from 'react';
import { IPosition } from '../../types/eventTypes';
import { DraggableContainer } from '../DraggableContainer';
import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';

interface IProps {
  children: React.ReactNode;
  title: string;
  onClose?: () => void;
  onPositionChange?: (position: IPosition) => void;
  onPositionChangeEnd?: (position: IPosition) => void;
  onPositionChangeStart?: (position: IPosition) => void;
  onOutsideClick?: () => void;
  initialPosition?: IPosition;
  scale?: number;
  width?: string;
  isFullScreen?: boolean;
  opacity?: number;
}

export const SlotsContainer: React.FC<IProps> = ({
  children,
  title,
  onClose,
  onPositionChange,
  onPositionChangeEnd,
  onPositionChangeStart,
  onOutsideClick,
  initialPosition,
  scale,
  width,
  isFullScreen,
  opacity,
}) => {
  return (
    <DraggableContainer
      isFullScreen={isFullScreen}
      opacity={opacity}
      title={title}
      type={RPGUIContainerTypes.Framed}
      onCloseButton={() => {
        if (onClose) {
          onClose();
        }
      }}
      width={width ?? '415px'}
      cancelDrag=".item-container-body, #shortcuts_list"
      onPositionChange={({ x, y }) => {
        if (onPositionChange) {
          onPositionChange({ x, y });
        }
      }}
      onPositionChangeEnd={({ x, y }) => {
        if (onPositionChangeEnd) {
          onPositionChangeEnd({ x, y });
        }
      }}
      onPositionChangeStart={({ x, y }) => {
        if (onPositionChangeStart) {
          onPositionChangeStart({ x, y });
        }
      }}
      onOutsideClick={onOutsideClick}
      initialPosition={initialPosition}
      scale={scale}
    >
      {children}
    </DraggableContainer>
  );
};
