import { forwardRef } from 'react'
import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components'
import { useFocusStyles } from './focusRing'
import { ICON } from './tokens'

const useStyles = makeStyles({
  btn: {
    appearance: 'none',
    border: 'none',
    backgroundColor: 'transparent',
    color: tokens.colorNeutralForeground3,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    cursor: 'pointer',
    borderRadius: tokens.borderRadiusMedium,
    ':hover': {
      backgroundColor: tokens.colorNeutralBackground1Hover,
      color: tokens.colorNeutralForeground2
    },
    ':disabled': {
      cursor: 'not-allowed',
      color: tokens.colorNeutralForegroundDisabled,
      backgroundColor: 'transparent'
    }
  },
  md: { width: '32px', height: '32px', fontSize: `${ICON.control}px` },
  sm: { width: '28px', height: '28px', fontSize: `${ICON.inline}px` }
})

type IconButtonProps = {
  icon: React.JSX.Element
  size?: 'sm' | 'md'
} & React.ButtonHTMLAttributes<HTMLButtonElement>

/**
 * The recurring icon-only ghost button (UI15) — one implementation for the
 * sidebar's collapse/theme toggles and the playlist row's video/audio switch,
 * which were separate hand-rolled buttons with the same look. Carries the shared
 * focus ring (UI29). Extra props (onClick, aria-label, aria-pressed, disabled, …)
 * pass straight through to the underlying `<button>`.
 */
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
  { icon, size = 'md', className, type = 'button', ...rest },
  ref
) {
  const styles = useStyles()
  const focus = useFocusStyles()
  return (
    <button
      ref={ref}
      type={type}
      className={mergeClasses(styles.btn, styles[size], focus.focusRing, className)}
      {...rest}
    >
      {icon}
    </button>
  )
})
