import React from 'react'
import { DefaultProps } from 'icons/typings'
import Vector from 'atoms/Vector'

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

// const StyledCircleFillPath = styled.as('path') `
//   &.selected {}
//   ${props => props.isSelected && styled.css ``}
// `
// import toClassName from 'classnames'
// const attrs = {
//   active: this.props.isSelected,
// }
// const className = toClassName(attrs)
// <StyledCircleFillPath className={className} />
// =>
// <StyledCircleFillPath isSelected={this.props.isSelected} />
export const StyledCircleFillPath = styled.withComponent('path') `
  transition: transform 0.1s ease-in-out;
  transform-origin: 50% 50%;

  ${props =>
    props.isSelected === false &&
    styled.css `
      transform: scale(0);
    `};
  ${props =>
    props.isSelected === true &&
    styled.css `
      transform: scale(1);
    `};
`

const wording = {
  description: 'Radio Icon is used to represent the radio section',
  title: 'Radio Icon',
  vectorClassName: 'radio',
}

class RadioIcon extends React.PureComponent<Props> {
  static defaultProps = {
    width: '20px',
    height: '20px',
    viewBox: '0 0 20 20',
    stroke: '#000000',
    isSelected: false,
  }

  render() {
    const { stroke, isSelected, ...remainingProps } = this.props
    console.log('___RadioIcon[isSelected]___', isSelected)
    const dataQa = isSelected ? 'qa-facet-selected' : 'qa-facet'
    return (
      <Vector {...remainingProps} {...wording} data-qa={dataQa}>
        <g stroke="none" strokeWidth="2" fill="none" fillRule="evenodd">
          <g stroke={stroke}>
            <g transform="translate(1.000000, 1.000000)">
              <path
                stroke={stroke}
                d="M18,8.80511351 C18,13.6417622 13.971,17.5618703 9,17.5618703 C4.029,17.5618703 0,13.6417622 0,8.80511351 C0,3.96846486 4.029,0.0483567568 9,0.0483567568 C13.971,0.0483567568 18,3.96846486 18,8.80511351 Z"
              />
              <StyledCircleFillPath
                isSelected={isSelected}
                fill={stroke}
                d="M15,8.80511351 C15,12.028573 12.313,14.6429514 9,14.6429514 C5.687,14.6429514 3,12.028573 3,8.80511351 C3,5.58165405 5.687,2.96727568 9,2.96727568 C12.313,2.96727568 15,5.58165405 15,8.80511351"
              />
            </g>
          </g>
        </g>
      </Vector>
    )
  }
}

export { RadioIcon }
export default RadioIcon