import React from 'react';
import { bool, string, node } from 'prop-types';
import styled from 'styled-components';
import { REM_UNIT_SM, REM_UNIT_LG } from '@vincent_za/styles';

import { RADIO_WRAP_CLASSNAME } from '../shared';

const Wrap = styled.div`
  display: flex;
  align-items: center;
  width: 100%;
`;

const Title = styled.label`
  margin-right: ${REM_UNIT_SM};
`;

const RadioGroupWrap = styled.div`
  display: flex;
  margin-left: auto;

  .${RADIO_WRAP_CLASSNAME} {
    margin-left: ${REM_UNIT_LG};

    &:first-child {
      margin-left: 0;
    }
  }
`;

class RadioGroup extends React.PureComponent {
  render() {
    const { isHidden, title, className, children } = this.props;

    return (
      !isHidden ?
        <Wrap className={className}>
          {title && <Title>{title}</Title>}
          <RadioGroupWrap>
            {children}
          </RadioGroupWrap>
        </Wrap> : null
    );
  }
}

RadioGroup.propTypes = {
  isHidden: bool,
  title: string,
  className: string,
  children: node.isRequired,
};

RadioGroup.defaultProps = {
  isHidden: false,
  title: undefined,
  className: undefined,
};

export default RadioGroup;
