import React, { memo, useRef, useContext, useState } from 'react';
import { Drawer, Button } from 'antd';
import {
  IDrawerComponent,
  BuilderContext,
  useHistory,
  useDrawer,
} from '@qx/flow';
import { QxIcon } from '@/components';
import './index.less';
import cls from 'classnames';
import commonStyles from '@/components/header/index.module.less';
// 头部相关
import FlowHeader from '../header';
import FlowNameEditor from '../name-editor';
import { merge } from 'lodash-es';

const ConfigDrawerContainer: React.FC<ConfigDrawerContainerProps> = (props) => {
  const configRef = useRef<any>();

  const { selectedNode, setSelectedNode, onChange, nodes } =
    useContext(BuilderContext);

  const [showEdit, setShowEdit] = useState<boolean>(false);

  const { pushHistory } = useHistory();

  const { saveDrawer } = useDrawer();

  const handleChange = async (values: any, extra: Record<string, any>) => {
    if (selectedNode) {
      selectedNode.data = values;
      try {
        await configRef.current?.validateFields?.();
        selectedNode.validateStatusError = false;
      } catch (error) {
        selectedNode.validateStatusError = true;
      }

      merge(setSelectedNode, extra);
      onChange([...nodes], 'config-change');
    }
  };

  const handleClose = () => {
    if (selectedNode) {
      selectedNode.configuring = false;
    }
    setSelectedNode(undefined);
    pushHistory();
    onChange([...nodes], 'close-drawer');
  };
  // console.log('数据展示 nodes ===', nodes);
  // console.log('数据展示 selectedNode ===', selectedNode);

  return (
    <Drawer
      {...props}
      title={null}
      closable={false}
      maskClosable={true}
      drawerStyle={{
        boxShadow: '-4px 0 16px 0 rgba(36, 40, 53, 0.1)',
      }}
      width={480}
      destroyOnClose={true}
      className={'qx-df-start-setting-drawer'}
      onClose={handleClose}
    >
      <FlowHeader
        extraStyles={{ padding: '0 24px' }}
        renderLeft={
          <FlowNameEditor
            nodeName={selectedNode?.name || ''}
            nodeIcon={<QxIcon type={'icon-two-dimensional-code'} />}
            editTitle={showEdit}
            setEditTitle={setShowEdit}
            onChange={(val) => {
              if (selectedNode) {
                selectedNode.name = val;
                onChange([...nodes], 'config-change');
              }
            }}
          />
        }
        renderRight={
          <Button
            className={cls(commonStyles['qx-data-flow__modal-close'])}
            type="text"
            onClick={handleClose}
            icon={<QxIcon type={'icon-close'} />}
          />
        }
      />
      {props.children &&
        React.cloneElement(props.children as React.ReactElement, {
          ref: configRef,
          onChange: handleChange,
        })}
    </Drawer>
  );
};

interface ConfigDrawerContainerProps extends IDrawerComponent {}

export default memo(ConfigDrawerContainer);