import React, { useState } from 'react';
import classNames from 'classnames';
import styles from './ItemHeader.less';
import { connect } from 'react-redux';
import { Input } from '@easyv/react-gui';
import message from 'components/message';
import EasyvTooltip from 'components/EasyvTooltip';
import { copyScreenData, updateDataContainer } from 'models/data-container';
import { CopySquareOutlined, DeleteSquareOutlined, EditOutlined } from '@easyv/react-icons';
function ItemHeader({
  className,
  name,
  copyScreenData,
  updateDataContainer,
  id,
  enable = false,
  onEditChange
}: {
  className?: string;
  name: string;
  id: number;
  enable: boolean;
  copyScreenData: (x) => any;
  updateDataContainer: (x, y) => any;
  onEditChange: (edit: any) => any;
}): React.ReactElement {
  const [value, setValue] = useState<string>('');
  const [isEdit, setEdit] = useState(false);
  const inputClassName = `data-box-item-${id}`;

  const handleEditChange = (e: { stopPropagation: () => void }) => {
    e.stopPropagation();
    // 单击
    onEditChange({
      type: 'edit',
      data: {
        id
      }
    });
  };

  const handleDelete = (e: { stopPropagation: () => void }) => {
    e.stopPropagation();
    onEditChange({
      type: 'delete',
      data: {
        id,
        enable
      }
    });
  };
  const handleCopy = async (e: { stopPropagation: () => void }) => {
    e.stopPropagation();
    const hide = message.loading('复制中...', 0);
    const result = await copyScreenData(id);
    if (result) {
      message.success('复制成功');
    }
    hide();
  };
  const handleBlur = async () => {
    if (!value) {
      message.warning('请输入有效值');
      setEdit(false);
      return;
    }

    if (value !== name) {
      const hide = message.loading('更新中...', 0);
      const result = await updateDataContainer(id, {
        name: value
      });
      hide();
      result && message.success('修改成功');
    }

    setEdit(false);
  };

  const handleInpuChange = (e) => {
    const v = e.target.value.trim();
    setValue(v);
  };

  const handleEdit = () => {
    setValue(name);
    setEdit(true);
    setTimeout(() => {
      const input: any = document.querySelector(`input[name=${inputClassName}]`);
      input?.focus();
    }, 0);
  };

  return (
    <div className={classNames(styles.container, className)}>
      <div className={classNames([styles.firstItem, enable ? styles.activate : ''])} style={{ display: 'flex', alignItems: 'center' }}>
        {isEdit ? (
          <Input
            name={inputClassName}
            maxLength={20}
            value={value}
            onPressEnter={handleBlur}
            onBlur={handleBlur}
            onChange={handleInpuChange}
          />
        ) : (
          <span onClick={handleEditChange} className={styles.name}>
            {<span title={`${name}-${id}`}>{name}</span>}
          </span>
        )}
      </div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <span className={classNames(styles.icon)} onClick={() => handleEdit()}>
          <EasyvTooltip title="重命名" placement="top">
            <EditOutlined className={classNames(styles.easyv_icon)} />
          </EasyvTooltip>
        </span>
        <span className={classNames(styles.icon)} onClick={handleCopy}>
          <EasyvTooltip title="复制" placement="top">
            <CopySquareOutlined className={classNames(styles.easyv_icon)} />
          </EasyvTooltip>
        </span>
        <span className={classNames(styles.icon)} onClick={handleDelete}>
          <EasyvTooltip title="删除" placement="top">
            <DeleteSquareOutlined className={classNames(styles.easyv_icon)} />
          </EasyvTooltip>
        </span>
      </div>
    </div>
  );
}

export default connect(undefined, {
  copyScreenData,
  updateDataContainer
})(ItemHeader);
