import * as React from 'react';
import classNames from 'classnames/bind';

import s from './Checkbox.module.scss';

const cn = classNames.bind(s);

interface ICheckboxProps {
  children?: React.ReactNode;
  color?: string;
  type?: string;
  submitted?: boolean;
  defaultChecked?: boolean;
  checked?: boolean;
  large?: boolean;
  radio?: boolean;
  value?: string | number;
  name: string;
  onChange?(): () => void;
}

export default class Checkbox extends React.Component<ICheckboxProps> {
  render() {
    const {
      color,
      type,
      children,
      submitted,
      value,
      onChange,
      checked,
      radio,
      large,
      name,
      ...props
    } = this.props;
    const isRadio = type === 'radio' || radio;

    return (
      <div className={cn(s.checkbox, { isRadio, submitted, large })}>
        <label // eslint-disable-line
          className={s.checkbox__label}
        >
          <div className={s.checkbox__group}>
            <input
              id={name}
              name={name}
              type={type || 'checkbox'}
              className={s.checkbox__input}
              checked={checked}
              value={value}
              onChange={onChange}
              {...props}
            />

            <span className={cn(s.checkbox__check, `color-${color}`)}>
              <span className={cn(s.checkbox__after, `color-${color}`)} />
            </span>
          </div>

          <div className={s.checkbox__text}>{children}</div>
        </label>
      </div>
    );
  }
}