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

export const Sizes = {
  DEFAULT: 'default',
  BIG: 'big'
}

const SizeOptions = {
  [Sizes.DEFAULT]: {
    width: 26,
    height: 16
  },
  [Sizes.BIG]: {
    width: 48,
    height: 16
  }
}

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

  return (
    <svg
      style={{
        display: 'block',
        transition: 'transform 0.3s'
      }}
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      {size === Sizes.DEFAULT && (
        <g>
          <path
            d="M13 12C15.2091 12 17 10.2091 17 8C17 5.79086 15.2091 4 13 4C10.7909 4 9 5.79086 9 8C9 10.2091 10.7909 12 13 12Z"
            fill={color}
          />
          <path
            d="M3.29291 5.29289C3.68341 4.90237 4.31659 4.90237 4.70709 5.29289L6.70709 7.29289C7.09763 7.68341 7.09763 8.31659 6.70709 8.70711L4.70709 10.7071C4.31659 11.0976 3.68341 11.0976 3.29291 10.7071C2.90237 10.3166 2.90237 9.68341 3.29291 9.29289L3.58578 9H1C0.447723 9 0 8.55229 0 8C0 7.44771 0.447723 7 1 7H3.58578L3.29291 6.70711C2.90237 6.31659 2.90237 5.68341 3.29291 5.29289Z"
            fill={color}
          />
          <path
            d="M22.2929 5.29289C22.6834 4.90237 23.3166 4.90237 23.7071 5.29289L25.7071 7.29289C26.0976 7.68341 26.0976 8.31659 25.7071 8.70711L23.7071 10.7071C23.3166 11.0976 22.6834 11.0976 22.2929 10.7071C21.9024 10.3166 21.9024 9.68341 22.2929 9.29289L22.5858 9H20C19.4477 9 19 8.55229 19 8C19 7.44771 19.4477 7 20 7H22.5858L22.2929 6.70711C21.9024 6.31659 21.9024 5.68341 22.2929 5.29289Z"
            fill={color}
          />
        </g>
      )}
      {size === Sizes.BIG && (
        <g>
          <path
            d="M24 14C27.3137 14 30 11.3137 30 8C30 4.68629 27.3137 2 24 2C20.6863 2 18 4.68629 18 8C18 11.3137 20.6863 14 24 14Z"
            fill={color}
          />
          <path
            d="M9.29291 4.29289C9.68341 3.90237 10.3166 3.90237 10.7071 4.29289L13.7071 7.29289C14.0976 7.68341 14.0976 8.31659 13.7071 8.70711L10.7071 11.7071C10.3166 12.0976 9.68341 12.0976 9.29291 11.7071C8.90237 11.3166 8.90237 10.6834 9.29291 10.2929L10.5858 9H1C0.447723 9 0 8.55229 0 8C0 7.44771 0.447723 7 1 7H10.5858L9.29291 5.70711C8.90237 5.31659 8.90237 4.68341 9.29291 4.29289Z"
            fill={color}
          />
          <path
            d="M43.2929 4.29289C43.6834 3.90237 44.3166 3.90237 44.7071 4.29289L47.7071 7.29289C48.0976 7.68341 48.0976 8.31659 47.7071 8.70711L44.7071 11.7071C44.3166 12.0976 43.6834 12.0976 43.2929 11.7071C42.9024 11.3166 42.9024 10.6834 43.2929 10.2929L44.5858 9H35C34.4477 9 34 8.55229 34 8C34 7.44771 34.4477 7 35 7H44.5858L43.2929 5.70711C42.9024 5.31659 42.9024 4.68341 43.2929 4.29289Z"
            fill={color}
          />
        </g>
      )}
    </svg>
  )
}

RelationsIcon.category = 'Entity'

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