import React, { useState, useCallback, useEffect } from 'react';
import isEqual from 'lodash/isEqual';
import ItemHeader from './ItemHeader';
import ItemContent from './ItemContent';
import message from 'components/message';
import EasyvModal, { useConfirmRef } from 'components/EasyvModal';
import styles from './Item.less';

function FilterItem({
  id,
  name = '',
  onPreviewContent,
  content = '',
  callbackKeys = [],
  usedComponents = [],
  onSubmit,
  onDelete,
}: {
  id: number;
  name: string;
  content: string;
  callbackKeys: any;
  usedComponents: any[];
  onSubmit: (param) => any;
  onPreviewContent?: (param) => void;
  onDelete: (param) => any;
}) {
  const [collapsed, setCollapsed] = useState(true);
  const [editable, setEditable] = useState(false);
  const [localName, setLocalName] = useState(name);
  const [localCallbackKeys, setLocalCallbackKeys] = useState(callbackKeys);
  const [localContent, setLocalContent] = useState(content);
  const deleteRef = useConfirmRef();

  useEffect(() => {
    setLocalName(name);
  }, [name]);

  useEffect(() => {
    setLocalCallbackKeys(callbackKeys);
  }, [callbackKeys]);

  useEffect(() => {
    setLocalContent(content);
  }, [content]);

  useEffect(() => {
    if (!editable && name !== localName) {
      if (localName) {
        onSubmit({
          id: id,
          name: localName,
        });
      } else {
        setLocalName(name);
        message.error('过滤器名称不能为空');
      }
    }
  }, [editable]);

  const unsaved = !isEqual(localContent, content) || !isEqual(localCallbackKeys, callbackKeys);

  const handleSubmit = useCallback(async () => {
    if (localContent) {
      if (unsaved) {
        const param: any = {
          id,
        };
        if (!isEqual(localContent, content)) {
          param.content = localContent;
        }
        if (!isEqual(localCallbackKeys, callbackKeys)) {
          param.callbackKeys = localCallbackKeys;
        }
        const result = await onSubmit(param);

        if (!result) {
          return;
        }
      }

      setCollapsed(true);
    } else {
      message.error('过滤器内容不能为空');
    }
  }, [id, localContent, localCallbackKeys]);

  const handleCancel = useCallback(() => {
    setCollapsed(true);
    setLocalContent(content);
    setLocalCallbackKeys(callbackKeys);
  }, [id, content, callbackKeys]);

  const handleCommitDelete = useCallback(() => {
    onDelete({
      ids: [id],
      components: usedComponents.map((d) => d.id),
    });
  }, [id, usedComponents]);

  return (
    <li className={styles.li}>
      <ItemHeader
        className={styles.header}
        collapsed={collapsed}
        editable={editable}
        name={localName}
        unsaved={unsaved}
        onCollapsedChange={setCollapsed}
        onNameChange={setLocalName}
        onDelete={() => deleteRef.current?.show()}
        onEditChange={setEditable}
        usedComponents={usedComponents}
      />
      <ItemContent
        content={localContent}
        callbackKeys={localCallbackKeys}
        collapsed={collapsed}
        onPreviewContent={onPreviewContent}
        onContentChange={setLocalContent}
        onCallbackKeysChange={setLocalCallbackKeys}
        onSubmit={handleSubmit}
        onCancel={handleCancel}
      />
      <EasyvModal.Confirm
        title="删除过滤器"
        content="此操作执行后不可逆，是否确认删除？"
        ref={deleteRef}
        onOk={handleCommitDelete}
      />
    </li>
  );
}

export default FilterItem;
