import React, { useMemo } from 'react';

import Wrap from '../wrap/Wrap';
import { Checkbox } from 'antd';
import { returnClass } from '../unit';

import '../g.scss';


function LabelTowCheckbox(props: ITowCheckbox) {
  const {
    oneLabel = 'label',
    towLabel,
    disabled = false,
    change,
    valueName,
    size,
    oneValue = false,
    twoValue = false,
    wrapStyle = { padding: '6px 20px' }
  } = props;
  const _change = (type: string, value: any) => {
    change?.(value,type );
  };
  const Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
      {valueName&& <div className={returnClass(size)} style={{maxWidth:62,marginRight:20}}>{valueName}</div>}
       <div className="zl-large-screen-unit-content">
        <Checkbox
          onChange={(e) => _change('oneValue', e.target.checked)}
          style={{ fontSize: 12 }}
          checked={oneValue}
          className="label-check-box"
          disabled={disabled}
        >
          {oneLabel}
        </Checkbox>
        <Checkbox
          onChange={(e) => _change('twoValue', e.target.checked)}
          style={{ fontSize: 12 }}
          checked={twoValue}
          className="label-check-box"
          disabled={disabled}
        >
          {towLabel}
          </Checkbox>
          </div>
      </Wrap>
    );
  }, [oneValue, twoValue]);

  return Redio;
}

export default LabelTowCheckbox;
export interface ITowCheckbox {
  oneLabel: string;
  oneValue: boolean;
  twoValue: boolean;
  towLabel: string;
  disabled?: boolean;
  change?: Function;
  wrapStyle?: React.CSSProperties;
  valueName?: string;
  size?: string;
}