import React, { Component } from 'react';
import './index.less';

export class SpecialRadio extends Component {
  render() {
    const { checked, children, onClick } = this.props;
    return (
      <div className={`g-special-radio-wrapper ${checked ? 'checked' : ''}`}>
        <div className="g-special-radio" onClick={() => onClick && onClick()}>
          {children}
        </div>
      </div>
    );
  }
}

export class SpecialRadioGroup extends Component {
  onClickItem(key) {
    const { onChange } = this.props;
    if (onChange) onChange(key);
  }

  render() {
    const { list = [], value } = this.props;
    return (
      <div className="g-special-radio-group">
        {list.map(item => {
          return (
            <SpecialRadio checked={value === item.key} onClick={() => this.onClickItem(item.key)}>
              {item.label}
            </SpecialRadio>
          );
        })}
      </div>
    );
  }
}

export default class Radio extends Component {
  render() {
    const { checked, children, onClick } = this.props;
    return (
      <div className={`g-radio-wrapper ${checked ? 'checked' : ''}`}>
        <div className="g-radio" onClick={() => onClick && onClick()}>
          {children}
        </div>
      </div>
    );
  }
}

export class RadioGroup extends Component {
  onClickItem(key) {
    const { onChange } = this.props;
    if (onChange) onChange(key);
  }

  render() {
    const { list = [], value } = this.props;
    return (
      <div className="g-radio-group">
        {list.map(item => {
          return (
            <Radio checked={value === item.key} onClick={() => this.onClickItem(item.key)}>
              {item.label}
            </Radio>
          );
        })}
      </div>
    );
  }
}