/*********************************************************************
 * © Copyright IBM Corp. 2024
 *********************************************************************/
import React from 'react'
import PropTypes from 'prop-types'
import {IconsGeneralColor} from '@targetprocess/css-variables'

export const Directions = {
  TOP: 'top',
  BOTTOM: 'bottom',
  LEFT: 'left',
  RIGHT: 'right'
} as const

export const Rotations = {
  [Directions.LEFT]: 0,
  [Directions.TOP]: -270,
  [Directions.BOTTOM]: 270,
  [Directions.RIGHT]: 180
}

export const ArrowIcon = ({
  direction,
  color = IconsGeneralColor
}: {
  direction: typeof Directions[keyof typeof Directions]
  color?: string
}) => {
  const rotationDegrees = Rotations.hasOwnProperty(direction)
    ? // hasOwnProperty explicitly checked here
      // eslint-disable-next-line security/detect-object-injection
      Rotations[direction]
    : Rotations[Directions.LEFT]
  return (
    <svg
      width="16px"
      height="16px"
      viewBox="0 0 16 16"
      version="1.1"
      style={{transform: `rotate(${rotationDegrees}deg)`, display: 'block'}}
    >
      <path
        fillRule="evenodd"
        d="M7.70711 4.29289C7.31658 3.90237 6.68342 3.90237 6.29289 4.29289L3.29289 7.29289C2.90237 7.68342 2.90237 8.31658 3.29289 8.70711L6.29289 11.7071C6.68342 12.0976 7.31658 12.0976 7.70711 11.7071C8.09763 11.3166 8.09763 10.6834 7.70711 10.2929L6.41421 9H11.5C12.0523 9 12.5 8.55228 12.5 8C12.5 7.44772 12.0523 7 11.5 7L6.41421 7L7.70711 5.70711C8.09763 5.31658 8.09763 4.68342 7.70711 4.29289Z"
        fill={color}
      />
    </svg>
  )
}

ArrowIcon.category = 'Navigation'

ArrowIcon.propTypes = {
  color: PropTypes.string,
  direction: PropTypes.oneOf(Object.keys(Rotations)).isRequired
}

ArrowIcon.Directions = Directions