import React from 'react';
import cx from 'classnames';
import Radios from '../../components/Radios';
import type {
  OptionsControlProps,
  Option,
} from './Options';
import {
  OptionsControl
} from './Options';
import {autobind, createObject} from '../../utils/helper';
import {ActionObject} from '../../types';
import {FormOptionsSchema} from '../../Schema';



/**
 * Radio 单选框。
 */
export interface RadiosControlSchema extends FormOptionsSchema {
  type: 'radios';

  /**
   * 每行显示多少个
   */
  columnsCount?: number;
}

export interface RadiosProps extends OptionsControlProps {
  placeholder?: any;
  columnsCount?: number;
  labelField?: string;
  /**
   * @deprecated 和checkbox的labelClassName有冲突，请用optionClassName代替
   */
  labelClassName?: string;
  /** 选项CSS类名 */
  optionClassName?: string;
}

export default class RadiosControl extends React.Component<RadiosProps, any> {
  static defaultProps: Partial<RadiosProps> = {
    columnsCount: 1
  };

  doAction(action: ActionObject, data: object, throwErrors: boolean) {
    const {resetValue, onChange} = this.props;
    const actionType = action?.actionType as string;

    if (actionType === 'clear') {
      onChange?.('');
    } else if (actionType === 'reset') {
      onChange?.(resetValue ?? '');
    }
  }

  @autobind
  async handleChange(option: Option) {
    const {
      joinValues,
      extractValue,
      valueField,
      onChange,
      dispatchEvent,
      options,
      data
    } = this.props;

    if (option && (joinValues || extractValue)) {
      option = option[valueField || 'value'];
    }

    const rendererEvent = await dispatchEvent(
      'change',
      createObject(data, {
        value: option,
        options
      })
    );
    if (rendererEvent?.prevented) {
      return;
    }

    onChange && onChange(option);
  }

  reload() {
    const reload = this.props.reloadOptions;
    reload && reload();
  }

  @autobind
  renderItemLabel(option: any, index: number){
    const {
      render,
      translate: __,
      menuTpl,
      data,
      labelField
    } = this.props;
    const labelText = String(option[labelField || 'label']);

    return menuTpl
      ? render(`checkboxes/${index}`, menuTpl, {
          data: createObject(data, option)
        })
      : labelText
  }

  render() {
    const {
      className,
      classPrefix: ns,
      value,
      onChange,
      disabled,
      joinValues,
      extractValue,
      delimiter,
      placeholder,
      options,
      inline = true,
      formMode,
      columnsCount,
      classPrefix,
      itemClassName,
      labelClassName,
      optionClassName,
      labelField,
      valueField,
      translate: __,
      optionType,
      level
    } = this.props;

    return (
      <Radios
        inline={inline || formMode === 'inline'}
        className={cx(`${ns}RadiosControl`, className)}
        value={typeof value === 'undefined' || value === null ? '' : value}
        disabled={disabled}
        onChange={this.handleChange}
        joinValues={joinValues}
        extractValue={extractValue!}
        delimiter={delimiter!}
        /** 兼容一下错误的用法 */
        labelClassName={optionClassName ?? labelClassName}
        labelField={labelField}
        valueField={valueField}
        placeholder={__(placeholder)}
        options={options}
        columnsCount={columnsCount}
        classPrefix={classPrefix}
        itemClassName={itemClassName}
        optionType={optionType}
        level={level}
        renderItemLabel={this.renderItemLabel}
      />
    );
  }
}

@OptionsControl({
  type: 'radios',
  sizeMutable: false
})
export class RadiosControlRenderer extends RadiosControl {
  static defaultProps = {
    multiple: false,
    inline: true
  };
}
