import { Group, Table, Typography } from '@tidbcloud/uikit'
import { isNil } from 'lodash-es'
import { useMemo } from 'react'

import {
  Dedicatedv1beta1ComponentType,
  EstimatePriceResponsePrice
} from 'dbaas/services/api-clients/v2023/cluster-management/v1beta1/interface'
import { precision } from 'dbaas/utils/format'

import { processPrecision } from '../../helpers'

const CostCell: React.FC<React.PropsWithChildren<{ amount?: number; deprecated?: boolean }>> = ({
  amount,
  deprecated
}) => {
  return (
    <Typography
      variant="body-lg"
      c={deprecated ? 'carbon.6' : undefined}
      sx={deprecated ? { textDecoration: 'line-through' } : undefined}
    >
      {!isNil(amount) ? `$ ${processPrecision(amount)}` : '-'}
    </Typography>
  )
}

interface CostDetailProps {
  costs: EstimatePriceResponsePrice[]
}

export const CostDetail: React.FC<React.PropsWithChildren<CostDetailProps>> = ({ costs }) => {
  const [tidb, tiproxy, tikv, tiflash] = useMemo(() => {
    return [
      {
        name: 'tidb',
        type: Dedicatedv1beta1ComponentType.TIDB
      },
      {
        name: 'tiproxy',
        type: Dedicatedv1beta1ComponentType.TIPROXY
      },
      {
        name: 'tikv',
        type: Dedicatedv1beta1ComponentType.TIKV
      },
      {
        name: 'tiflash',
        type: Dedicatedv1beta1ComponentType.TIFLASH
      }
    ].map(({ name, type }) => {
      const el = costs.find((el) => el.componentType === type)
      const compute =
        type === Dedicatedv1beta1ComponentType.TIPROXY ? el?.computeDiscountedPrice : el?.computeOriginalPrice
      const storage =
        type === Dedicatedv1beta1ComponentType.TIPROXY ? el?.storageDiscountedPrice : el?.storageOriginalPrice
      const sum = precision(processPrecision(compute ?? 0) + processPrecision(storage ?? 0))

      return {
        name,
        compute,
        storage,
        sum
      }
    })
  }, [costs])

  return (
    <Table
      verticalSpacing={4}
      sx={(t) => ({ borderBottom: `1px solid ${t.colors.carbon[5]}`, borderTop: `1px solid ${t.colors.carbon[5]}` })}
    >
      <Table.Thead bg="unset">
        <Table.Tr>
          <Table.Th></Table.Th>
          <Table.Th>
            <Typography variant="body-sm">Compute</Typography>
          </Table.Th>
          <Table.Th>
            <Typography variant="body-sm">Storage</Typography>
          </Table.Th>
          <Table.Th>
            <Typography variant="body-sm">Sum</Typography>
          </Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>
        <Table.Tr>
          <Table.Td>
            <Typography variant="title-sm">TiDB</Typography>
          </Table.Td>
          <Table.Td>
            <CostCell amount={tidb.compute} />
          </Table.Td>
          <Table.Td>-</Table.Td>
          <Table.Td>
            <CostCell amount={tidb.sum} />
          </Table.Td>
        </Table.Tr>
        {(tiproxy.sum || tiproxy.storage) && (
          <Table.Tr>
            <Table.Td>
              <Typography variant="title-sm">TiProxy</Typography>
            </Table.Td>
            <Table.Td>
              <Group gap={4}>
                <CostCell amount={tiproxy.compute} />
              </Group>
            </Table.Td>
            <Table.Td>-</Table.Td>
            <Table.Td>
              <Group gap={4}>
                <CostCell amount={tiproxy.sum} />
              </Group>
            </Table.Td>
          </Table.Tr>
        )}
        <Table.Tr>
          <Table.Td>
            <Typography variant="title-sm">TiKV</Typography>
          </Table.Td>
          <Table.Td>
            <CostCell amount={tikv.compute} />
          </Table.Td>
          <Table.Td>
            <CostCell amount={tikv.storage} />
          </Table.Td>
          <Table.Td>
            <CostCell amount={tikv.sum} />
          </Table.Td>
        </Table.Tr>
        {!!tiflash.compute && (
          <Table.Tr>
            <Table.Td>
              <Typography variant="title-sm">TiFlash</Typography>
            </Table.Td>
            <Table.Td>
              <CostCell amount={tiflash.compute} />
            </Table.Td>
            <Table.Td>
              <Group gap={4}>
                <CostCell amount={tiflash.storage} />
              </Group>
            </Table.Td>
            <Table.Td>
              <CostCell amount={tiflash.sum} />
            </Table.Td>
          </Table.Tr>
        )}
      </Table.Tbody>
    </Table>
  )
}