import React from 'react';
import PropTypes from 'prop-types';
import Toggle from '../../components/Toggle';
import Input from '../../components/Input';

// Style
let classes = {};
/* istanbul ignore next */
if (typeof window !== 'undefined' || typeof _COMPILED_ === 'undefined') classes = require('./style.module.scss');

export default class LabeledCheckbox extends React.Component {
  static propTypes = {
    children: PropTypes.object,
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    required: PropTypes.bool,
    style: PropTypes.object,
    type: PropTypes.oneOf(['radio', 'checkbox', 'toggle', 'text', 'number', 'password']),
    value: PropTypes.any,
  };

  static defaultProps = {
    label: 'Label Text',
    type: 'checkbox',
  };

  constructor(props) {
    super(props, 'Box');
  }

  render() {
    const { style, children, label, ...attrs } = this.props;
    if (this.props.type === 'text' || this.props.type === 'number' || this.props.type === 'password') {
      return (
        <label
          className={[classes.LabeledCheckbox, classes.LabeledCheckbox_text, 'Flex Flex_row'].join(' ')}
          style={style}
        >
          {children || <span>{label}</span>}
          <Input {...attrs} style={{ flex: 1 }} />
        </label>
      );
    }
    return (
      <label className={classes.LabeledCheckbox} style={style}>
        <Toggle {...attrs} />
        {children || <span style={{ flex: 1 }}>{label}</span>}
      </label>
    );
  }
}
