import { IEquipmentSet, IItem } from '@rpg-engine/shared';
import React, { useState } from 'react';
import { ItemTooltip } from './ItemTooltip';
import { MobileItemTooltip } from './MobileItemTooltip';

interface IItemInfoWrapperProps {
  item: IItem;
  children: React.ReactNode;
  atlasIMG: any;
  atlasJSON: any;
  equipmentSet?: IEquipmentSet | null;
  scale?: number;
}

export const ItemInfoWrapper: React.FC<IItemInfoWrapperProps> = ({
  children,
  atlasIMG,
  atlasJSON,
  item,
  equipmentSet,
  scale,
}) => {
  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
  const [isTooltipMobileVisible, setIsTooltipMobileVisible] = useState(false);

  return (
    <div
      onMouseEnter={() => {
        if (!isTooltipMobileVisible) setIsTooltipVisible(true);
      }}
      onMouseLeave={setIsTooltipVisible.bind(null, false)}
      onTouchEnd={() => {
        setIsTooltipMobileVisible(true);
        setIsTooltipVisible(false);
      }}
    >
      {children}

      {isTooltipVisible && !isTooltipMobileVisible && (
        <ItemTooltip
          atlasIMG={atlasIMG}
          atlasJSON={atlasJSON}
          equipmentSet={equipmentSet}
          item={item}
        />
      )}
      {isTooltipMobileVisible && (
        <MobileItemTooltip
          atlasIMG={atlasIMG}
          atlasJSON={atlasJSON}
          equipmentSet={equipmentSet}
          closeTooltip={() => {
            setIsTooltipMobileVisible(false);
            console.log('close');
          }}
          item={item}
          scale={scale}
        />
      )}
    </div>
  );
};
