import { Button } from 'antd';
import { useEffect } from 'react';
import { ChildrenModalMethods } from '../../type';
import CenterStats from './components/CenterStats';
import DataActivityCard from './components/DataActivityCard';
import DataFlowSection from './components/DataFlowSection';
import DataQualityCard from './components/DataQualityCard';
import styles from './index.less';
import { governanceData } from './mockData';

const DataGovernance = ({
  modalDispatch,
}: {
  modalDispatch: ChildrenModalMethods;
}) => {
  useEffect(() => {
    modalDispatch.setOptions({
      headerRight: () => {
        return (
          <Button
            type="text"
            style={{ marginLeft: 24 }}
            onClick={() => {
              modalDispatch.push(
                'DataActivity',
                {
                  title: '三级标签体系',
                },
                1,
              );
            }}
          >
            三级标签体系
          </Button>
        );
      },
    });
  }, []);
  return (
    <div className={styles.container}>
      <div className={styles.leftSection}>
        <DataActivityCard data={governanceData.uiData.dataActivity} />
        <div className={styles.flowSection}>
          <DataFlowSection
            sourceData={governanceData.sourceData}
            businessData={governanceData.businessData}
            baseInfoData={governanceData.baseInfoData}
            themeData={governanceData.themeData}
            specialData={governanceData.specialData}
          />
        </div>
      </div>

      <div className={styles.centerSection}>
        <CenterStats data={governanceData.centerStats} />
      </div>

      <div className={styles.rightSection}>
        <DataQualityCard data={governanceData.uiData.dataQuality} />
        {/* <div className={styles.themeSection}>
          <div className={styles.themeData}>
          </div>
          <div className={styles.specialData}>
          </div>
        </div> */}
      </div>
    </div>
  );
};

export default DataGovernance;
