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

export const Types = {
  DEFAULT: 'default',
  ON: 'on',
  DISABLED: 'disabled'
} as const

export const NotificationIcon = ({
  color = IconsGeneralColor,
  type = Types.DEFAULT as typeof Types[keyof typeof Types]
}) => (
  <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" style={{display: 'block'}}>
    {type === Types.DEFAULT && (
      <g>
        <path
          d="M6.97314 2.55225V2C6.97314 1.44775 7.42065 1 7.97314 1H8.02539C8.57763 1 9.02539 1.44775 9.02539 2V2.55225L10.7786 3.54169C11.2935 3.83221 11.6533 4.33557 11.7617 4.91669L12.5488 9.1347C12.5937 9.37616 12.6829 9.6073 12.8118 9.81647L13.9685 11.6951C14.0505 11.8284 13.9546 12 13.7981 12H2.20019C2.0437 12 1.948 11.8284 2.03003 11.6951L3.18676 9.81647C3.31543 9.6073 3.40454 9.37616 3.4497 9.1347L4.23657 4.91669C4.34497 4.33557 4.70508 3.83221 5.21972 3.54169L6.97314 2.55225Z"
          fill={color}
        />
        <path
          d="M6.78027 14.2485L6.62011 13.6243C6.53906 13.3079 6.77783 13 7.10449 13H8.89404C9.22046 13 9.45947 13.3079 9.37817 13.6243L9.21801 14.2485C9.10473 14.6907 8.70605 15 8.24951 15H7.74878C7.29223 15 6.8938 14.6907 6.78027 14.2485Z"
          fill={color}
        />
      </g>
    )}
    {type === Types.ON && (
      <g>
        <path
          d="M11.6347 2.30415L12.0251 1.91371C12.4157 1.52315 13.0488 1.52315 13.4394 1.91371C13.8298 2.30421 13.8298 2.93739 13.4394 3.3279L13.0488 3.7184L13.519 5.72029C13.6479 6.26881 13.5393 6.84621 13.2202 7.31056L10.8156 10.8085C10.7419 10.9155 10.6792 11.0293 10.6276 11.1481C10.5847 11.2476 10.5498 11.3507 10.5234 11.4564L9.98945 13.5918C9.95186 13.7426 9.76387 13.7946 9.654 13.6847L1.66841 5.69899C1.5583 5.58907 1.61055 5.40126 1.76118 5.36354L3.89668 4.82967C4.12837 4.77174 4.34785 4.67281 4.54463 4.53755L8.04243 2.13295C8.50679 1.81374 9.08418 1.70522 9.63276 1.834L11.6347 2.30415Z"
          fill={FontColorSelected}
        />
        <path
          d="M6.06294 13.265L6.39229 12.7159C6.55977 12.437 6.94478 12.3896 7.17476 12.6196L8.39033 13.8353C8.62031 14.0653 8.57295 14.4502 8.29414 14.6176L7.74482 14.947C7.35151 15.1831 6.84785 15.1211 6.52339 14.7966L6.21333 14.4866C5.88887 14.1621 5.82686 13.6585 6.06294 13.265Z"
          fill={FontColorSelected}
        />
      </g>
    )}
    {type === Types.DISABLED && (
      <g>
        <path
          d="M2.70711 1.29289C2.31658 0.902369 1.68342 0.902369 1.29289 1.29289C0.902369 1.68342 0.902369 2.31658 1.29289 2.70711L4.12116 5.53537L3.4497 9.1347C3.40454 9.37616 3.31543 9.6073 3.18676 9.81647L2.03003 11.6951C1.948 11.8284 2.0437 12 2.20019 12H10.5858L13.2929 14.7071C13.6834 15.0976 14.3166 15.0976 14.7071 14.7071C15.0976 14.3166 15.0976 13.6834 14.7071 13.2929L2.70711 1.29289Z"
          fill={color}
        />
        <path
          d="M11.7617 4.91669L12.3588 8.11648L6.859 2.61666L6.97314 2.55225V2C6.97314 1.44775 7.42065 1 7.97314 1H8.02539C8.57763 1 9.02539 1.44775 9.02539 2V2.55225L10.7786 3.54169C11.2935 3.83221 11.6533 4.33557 11.7617 4.91669Z"
          fill={color}
        />
        <path
          d="M6.78027 14.2485L6.62011 13.6243C6.53906 13.3079 6.77783 13 7.10449 13H8.89404C9.22046 13 9.45947 13.3079 9.37817 13.6243L9.21801 14.2485C9.10473 14.6907 8.70605 15 8.24951 15H7.74878C7.29223 15 6.8938 14.6907 6.78027 14.2485Z"
          fill={color}
        />
      </g>
    )}
  </svg>
)

NotificationIcon.category = 'Entity'

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

NotificationIcon.Types = Types