import { styled } from '@skava/modules/___dist/view-container'
import CheckBoxIcon from 'atoms/Icons/CheckBoxIcon'
import RadioIcon from 'atoms/Icons/RadioIcon'
import { IconWrapper } from 'molecules/Toggle'

const StyledIconWrapper = styled.withComponent(IconWrapper) `
  margin-right: 8px;
`

const ThemedCheckBox = styled.withComponent(CheckBoxIcon) `
  border-radius: 4px;

  ${props =>
    props.isSelected === true &&
    styled.css `
      fill: ${props.fillColor};
    `}

  ${props =>
    props.isSelected === false &&
    styled.css `
      fill: transparent;
      box-shadow: inset 0px 0px 0px 2px #a6afc1;
    `}
`

const ThemedRadioIcon = styled.withComponent(RadioIcon) `
  ${props =>
    props.isSelected === true &&
    styled.css `
      g > g {
        stroke: transparent;
        g > path {
          &:first-child {
            stroke: ${props.fillColor};
          }
          &:last-child {
            fill: ${props.fillColor};
          }
        }
      }
    `}

  ${props =>
    props.isSelected === false &&
    styled.css `
      g > path {
        &:first-child {
          stroke: #000000;
        }
      }
    `}
`

export { ThemedCheckBox, StyledIconWrapper, ThemedRadioIcon }