import React from 'react'
import { omit } from '@skava/utils'
import Vector from 'atoms/Vector'
import { DefaultProps } from 'icons/typings'

// extending interface from Label component
interface Props extends DefaultProps {
  isSelected?: boolean
  isAnimated?: boolean
  selectfill?: string
}

const wording = {
  description:
    'A rounded rectangle shaped switch,with a circle toggle button inside which likely changes state when moved from left to right or viceversa',
  title: 'Switch icon',
}
class SwitchIcon extends React.Component<Props> {
  static defaultProps = {
    width: '38px',
    height: '30px',
    viewBox: '0 -4 34 24',
    fill: '#000000',
    selectfill: '#0772B4',
    stroke: '',
    isSelected: false,
  }
  render() {
    const { fill, selectfill, isAnimated, isSelected, stroke } = this.props
    const sliderCircle = isSelected
      ? 'M25,13 C22.2333333,13 20,10.7666667 20,8 C20,5.2333333 22.2333333,3 25,3 C27.7666666,3 30,5.2333333 30,8 C30,10.7666667 27.7666666,13 25,13 Z'
      : 'M8.00000003,13 C5.23333333,13 3,10.7666667 3,8 C3,5.2333333 5.23333333,3 8.00000003,3 C10.7666666,3 13,5.2333333 13,8 C13,10.7666667 10.7666666,13 8.00000003,13 Z'
    const dataQa = isSelected ? 'qa-switch-selected' : 'qa-switch'
    const passThroughProps = omit(this.props, [
      'selectFill',
      'isSelected',
      'isAnimated',
    ])

    return (
      <Vector {...passThroughProps} {...wording} data-qa={dataQa}>
        <g stroke={stroke}>
          <path
            fill={isSelected ? selectfill : fill}
            d="M25,0 L8.333333,0 C3.733333,0 0,3.733333 0,8.333333 C0,12.933333 3.733333,16.666667 8.333333,16.2 L25,16.2 C29.6,16.6666666 33.3333334,12.9333333 33.3333334,8.3333333 C33.3333334,3.7333333 29.6,0 25,0 Z"
          />
          <path
            id={isAnimated && 'slider-circle'}
            fill="#FFFFFF"
            d={sliderCircle}
          />
        </g>
      </Vector>
    )
  }
}

export { SwitchIcon }
export default SwitchIcon