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

export const Types = {
  DEFAULT: 'default',
  OFF: 'off'
}

export const FullscreenIcon = ({color = IconsGeneralColor, type = Types.DEFAULT}) => (
  <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" style={{display: 'block'}}>
    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      {type === Types.DEFAULT && (
        <path
          d="M3.00098 10C2.45098 10 2.00098 10.45 2.00098 11V13C2.00098 13.55 2.45098 14 3.00098 14H5.00098C5.55098 14 6.00098 13.55 6.00098 13C6.00098 12.45 5.55098 12 5.00098 12H4.00098V11C4.00098 10.45 3.55098 10 3.00098 10ZM3.00098 6C3.55098 6 4.00098 5.55 4.00098 5V4H5.00098C5.55098 4 6.00098 3.55 6.00098 3C6.00098 2.45 5.55098 2 5.00098 2H3.00098C2.45098 2 2.00098 2.45 2.00098 3V5C2.00098 5.55 2.45098 6 3.00098 6ZM12.001 12H11.001C10.451 12 10.001 12.45 10.001 13C10.001 13.55 10.451 14 11.001 14H13.001C13.551 14 14.001 13.55 14.001 13V11C14.001 10.45 13.551 10 13.001 10C12.451 10 12.001 10.45 12.001 11V12ZM10.001 3C10.001 3.55 10.451 4 11.001 4H12.001V5C12.001 5.55 12.451 6 13.001 6C13.551 6 14.001 5.55 14.001 5V3C14.001 2.45 13.551 2 13.001 2H11.001C10.451 2 10.001 2.45 10.001 3Z"
          fill={color}
        />
      )}
      {type === Types.OFF && (
        <g>
          <path
            d="M4.00098 3C4.00098 2.45 4.45098 2 5.00098 2C5.55098 2 6.00098 2.45 6.00098 3L6.00098 5C6.00098 5.55 5.55098 6 5.00098 6L3.00098 6C2.45098 6 2.00098 5.55 2.00098 5C2.00098 4.45 2.45098 4 3.00098 4H4.00098V3Z"
            fill={color}
          />
          <path
            d="M13 4C13.55 4 14 4.45 14 5C14 5.55 13.55 6 13 6H11C10.45 6 10 5.55 10 5V3C10 2.45 10.45 2 11 2C11.55 2 12 2.45 12 3V4H13Z"
            fill={color}
          />
          <path
            d="M12 13C12 13.55 11.55 14 11 14C10.45 14 10 13.55 10 13V11C10 10.45 10.45 10 11 10H13C13.55 10 14 10.45 14 11C14 11.55 13.55 12 13 12H12V13Z"
            fill={color}
          />
          <path
            d="M3 12C2.45 12 2 11.55 2 11C2 10.45 2.45 10 3 10H5C5.55 10 6 10.45 6 11V13C6 13.55 5.55 14 5 14C4.45 14 4 13.55 4 13L4 12H3Z"
            fill={color}
          />
        </g>
      )}
    </g>
  </svg>
)

FullscreenIcon.category = 'Navigation'

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

FullscreenIcon.Types = Types