import React, { useState } from 'react';
import classNames from 'classnames';

import { Icon } from '../Icon/Icon';
import type { IconName } from '../Icon/IconName';

export interface ToggleProps extends Pick<React.HTMLAttributes<HTMLButtonElement>, 'onClick'> {
  value?: number | boolean;
  title?: string | undefined;
  disabled?: boolean;
}

interface CustomIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  icon: IconName;
  variant: 'success' | 'secondary';
  disabled?: boolean;
}

const CustomIconButton = React.forwardRef<HTMLButtonElement, CustomIconButtonProps>(
  ({ icon, disabled, variant, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={classNames('toggle', 'toggle--ghost', `toggle--${variant}`, {
          [`toggle--disabled`]: disabled,
        })}
        disabled={disabled}
        type='button'
        {...props}
      >
        <Icon size='md' icon={icon}></Icon>
      </button>
    );
  }
);

CustomIconButton.displayName = 'CustomIconButton';

export const Toggle: React.FC<ToggleProps> = ({ value, disabled = false, title, onClick, ...rest }) => {
  const [mouseOver, setMouseOver] = useState(false);
  const handleMouseEnter = () => setMouseOver(true);
  const handleMouseLeave = () => setMouseOver(false);

  return disabled ? (
    value ? (
      <CustomIconButton
        {...rest}
        icon='shp-visible'
        variant='success'
        disabled={mouseOver}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        title={title}
      />
    ) : (
      <CustomIconButton
        {...rest}
        icon={mouseOver ? 'shp-disabled' : 'shp-hidden'}
        variant='secondary'
        disabled={mouseOver}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        title={title}
      />
    )
  ) : value ? (
    <CustomIconButton {...rest} icon='shp-visible' variant='success' onClick={onClick} title={title} />
  ) : (
    <CustomIconButton {...rest} icon='shp-hidden' variant='secondary' onClick={onClick} title={title} />
  );
};