const Radio = (props: IRadio) => null;

const RadioButtonContainer = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
`;

const HiddenCheckbox = styled.input.attrs({ type: 'radio' })`
  border: 0;
  visibility: hidden;
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
`;

const RadiobuttonIcon = styled.div`
  position: absolute;
  height: 25px;
  width: 25px;
  ${(props: IRadio) => (props.checked  || props.disabled ? 'visibility: visible;' : 'visibility: hidden;')}
  ${(props: IRadio) => (props.disabled ? `visibility: visible` : '')}
  &:after {
    content: '';
    position: absolute;
    border-radius: 50%;
    left: 6px;
    top: 6px;
    width: 8px;
    height: 8px;
    background-color: ${Colors.white};
  }
`;

const StyledRadioButton = styled.div`
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  ${(props: IRadio) => (props.checked && !props.disabled ? `background: ${Colors.turquoise};` : '')}
  ${(props: IRadio) => (props.disabled ? `background: ${Colors.gray};` : '')}
  ${(props: IRadio) => (props.checked || props.disabled ? '' : `border: 1px solid ${Colors.graylight};`)}
  transition: all 170ms;
  &:hover {
    ${(props: IRadio) => (props.checked || props.disabled ? '' : `border: 1px solid ${Colors.turquoise};`)}
    ${(props: IRadio) => (!props.disabled ? 'cursor: pointer;' : `cursor: not-allowed;`)}
  }

  /* ${RadiobuttonIcon} {
    ${(props: IRadio) => (props.checked && !props.disabled ? 'visibility: visible;' : 'visibility: hidden;')}
    ${(props: IRadio) => (!props.checked && props.disabled ? `visibility: visible` : '')}
  } */
`;

const RadioButtonName = styled.span`
  margin-left: 10px;
`;

const RadioButtons = styled.div`
  display: flex;
  flex-direction: column;
  margin-right: auto;
`;

export { RadioButtonGroup, Radio };