/*
 * @Author: your name
 * @Date: 2021-12-17 14:41:42
 * @Description:
 * @FilePath: \zl-business\src\components\Unit\inputAndDel\index.tsx
 */
import React, { useMemo } from 'react';

import Wrap from '../wrap/Wrap';
import Icon from '../../Icon/index';

import { returnClass } from '../unit';
import { Input } from 'antd';
import '../g.scss';

function LabelInputAndDelect(props: IInputAndDel) {
  const {
    title = 'label',
    value = '',
    change,
    size = 'normal',
    paddingSize = 'normal',
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className={returnClass(paddingSize)}>{title}</div>
        <div
          className={
            size === 'normal'
              ? 'zl-large-screen-setting-unit-content'
              : 'zl-large-screen-setting-unit-content-large'
          }
        >
          <Input
            value={value}
            size="small"
            onChange={(e) => change?.(e.target.value, 'change')}
            onPressEnter={(e) => {
              e.preventDefault();
              e.stopPropagation();
              change?.(e.target.value, 'blur');
            }}
            onBlur={(e) => change?.(e.target.value, 'blur')}
          />
          <Icon
            name="icon-ashbin"
            style={{ width: 16, height: 12 }}
            click={(e) => change?.(e, 'del')}
          />
        </div>
      </Wrap>
    );
  }, [title, value, paddingSize]);

  return Redio;
}

export default LabelInputAndDelect;

export interface IInputAndDel {
  title?: string | number;
  value?: string | number;
  change?: Function;
  size?: string;
  paddingSize?: string;
  wrapStyle?: React.CSSProperties;
}