import { ReactNode, ReactEventHandler, useContext } from 'react'
import styled, { ThemeContext } from 'styled-components'
import { Button, SizeKey } from './button'
import Icon from './icon'

interface ButtonActionProps {
  children?: ReactNode
  position: 'collapsed' | 'expanded' | 'navigate'
  onClick?: ReactEventHandler
  size?: SizeKey
}

const getSize = (size?: SizeKey) => {
  const carrotSizes = {
    small: {
      width: '12px',
      height: '12px',
    },
    medium: {
      width: '14px',
      height: '14px',
    },
    large: {
      width: '16px',
      height: '16px',
    },
    extraLarge: {
      width: '20px',
      height: '20px',
    },
  }
  return size ? carrotSizes[size] : carrotSizes.medium
}
const StyledIcon = styled(Icon)<ButtonActionProps>`
  overflow: hidden;
  transition: all 0.3s ease-out;
  transform: ${({ position }) => {
    const rotations = {
      collapsed: 'rotate(0.75turn) !important',
      navigate: 'rotate(0.50turn) !important',
      expanded: '',
    }
    return rotations[position]
  }};
  padding: 5px;

  cursor: pointer;
  & {
    ${({ size }) => getSize(size)}
  }
`
const ButtonActionWrapper = styled.div`
  display: flex;
  align-items: center;
`

export const ButtonAction = (props: ButtonActionProps) => {
  const theme = useContext(ThemeContext)
  const { position, ...buttonProps } = props
  const { children, ...iconProps } = props
  return (
    <ButtonActionWrapper>
      <Button {...buttonProps} variation="buttonAction" />
      <StyledIcon {...iconProps} color={theme.navNeutral400} name="actions/carrot-up" />
    </ButtonActionWrapper>
  )
}