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

export const Directions = {
  ASCENDING: 'ascending',
  DESCENDING: 'descending'
}

export const SortIcon = ({
  direction = Directions.ASCENDING as typeof Directions[keyof typeof Directions],
  color = IconsGeneralColor
}) => (
  <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" style={{display: 'block'}}>
    {direction === Directions.DESCENDING && (
      <g>
        <path
          d="M8.70711 11.7071L5.70711 14.7071C5.31658 15.0976 4.68342 15.0976 4.29289 14.7071L1.29289 11.7071C0.902369 11.3166 0.902369 10.6834 1.29289 10.2929C1.68342 9.90237 2.31658 9.90237 2.70711 10.2929L4 11.5858V2C4 1.44771 4.44772 1 5 1C5.55228 1 6 1.44771 6 2V11.5858L7.29289 10.2929C7.68342 9.90237 8.31658 9.90237 8.70711 10.2929C9.09763 10.6834 9.09763 11.3166 8.70711 11.7071Z"
          fill={color}
        />
        <path
          d="M11 7C10.4477 7 10 7.44772 10 8C10 8.55228 10.4477 9 11 9H14C14.5523 9 15 8.55228 15 8C15 7.44772 14.5523 7 14 7H11Z"
          fill={color}
        />
        <path
          d="M10 12C10 11.4477 10.4477 11 11 11H14C14.5523 11 15 11.4477 15 12C15 12.5523 14.5523 13 14 13H11C10.4477 13 10 12.5523 10 12Z"
          fill={color}
        />
        <path
          d="M13 3C12.4477 3 12 3.44772 12 4C12 4.55228 12.4477 5 13 5H14C14.5523 5 15 4.55228 15 4C15 3.44772 14.5523 3 14 3H13Z"
          fill={color}
        />
      </g>
    )}
    {direction === Directions.ASCENDING && (
      <g>
        <path
          d="M5.70711 1.29289C5.31658 0.902369 4.68342 0.902369 4.29289 1.29289L1.29289 4.29289C0.902369 4.68342 0.902369 5.31658 1.29289 5.70711C1.68342 6.09763 2.31658 6.09763 2.70711 5.70711L4 4.41421V14C4 14.5523 4.44772 15 5 15C5.55228 15 6 14.5523 6 14V4.41421L7.29289 5.70711C7.68342 6.09763 8.31658 6.09763 8.70711 5.70711C9.09763 5.31658 9.09763 4.68342 8.70711 4.29289L5.70711 1.29289Z"
          fill={color}
        />
        <path
          d="M11 7C10.4477 7 10 7.44772 10 8C10 8.55228 10.4477 9 11 9H14C14.5523 9 15 8.55228 15 8C15 7.44772 14.5523 7 14 7H11Z"
          fill={color}
        />
        <path
          d="M12 12C12 11.4477 12.4477 11 13 11H14C14.5523 11 15 11.4477 15 12C15 12.5523 14.5523 13 14 13H13C12.4477 13 12 12.5523 12 12Z"
          fill={color}
        />
        <path
          d="M11 3C10.4477 3 10 3.44772 10 4C10 4.55228 10.4477 5 11 5H14C14.5523 5 15 4.55228 15 4C15 3.44772 14.5523 3 14 3H11Z"
          fill={color}
        />
      </g>
    )}
  </svg>
)

SortIcon.category = 'Common Actions'

SortIcon.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]))
}

SortIcon.Directions = Directions