import { FunctionComponent } from 'react'
import styled from 'styled-components'
import { IconPosition, SizeKey, StyledButtonProps } from './button.js'
import { Icon } from './icon.js'
import { IconName } from './icons/index.js'

const ButtonLinkIconWrapper = styled.div`
  display: flex;
  align-items: center;
`

const getSize = (size?: SizeKey) => {
  const iconSizes = {
    small: {
      width: '13.2px',
      height: '13.2px',
    },
    medium: {
      width: '16.5px',
      height: '16.5px',
    },
    large: {
      width: '19.8px',
      height: '19.8px',
    },
    extraLarge: {
      width: '20.5px',
      height: '20.5px',
    },
  }
  return size ? iconSizes[size] : iconSizes.medium
}

interface StyledIconProps {
  name: IconName
  size?: SizeKey
  $iconPosition?: IconPosition
}
const StyledIcon = styled(Icon)<StyledIconProps>`
  & {
    ${({ size }) => getSize(size)}
  }
`
const StyledChildren = styled.span<{ iconPosition?: IconPosition }>`
  & {
    ${({ iconPosition }) => (iconPosition === 'left' ? { paddingLeft: '3px' } : { paddingRight: '3px' })}
  }
`
interface ButtonLinkIconProps extends StyledButtonProps {
  name: IconName
}
export const ButtonLinkIcon: FunctionComponent<ButtonLinkIconProps> = ({
  children,
  name,
  iconPosition,
  variation,
  size,
}) => {
  if (variation !== 'buttonLinkIcon') return <>{children}</>
  return (
    <ButtonLinkIconWrapper>
      {iconPosition === 'left' && <StyledIcon {...{ size, name, $iconPosition: iconPosition }} />}
      <StyledChildren {...{ iconPosition }}>{children}</StyledChildren>
      {iconPosition === 'right' && <StyledIcon {...{ size, name, $iconPosition: iconPosition }} />}
    </ButtonLinkIconWrapper>
  )
}