import { Accordion, Center, Group, Typography } from '@tidbcloud/uikit'
import { MRT_ColumnDef, ProTable } from '@tidbcloud/uikit/biz'
import { useState } from 'react'

import {
  V1beta1ClusterStorageNodeSetting,
  V1beta1NodeInstance
} from 'dbaas/services/api-clients/v2023/dedicated/v1beta1/interface'

import { ResourceCard, ResourceStatus } from './comp/ResourceStatus'
import { ResourceSummary } from './comp/ResourceSummary'
import { pageSize, tableStyle } from './const'
import { renderSpec, renderSpecVersion, renderStorage, useAccordionStyle, useFilterInstanceData } from './helper'
import { NodeInstanceStatus, NodeMapLayout } from './NodeMap'

export const TiFlashMap = ({
  layout,
  status,
  modifying,
  data,
  nodeSetting,
  specVersionEnabled
}: {
  layout: NodeMapLayout
  status: NodeInstanceStatus
  modifying: boolean
  data: V1beta1NodeInstance[]
  nodeSetting?: V1beta1ClusterStorageNodeSetting
  specVersionEnabled?: boolean
}) => {
  const filteredData = useFilterInstanceData(data, status)

  const [page, setPage] = useState(0)

  const columns: MRT_ColumnDef<V1beta1NodeInstance>[] = [
    {
      header: 'Name',
      accessorKey: 'instanceId'
    },
    {
      header: 'Status',
      accessorFn: (row) => <ResourceStatus status={row.state} />
    },
    {
      header: 'Available Zone',
      accessorFn: (row) => `AZ: ${row.availabilityZone}`
    },
    {
      header: 'Storage',
      accessorFn: (row) => renderStorage(row.storageSizeGi ?? 0)
    },
    {
      header: 'StorageType',
      accessorKey: 'storageType'
    },
    {
      header: 'vCPU, RAM',
      size: 300,
      accessorFn: (row) =>
        renderSpec(row.vCpu ?? 0, row.memorySizeGi ?? 0) + renderSpecVersion(row.nodeSpecVersion, specVersionEnabled)
    }
  ]

  const nodes =
    filteredData.length === 0 ? (
      <Center>No nodes.</Center>
    ) : (
      <Group>
        {filteredData.map((v) => (
          <ResourceCard
            key={v.instanceId}
            name={v.instanceId ?? ''}
            state={v.state}
            availabilityZone={v.availabilityZone ?? ''}
          />
        ))}
      </Group>
    )

  const showPagination = filteredData.length > pageSize

  const accordionStyle = useAccordionStyle(layout, showPagination)

  return (
    <Accordion defaultValue="TiFlash" variant="contained" styles={accordionStyle}>
      <Accordion.Item value="TiFlash">
        <Accordion.Control>
          <ResourceSummary
            title="TiFlash"
            desc="The analytical storage node that replicates data from TiKV in real-time and supports real-time analytical workloads."
            modifying={modifying}
            data={data}
            spec={
              <Typography variant="label-lg">
                {nodeSetting?.nodeSpecDisplayName}, {nodeSetting?.storageSizeGi} GiB Storage
              </Typography>
            }
          />
        </Accordion.Control>
        <Accordion.Panel>
          {layout === 'block' && nodes}
          {layout === 'table' && (
            <ProTable
              {...tableStyle}
              columns={columns}
              emptyMessage="No Data"
              data={filteredData}
              enablePagination
              rowCount={showPagination ? filteredData.length : undefined}
              state={{ pagination: { pageIndex: page, pageSize } }}
              pagination={{ onChange: (page) => setPage(page - 1) }}
            ></ProTable>
          )}
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  )
}