// 数据流 头部组件
import React, { useEffect, useState } from 'react';
import { Button, Space } from 'antd';
// import { useLocation } from 'umi';
import { useLocation } from 'react-router-dom';
import { QxIcon } from '@/components';

// 样式
import cls from 'classnames';
import styles from './index.module.less';

const prefix = 'qx-data-flow__header';

interface FlowHeaderProps {
  handleClick?: (type: string) => void;
  type?: 'FLOW' | 'VERSION'; // 数据流 | 数据流详情页 | 流程版本
  renderLeft?: React.ReactNode;
  title?: string;
  renderRight?: React.ReactNode;
  extraStyles?: React.CSSProperties;
}

const FlowHeader: React.FC<FlowHeaderProps> = (props) => {
  const {
    handleClick,
    type = 'FLOW',
    renderLeft,
    title,
    renderRight,
    extraStyles,
  } = props;

  // @ts-ignore
  const { query } = useLocation();

  return (
    <header className={cls(styles[`${prefix}`])} style={extraStyles}>
      {!!renderLeft ? (
        renderLeft
      ) : (
        <div
          className={cls(styles[`${prefix}__left`])}
          onClick={() => {
            handleClick && handleClick('RETURN');
          }}
        >
          <QxIcon
            className={cls(styles[`${prefix}__left-return`])}
            type={'icon-common-arrow'}
          />
          <div className={cls(styles[`${prefix}__left-title`])}>
            {title || '数据流'}
          </div>
        </div>
      )}
      <div className={cls(styles[`${prefix}__right`])}>
        {!!renderRight ? (
          renderRight
        ) : (
          <>
            {type === 'FLOW' ? (
              <Button
                type="primary"
                // loading={false}
                onClick={() => {
                  handleClick && handleClick('ADD');
                }}
              >
                新建数据流
              </Button>
            ) : null}
          </>
        )}
      </div>
    </header>
  );
};

export default FlowHeader;