import React, { useState, useCallback, useEffect } from 'react';
import classNames from 'classnames';
import FilterHeader from '../../RightZoneBar/Filter/ItemHeader';
import FilterContent from '../../RightZoneBar/Filter/ItemContent';
import FilterPreview from './FilterTest';
import styles from './Item.less';
import message from 'components/message';

function FilterAdd({ originData, onRemove, onSubmit, componentId, drawerStates }) {
  const [collapsed, setCollapsed] = useState(false);
  const [editable, setEditable] = useState(true);
  // const [enable, setEnable] = useState(true);
  const [name, setName] = useState('新建过滤器');
  const [callbackKeys, setCallbackKeys] = useState([]);
  const [content, setContent] = useState('return data;');
  const [previewVisible, setPreviewVisible] = useState(false);

  const handleSubmit = async () => {
    if (name && content) {
      onSubmit({
        // enable: enable,
        name: name,
        content: content,
        callbackKeys: callbackKeys,
      });
    } else {
      if (!name) {
        message.error('过滤器名称不能为空');
      } else if (!content) {
        message.error('过滤器内容不能为空');
      }
    }
  };

  useEffect(() => {
    if (!drawerStates) {
      const nweLocalContent = {
        localContent: content,
        localName: name,
        localCallbackKeys: callbackKeys,
      };
      window.sessionStorage.setItem(componentId, JSON.stringify(nweLocalContent));
    } else {
      // 开启的时候
      let nweLocalContent: any = window.sessionStorage.getItem(componentId);
      try {
        nweLocalContent = nweLocalContent && JSON.parse(nweLocalContent);
      } catch (err) {
        //
      }
      if (nweLocalContent) {
        nweLocalContent?.localName && setName(nweLocalContent?.localName);
        nweLocalContent?.localContent && setContent(nweLocalContent?.localContent);
        nweLocalContent?.localCallbackKeys && setCallbackKeys(nweLocalContent?.localCallbackKeys);
      }
    }
  }, [drawerStates]);

  const handlePreview = useCallback(() => {
    setPreviewVisible(true);
  }, []);

  const handleClose = useCallback(() => {
    setPreviewVisible(false);
  }, []);

  return (
    <li className={styles.container} onMouseLeave={() => setPreviewVisible(false)}>
      <div className={styles.header}>
        {/* <label className={styles.label}>
          <Checkbox className="dark" checked={enable} onChange={e => setEnable(e.target.checked)} />
        </label> */}

        <FilterHeader
          className={styles.right}
          collapsed={collapsed}
          editable={editable}
          unsaved={true}
          name={name}
          onCollapsedChange={setCollapsed}
          onNameChange={setName}
          onEditChange={setEditable}
          onDelete={onRemove}
        />
      </div>

      <div className={classNames(styles.content, { collapsed: collapsed })}>
        <FilterContent
          showTest={true}
          collapsed={collapsed}
          content={content}
          callbackKeys={callbackKeys}
          onContentChange={setContent}
          onCallbackKeysChange={setCallbackKeys}
          onSubmit={handleSubmit}
          onCancel={onRemove}
          onPreview={handlePreview}
        />
      </div>

      <FilterPreview
        visible={previewVisible}
        onClose={handleClose}
        originData={originData}
        content={content}
      />
    </li>
  );
}

export default FilterAdd;
