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

export const Types = {
  ON: 'on',
  OFF: 'off'
}

export const FilterIcon = ({color = IconsGeneralColor, type = Types.ON}) => (
  <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" style={{display: 'block'}}>
    {type === Types.ON && (
      <path
        fillRule="evenodd"
        d="M2.48124 4.59224C2.4811 4.59223 2.48186 4.5907 2.48393 4.5877C2.48241 4.59076 2.48137 4.59226 2.48124 4.59224ZM2.57671 4.5C2.59809 4.48348 2.62396 4.46486 2.65516 4.4442C2.87942 4.29575 3.25342 4.13302 3.78281 3.98479C4.83113 3.69125 6.3224 3.5 8 3.5C9.6776 3.5 11.1689 3.69125 12.2172 3.98479C12.7466 4.13302 13.1206 4.29575 13.3448 4.4442C13.376 4.46486 13.4019 4.48348 13.4233 4.5C13.4019 4.51651 13.376 4.53514 13.3448 4.5558C13.1206 4.70425 12.7466 4.86698 12.2172 5.01521C11.1689 5.30875 9.6776 5.5 8 5.5C6.3224 5.5 4.83113 5.30875 3.78281 5.01521C3.25342 4.86698 2.87942 4.70425 2.65516 4.5558C2.62396 4.53514 2.59809 4.51652 2.57671 4.5ZM13.5188 4.59224C13.5186 4.59226 13.5176 4.59076 13.5161 4.5877C13.5181 4.5907 13.5189 4.59223 13.5188 4.59224ZM13.5161 4.4123C13.5176 4.40924 13.5186 4.40774 13.5188 4.40776C13.5189 4.40777 13.5181 4.4093 13.5161 4.4123ZM2.48393 4.4123C2.48186 4.4093 2.4811 4.40777 2.48124 4.40776C2.48137 4.40774 2.48241 4.40924 2.48393 4.4123ZM3.37836 2.54034C4.59209 2.2005 6.22582 2 8 2C9.77418 2 11.4079 2.2005 12.6216 2.54034C13.2233 2.7088 13.7646 2.92316 14.1728 3.19344C14.5519 3.44434 15 3.8706 15 4.5C15 5.1294 14.5519 5.55566 14.1728 5.80656C13.7646 6.07684 13.2233 6.2912 12.6216 6.45966C11.4079 6.7995 9.77418 7 8 7C6.22582 7 4.59209 6.7995 3.37836 6.45966C2.77672 6.2912 2.23543 6.07684 1.82716 5.80656C1.44815 5.55566 1 5.1294 1 4.5C1 3.8706 1.44815 3.44434 1.82716 3.19344C2.23543 2.92316 2.77672 2.7088 3.37836 2.54034ZM3.07761 8.66776C3.2611 8.2964 3.71089 8.14411 4.08224 8.3276C4.94675 8.75477 6.212 9 8 9C9.788 9 11.0533 8.75477 11.9178 8.3276C12.2891 8.14411 12.7389 8.2964 12.9224 8.66776C13.1059 9.03911 12.9536 9.4889 12.5822 9.6724C11.4229 10.2452 9.89431 10.5 8 10.5C6.10569 10.5 4.57706 10.2452 3.41776 9.6724C3.0464 9.4889 2.89411 9.03911 3.07761 8.66776ZM10.1887 12.9532C10.3526 13.3336 10.177 13.7749 9.79663 13.9388C9.26881 14.1662 8.67451 14.2669 8.02749 14.2669C7.40125 14.2669 6.82449 14.1726 6.30945 13.9603C5.92648 13.8025 5.74397 13.3641 5.90179 12.9811C6.05962 12.5982 6.49801 12.4157 6.88098 12.5735C7.17479 12.6946 7.54892 12.7669 8.02749 12.7669C8.522 12.7669 8.90494 12.6897 9.20311 12.5612C9.58352 12.3973 10.0248 12.5728 10.1887 12.9532Z"
        fill={color}
      />
    )}
    {type === Types.OFF && (
      <g>
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M2.70711 14.7071L14.7071 2.70711C15.0976 2.31658 15.0976 1.68342 14.7071 1.29289C14.3166 0.902369 13.6834 0.902369 13.2929 1.29289L12.1627 2.42311C11.0101 2.15487 9.55931 2 8 2C6.22582 2 4.59209 2.2005 3.37836 2.54034C2.77672 2.7088 2.23543 2.92316 1.82716 3.19344C1.44815 3.44434 1 3.8706 1 4.5C1 5.1294 1.44815 5.55566 1.82716 5.80656C2.23543 6.07684 2.77672 6.2912 3.37836 6.45966C4.49784 6.77312 5.97464 6.96802 7.58938 6.9964L5.75189 8.8339C5.07815 8.71906 4.52716 8.54742 4.08229 8.3276C3.71093 8.14411 3.26114 8.2964 3.07765 8.66776C2.89416 9.03911 3.04645 9.4889 3.4178 9.67239C3.74837 9.83573 4.10896 9.97321 4.49949 10.0863L1.29289 13.2929C0.902369 13.6834 0.902369 14.3166 1.29289 14.7071C1.68342 15.0976 2.31658 15.0976 2.70711 14.7071ZM10.8809 3.7049C10.0369 3.57568 9.05533 3.5 8 3.5C6.3224 3.5 4.83113 3.69125 3.7828 3.98479C3.25342 4.13302 2.87942 4.29575 2.65516 4.4442C2.62396 4.46486 2.59809 4.48348 2.57671 4.5C2.59809 4.51652 2.62396 4.53514 2.65516 4.5558C2.87942 4.70425 3.25342 4.86698 3.7828 5.01521C4.83113 5.30875 6.3224 5.5 8 5.5C8.38219 5.5 8.7547 5.49007 9.11451 5.47127L10.8809 3.7049Z"
          fill={color}
        />
        <path
          d="M14.8859 5.02833L14.0023 5.91187C14.0614 5.87775 14.1183 5.84265 14.1728 5.80656C14.4342 5.63356 14.7284 5.37719 14.8859 5.02833Z"
          fill={color}
        />
        <path
          d="M9.47273 10.4415L11.354 8.56021C11.5584 8.49019 11.746 8.41249 11.9178 8.3276C12.2892 8.14411 12.7389 8.2964 12.9224 8.66776C13.1059 9.03911 12.9536 9.4889 12.5823 9.67239C11.7402 10.0885 10.7032 10.3368 9.47273 10.4415Z"
          fill={color}
        />
        <path
          d="M7.23013 12.6841L6.09141 13.8228C6.15386 13.8794 6.22699 13.9264 6.3094 13.9603C6.82444 14.1726 7.40121 14.2669 8.02744 14.2669C8.67447 14.2669 9.26876 14.1662 9.79658 13.9388C10.177 13.7749 10.3525 13.3336 10.1886 12.9532C10.0247 12.5728 9.58347 12.3973 9.20306 12.5612C8.90489 12.6897 8.52195 12.7669 8.02744 12.7669C7.72095 12.7669 7.45729 12.7372 7.23013 12.6841Z"
          fill={color}
        />
      </g>
    )}
  </svg>
)

FilterIcon.category = 'Info'

FilterIcon.propTypes = {
  color: PropTypes.string
}