import React from 'react';
import { Space, Spin } from '@douyinfe/semi-ui';
import { useUserMigrationData } from '../../../../hooks/users/useUserMigrationData';
import BatchList from './BatchList';
import BatchDetail from './BatchDetail';
import ConflictResolver from './ConflictResolver';
import ExecutionPanel from './ExecutionPanel';

export default function UserMigrationCenter() {
  const data = useUserMigrationData();

  return (
    <Spin spinning={data.loading}>
      <Space vertical align='start' style={{ width: '100%' }} spacing='medium'>
        <BatchList {...data} />
        {data.selectedBatch && (
          <>
            <ExecutionPanel {...data} />
            <ConflictResolver {...data} />
            <BatchDetail {...data} />
          </>
        )}
      </Space>
    </Spin>
  );
}
