import h from '../shared/h.js'
import { Icon } from './icon.js'
import { LinkText } from './link-text.js'
import { Link } from './link.js'

export function Button ({ _model, _variant, _size, _textless, _wide, disabled, ...props }) {
  const { name, value, icon } = _model
  const iconOnly = _textless || !name
  const height = { lg: '16', md: '12', sm: '10', xs: '8' }[_size ?? 'md']

  // Get class name.
  const layout = _variant === 'plain'
    ? 'text-txa bg-bga hover:text-bga hover:bg-txa'
    : 'overflow-hidden border bg-bgb/100 text-txb border-bgb hover:bg-txb hover:text-bgb font-bold'
  const wide = _wide ? 'w-full' : ''
  const roundness = _size === 'xs' ? 'rounded-md' : 'rounded-lg'
  const size = iconOnly
    ? `justify-center items-center w-${height} h-${height}`
    : `pl-3 pr-3 space-x-2 min-h-${height}`
  const inactive = disabled ? 'grayscale pointer-events-none' : ''
  const className = `clickable cursor-pointer transition inline-flex ${layout} ${roundness} ${size} ${wide} ${inactive}`

  return h(value ? Link : 'button', {
    ...props,
    _model,
    disabled,
    className,
    ...iconOnly && { 'aria-label': name, title: name },
    children: [
      icon && h('div', {
        className: 'flex items-center justify-center',
        children: h(Icon, icon)
      }),
      iconOnly || h('div', {
        className: `grow flex items-center ${icon ? '' : 'justify-center'}`,
        children: h(LinkText, { _model })
      })
    ]
  })
}
