import React, { useMemo } from 'react';

import Wrap from '../wrap/Wrap';
import Icon from 'src/components/Icon/index';
import { Input } from 'antd';
import '../g.scss';

function LabelTwoInput(props: ILabelIcon) {
  const {
    change,
    size = 'large',
    oneValue = '',
    twoValue = '',
    onePlaceholderValue,
    twoPlaceholderValue,
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <Input
          value={oneValue}
          placeholder={onePlaceholderValue}
          onPressEnter={(e) => {
            e.preventDefault();
            e.stopPropagation();
            change(e.target.value, 'onevalueblur');
          }}
          onChange={(e) => change(e.target.value, 'onevaluechange')}
          onBlur={(e) => change(e.target.value, 'onevalueblur')}
        />
        <Icon name="icon-minus" style={{ color: '#fff' }} />
        <Input
          value={twoValue}
          placeholder={twoPlaceholderValue}
          onPressEnter={(e) => {
            e.preventDefault();
            e.stopPropagation();
            change(e.target.value, 'twovalueblur');
          }}
          onChange={(e) => change(e.target.value, 'twovaluechange')}
          onBlur={(e) => change(e.target.value, 'twovalueblur')}
        />
      </Wrap>
    );
  }, [oneValue, onePlaceholderValue, twoValue, twoPlaceholderValue]);

  return Redio;
}

export default LabelTwoInput;

export interface ILabelIcon {
  oneValue?: string;
  twoValue?: string;
  onePlaceholderValue?: string;
  twoPlaceholderValue?: string;
  size?: string;
  change?: Function;
  wrapStyle?: React.CSSProperties;
}