import React, { useState } from 'react';
import styles from './style/index.module.less';
import CustomCard from '@/components/CustomCard/index';
import { Tabs } from '@arco-design/web-react';
import CompGrid from './compGrid';
import { getPubFlowList, getMyFlowList } from '@/api/flow';

const TabPane = Tabs.TabPane;

function CompositeCompLibrary() {
  const [activeKey, setActiveKey] = useState<'minePage' | 'publicList'>('minePage');

  const handelChangeTabs = (key) => {
    setActiveKey(key);
  };

  return (
    <>
      <div className={styles['composite-comp-library-container']}>
        <CustomCard>
          <Tabs
            defaultActiveTab={activeKey}
            onChange={(e) => handelChangeTabs(e)}
          >
            <TabPane
              key="minePage"
              title={
                <span>
                  <span>我的子流程</span>
                </span>
              }
            >
              <CompGrid componentType="minePage" />
            </TabPane>
            <TabPane
              key="publicList"
              title={
                <span>
                  <span>公开子流程</span>
                </span>
              }>
              <CompGrid componentType="publicList" />
            </TabPane>
          </Tabs>
        </CustomCard>
      </div>
    </>
  );
}

export default CompositeCompLibrary;