import React from 'react'
import { omit } from 'uxui-modules/utils/omit'
import { DefaultProps } from 'icons/typings'
import Vector from 'atoms/Vector'

interface Props extends DefaultProps {
  bgColor?: string
  borderColor?: string
  tickColor?: string
  radius?: number
  isSelected?: boolean
}

const wording = {
  title: 'Checkbox Icon',
  description:
    'A square box (represents unchecked box), A tick mark within a square box (represents checked box)',
}

class CheckBoxIcon extends React.PureComponent<Props> {
  static defaultProps = {
    width: '50px',
    height: '50px',
    viewBox: '0 0 240 240',
    fill: '#000',
    tickColor: '#000',
    bgColor: '#000',
    borderColor: '#000',
    radius: 0,
  }

  render() {
    const { isSelected, fill, bgColor, tickColor, borderColor, radius } = this.props
    const attributes = omit(this.props, [
      'tickColor',
      'bgColor',
      'borderColor',
      'fill',
      'radius',
    ])

    const ariaChecked = isSelected

    const dataQa = isSelected ? 'qa-facet-selected' : 'qa-facet'

    const passThroughProps = {
      dataQa,
      ...attributes,
      ...wording,
    }

    return (
      <Vector aria-checked={ariaChecked} {...passThroughProps} >
        <g>
          <rect
            className={'checkbox-bgfill'}
            fill={bgColor}
            width={'240'}
            height={'240'}
            rx={radius}
            ry={radius}
          />
          <path
            className={'checkbox-borderfill'}
            fill={borderColor}
            d={'M0,240V0H240V240H0ZM220,20H20V220H220V20Z'}
          />
          <path
            className={'checkbox-tickfill'}
            transform={'translate(55, 70)'}
            fill={tickColor}
            d={'M0,57L13,43,44,71,114,0l14,14L44,100Z'}
          />
        </g>
      </Vector>
    )
  }
}

export { CheckBoxIcon }
export default CheckBoxIcon