import React from 'react'

import { ColorProp } from '../index'
import Text, { TextProps } from '../Text'

const boxSizes = {
  xs: {
    fontSize: 5,
    padding: 0.5,
    paddingHorizontal: 1,
  },
  sm: {
    fontSize: 4,
    padding: 0.5,
    paddingHorizontal: 1.5,
  },
  md: {
    fontSize: 4,
    padding: 1,
    paddingHorizontal: 2,
  },
  lg: {
    fontSize: 3,
    padding: 1.5,
    lineHeight: 2,
    paddingHorizontal: 2,
  },
}

export type TabProps = {
  /** Whether or not the tab is active. Sets element to span and removes `href` and hover effects if `true`. */
  active?: boolean

  /** Whether or not the tab is disabled. */
  disabled?: boolean

  /** Link to URL. Sets element to an anchor, otherwise it will use a button. */
  href?: string

  /** The size of the tab which includes `fontSize`, `lineHeight` and `padding`. */
  size?: 'xs' | 'sm' | 'md' | 'lg'

  /** The background color of the tab. */
  color?: ColorProp
} & TextProps

export function Tab({
  active,
  disabled,
  href,
  color = 'backgroundSecondary',
  size = 'md',
  ...props
}: TabProps) {
  const tabProps = {
    as: active ? 'span' : href ? 'a' : 'button',
    fontWeight: 400,
    radiusTop: 4,
    cursor: active ? 'default' : 'pointer',
    transition: 'opacity 160ms ease-out',
    backgroundColor: color,
    disabled,
  } as any
  if (!active) {
    if (disabled) {
      tabProps.opacity = 0.6
      tabProps.cursor = 'not-allowed'
      if (href) {
        tabProps['aria-disabled'] = true
      }
    } else {
      tabProps.href = href
      tabProps.opacity = 0.8
      tabProps.hover = {
        opacity: 1,
      }
    }
  }
  return <Text {...tabProps} {...boxSizes[size]} {...props} />
}