import { useEffect, useState } from 'react';
import './Chip.scss';
import classNames from 'classnames';

interface ChipsProps {
  label: string;
  variant?: 'default' | 'primary' | 'success' | 'error' | 'warning' | 'caution';
  size?: 'container-count' | 'small' | 'medium' | 'single-count';
  hoverText?: string;
  withBackground?: boolean;
  withWhiteBackground?: boolean;
}
const Chip = ({
  label = '',
  hoverText = '',
  variant = 'primary',
  size = 'medium',
  withBackground = true,
  withWhiteBackground = false,
}: ChipsProps) => {
  const [labelText, setLabelText] = useState('');
  const [chipClass, setChipClass] = useState('label-text');

  useEffect(() => {
    setLabelText(label);
  }, []);

  useEffect(() => {
    if (chipClass === 'label-text') {
      setChipClass('hover-text');
    }
  }, [labelText]);

  const handleOnMouseEnter = () => {
    if (hoverText) {
      setLabelText(hoverText);
    }
  };

  const handleOnMouseLeave = () => {
    if (labelText !== label) {
      setLabelText(label);
    }
  };

  return (
    <span
      onMouseEnter={handleOnMouseEnter}
      onMouseLeave={handleOnMouseLeave}
      className={classNames(
        `chip chip--${size} chip--${variant} ${chipClass}`,
        {
          [`ff-chip-no-background--${variant}`]: !withBackground,
          [`ff-chip-white-background--${variant}`]: withWhiteBackground,
        }
      )}
    >
      {labelText}
    </span>
  );
};

export default Chip;