"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const styleh_components_1 = require("styleh-components");

const Vector_1 = tslib_1.__importDefault(require("../../Vector")); // 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} />


exports.StyledCircleFillPath = styleh_components_1.styled.path`transition:transform 0.1s ease-in-out;transform-origin:50% 50%;${props => props.isSelected === false && styleh_components_1.styled.css`transform:scale(0);`};${props => props.isSelected === true && styleh_components_1.styled.css`transform:scale(0.9);`};`;
const wording = {
  description: 'Radio Icon is used to represent the radio section',
  title: 'Radio Icon',
  vectorClassName: 'radio'
};

class RadioIcon extends react_1.default.PureComponent {
  render() {
    const _a = this.props,
          {
      stroke,
      isSelected
    } = _a,
          remainingProps = tslib_1.__rest(_a, ["stroke", "isSelected"]);

    console.log('___RadioIcon[isSelected]___', isSelected);
    const dataQa = isSelected ? 'qa-facet-selected' : 'qa-facet';
    return react_1.default.createElement(Vector_1.default, Object.assign({}, remainingProps, wording, {
      "data-qa": dataQa
    }), react_1.default.createElement("g", {
      stroke: "none",
      strokeWidth: "2",
      fill: "none",
      fillRule: "evenodd"
    }, react_1.default.createElement("g", {
      stroke: stroke
    }, react_1.default.createElement("g", {
      transform: "translate(1.000000, 1.000000)"
    }, react_1.default.createElement("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"
    }), react_1.default.createElement(exports.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"
    })))));
  }

}

RadioIcon.defaultProps = {
  width: '20px',
  height: '20px',
  viewBox: '0 0 20 20',
  stroke: '#000000',
  isSelected: false
};
exports.RadioIcon = RadioIcon;
exports.default = RadioIcon; //# sourceMappingURL=RadioIcon.js.map