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

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

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

  render() {
    const { list = [], value, values = [], theme } = this.props;
    return (
      <div className="g-special-radio-group">
        {list.map(item => {
          return (
            <SpecialRadio
              theme={theme}
              checked={value === item.value || values.indexOf(item.value) >= 0}
              onClick={() => this.onClickItem(item.value)}
            >
              {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>
    );
  }
}