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

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

export const SwapIcon = ({
  direction = Directions.VERTICAL 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.VERTICAL && (
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M8.0828 1.00007C8.34804 1.00321 8.60117 1.1116 8.78649 1.30141L11.7155 4.30141C12.1013 4.69658 12.0938 5.3297 11.6986 5.71552C11.3034 6.10134 10.6703 6.09376 10.2845 5.69859L9.07096 4.45567L9.07094 11.5321L10.2879 10.2979C10.6757 9.90462 11.3089 9.90017 11.7021 10.2879C12.0954 10.6757 12.0998 11.3089 11.7121 11.7021L8.78299 14.6727C8.39785 15.0633 7.76995 15.0707 7.37568 14.6893L4.30474 11.7188C3.90778 11.3348 3.89726 10.7017 4.28124 10.3047C4.66522 9.90778 5.2983 9.89726 5.69526 10.2812L7.07094 11.6119L7.07096 4.37487L5.69879 5.71532C5.30373 6.10126 4.67061 6.09386 4.28468 5.69879C3.89874 5.30373 3.90615 4.67061 4.30121 4.28468L7.37217 1.28468C7.56192 1.09931 7.81755 0.996932 8.0828 1.00007Z"
        fill={color}
      />
    )}
    {direction === Directions.HORIZONTAL && (
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M1.01472 7.90243C1.01786 7.63719 1.12625 7.38406 1.31606 7.19874L4.31605 4.26971C4.71123 3.88389 5.34435 3.89146 5.73017 4.28664C6.11599 4.68181 6.10841 5.31492 5.71324 5.70075L4.47032 6.91427L11.5468 6.91429L10.3125 5.69729C9.91927 5.30952 9.91482 4.67637 10.3026 4.28311C10.6904 3.88985 11.3235 3.8854 11.7168 4.27317L14.6873 7.20223C15.0779 7.58738 15.0853 8.21528 14.7039 8.60955L11.7334 11.6805C11.3494 12.0774 10.7163 12.088 10.3194 11.704C9.92243 11.32 9.91191 10.6869 10.2959 10.29L11.6266 8.91429L4.38951 8.91427L5.72997 10.2864C6.1159 10.6815 6.1085 11.3146 5.71344 11.7006C5.31838 12.0865 4.68526 12.0791 4.29932 11.684L1.29932 8.61306C1.11396 8.4233 1.01158 8.16768 1.01472 7.90243Z"
        fill={color}
      />
    )}
  </svg>
)

SwapIcon.category = 'Common Actions'

SwapIcon.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
}

SwapIcon.Directions = Directions