import { lazy, ReactNode } from 'react'
import { Card, Flex } from 'antd'
import DataRender from './DataRender'
import { useDataQuery } from '@/hooks/useQuery'

const ViewDataFiledButtonModal = lazy(() => import('./ViewDataFieldButtonModal'))

export default function DataWrap({
  title,
  headerRender,
  buttons,
  extraButtons,
  empty,
}: {
  title: string
  buttons?: ReactNode
  extraButtons?: ReactNode
  headerRender?: (data: any) => ReactNode
  empty?: ReactNode
}) {
  const { data, isPending } = useDataQuery()

  const columns: any = data.title.map((item: any) => {
    return {
      title: item.name,
      dataIndex: item.english_name,
      align: 'center',
      minWidth: 120,
    }
  })

  return (
    <Flex gap={20} style={{ height: '100%' }}>
      <Card className="app-card" title={title} style={{ flex: 1, overflowX: 'hidden' }}>
        {empty && !data.info ? (
          empty
        ) : (
          <>
            {headerRender ? (
              headerRender(data)
            ) : (
              <Flex justify="space-between" style={{ marginBottom: '20px' }}>
                <Flex wrap gap={10}>
                  {buttons}
                </Flex>
                <Flex wrap gap={10}>
                  {extraButtons}
                  <ViewDataFiledButtonModal></ViewDataFiledButtonModal>
                </Flex>
              </Flex>
            )}
            <DataRender rowKey={'pk_id'} loading={isPending} dataSource={data.list} columns={columns} />
          </>
        )}
      </Card>
    </Flex>
  )
}
