import { Stack } from '@mui/material'
import { useQuery } from 'react-query'
import PageHeader from '../PageHeader'
import Spinner from '../Spinner'
import { AddConnectionDrawerButton } from './components/AddConnectionDrawerButton'
import { ConnectionCard } from './components/ConnectionCard'
import { getPunchLogsDatabaseConfigByTenant } from './service'

const DatabaseConfiguration = ({ type }) => {
  const { data: punchLogsDatabaseConfig, isLoading } = useQuery(
    'punch-logs-database-config',
    getPunchLogsDatabaseConfigByTenant,
  )

  if (isLoading) return <Spinner />
  return (
    <Stack>
      <PageHeader title="Punch Logs Database Configuration" />
      {!punchLogsDatabaseConfig ? (
        <AddConnectionDrawerButton type={type} />
      ) : (
        <ConnectionCard data={punchLogsDatabaseConfig} />
      )}
    </Stack>
  )
}

export default DatabaseConfiguration
