/*********************************************************************
 * © 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]: -270,
  [Directions.TOP]: -180,
  [Directions.BOTTOM]: 0,
  [Directions.RIGHT]: -90
}

export const Sizes = {
  DEFAULT: 'default',
  SMALL: 'small'
} as const

const SizeOptions = {
  [Sizes.DEFAULT]: {
    width: 16,
    height: 16,
    points:
      'M13.7071 4.79289C14.0976 5.18342 14.0976 5.81658 13.7071 6.20711L8.70711 11.2071C8.31658 11.5976 7.68342 11.5976 7.29289 11.2071L2.29289 6.20711C1.90237 5.81658 1.90237 5.18342 2.29289 4.79289C2.68342 4.40237 3.31658 4.40237 3.70711 4.79289L8 9.08579L12.2929 4.79289C12.6834 4.40237 13.3166 4.40237 13.7071 4.79289Z'
  },
  [Sizes.SMALL]: {
    width: 16,
    height: 16,
    points:
      'M4.29289 6.29289C3.90237 6.68342 3.90237 7.31658 4.29289 7.70711L7.29289 10.7071C7.68342 11.0976 8.31658 11.0976 8.70711 10.7071L11.7071 7.70711C12.0976 7.31658 12.0976 6.68342 11.7071 6.29289C11.3166 5.90237 10.6834 5.90237 10.2929 6.29289L8 8.58579L5.70711 6.29289C5.31658 5.90237 4.68342 5.90237 4.29289 6.29289Z'
  }
}

export const CaretIcon = ({
  direction,
  color = IconsGeneralColor,
  size = Sizes.DEFAULT
}: {
  direction: typeof Directions[keyof typeof Directions]
  color?: string
  size?: typeof Sizes[keyof typeof Sizes]
}) => {
  const {width, height, points} = SizeOptions.hasOwnProperty(size)
    ? // hasOwnProperty explicitly checked here
      // eslint-disable-next-line security/detect-object-injection
      SizeOptions[size]
    : SizeOptions[Sizes.DEFAULT]

  const rotationDegrees = Rotations.hasOwnProperty(direction)
    ? // hasOwnProperty explicitly checked here
      // eslint-disable-next-line security/detect-object-injection
      Rotations[direction]
    : Rotations[Directions.LEFT]

  return (
    <svg
      style={{
        transform: `rotate(${rotationDegrees}deg)`,
        display: 'block',
        transition: 'transform 0.3s'
      }}
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path fillRule="evenodd" clipRule="evenodd" d={points} fill={color} />
    </svg>
  )
}

CaretIcon.category = 'Navigation'

CaretIcon.propTypes = {
  color: PropTypes.string,
  // Object.keys used here
  // eslint-disable-next-line security/detect-object-injection
  direction: PropTypes.oneOf(Object.keys(Directions).map(key => Directions[key])).isRequired,
  // eslint-disable-next-line security/detect-object-injection
  size: PropTypes.oneOf(Object.keys(Sizes).map(key => Sizes[key]))
}

CaretIcon.Directions = Directions
CaretIcon.Sizes = Sizes