import React from 'react'
import { bool, number, shape, string } from 'prop-types'
import DemioIcon from '../Icon/Icon'
import './DemioDropdownArrow.less'

const propTypes = {
  isOpen: bool,
  rotationAmount: number,
  iconSize: number,
  fill: string,
  type: string,
  style: shape({})
}

const getCurrentRotation = ({ type, isOpen, rotationAmount }) => {
  let rotation = 0
  if (type === 'left') rotation = 90
  if (type === 'up') rotation = 180
  if (type === 'right') rotation = 270
  if (isOpen) rotation += rotationAmount

  return rotation
}

const DemioDropdownArrow = ({ isOpen, iconSize, fill, type, style, rotationAmount }) => (
  <div className="demio-dropdown-arrow-container" style={style}>
    <DemioIcon
      type="Caret"
      fill={fill}
      width={iconSize}
      className="demio-dropdown-arrow"
      style={{
        transform: `rotate(${getCurrentRotation({ type, isOpen, rotationAmount })}deg)`
      }}
    />
  </div>
)

DemioDropdownArrow.defaultProps = {
  isOpen: false,
  iconSize: 16,
  fill: '#2C3336',
  type: 'down',
  style: {},
  rotationAmount: 90
}

DemioDropdownArrow.propTypes = propTypes

export default DemioDropdownArrow