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

export const Directions = {
  HORIZONTAL: 'horizontal',
  VERTICAL: 'vertical'
}

export const Rotations = {
  [Directions.HORIZONTAL]: 0,
  [Directions.VERTICAL]: 90
}

export const ShowMoreIcon = ({
  color = IconsGeneralColor,
  direction = Directions.HORIZONTAL as typeof Directions[keyof typeof Directions]
}) => {
  const rotationDegrees = Rotations.hasOwnProperty(direction)
    ? // hasOwnProperty explicitly checked here
      // eslint-disable-next-line security/detect-object-injection
      Rotations[direction]
    : Rotations[Directions.HORIZONTAL]

  return (
    <svg
      style={{
        transform: `rotate(${rotationDegrees}deg)`,
        display: 'block',
        transition: 'transform 0.3s'
      }}
      width="16"
      height="16"
      viewBox="0 0 16 16"
      version="1.1"
    >
      <path
        d="M5 8.5C5 9.32843 4.32837 10 3.5 10C2.67163 10 2 9.32843 2 8.5C2 7.67157 2.67163 7 3.5 7C4.32837 7 5 7.67157 5 8.5Z"
        fill={color}
      />
      <path
        d="M10 8.5C10 9.32843 9.32837 10 8.5 10C7.67163 10 7 9.32843 7 8.5C7 7.67157 7.67163 7 8.5 7C9.32837 7 10 7.67157 10 8.5Z"
        fill={color}
      />
      <path
        d="M13.5 10C14.3284 10 15 9.32843 15 8.5C15 7.67157 14.3284 7 13.5 7C12.6716 7 12 7.67157 12 8.5C12 9.32843 12.6716 10 13.5 10Z"
        fill={color}
      />
    </svg>
  )
}

ShowMoreIcon.category = 'Navigation'

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

ShowMoreIcon.Directions = Directions