import { Box, Flex, SegmentedControl } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'
import React, { useEffect, useState } from 'react'

import { FormsMonthlycostExplorerResult, FormsUsageDetails } from 'dbaas/services/billing/interface'

import { CostsItem } from './helpers'
import { ProjectBillsTable } from './ProjectBillsTable'
import { ServiceBillsTable } from './ServiceBillsTable'
import { UsageDetailsTable } from './UsageDetailsTable'

const TABS = {
  PROJECT: 'project',
  SERVICE: 'service',
  USAGE: 'usage'
} as const

type TabType = (typeof TABS)[keyof typeof TABS]

interface InstanceBillsProps {
  projectData: CostsItem[]
  serviceData: CostsItem[]
  usageData: FormsUsageDetails[]
  loading: boolean
  currentBill?: FormsMonthlycostExplorerResult
  error: string
  isCurrentMonth: boolean
  ProjectExport?: React.ReactNode
  UsageExport?: React.ReactNode
  useCassandraServiceNames?: boolean
  hideResourceAndUsage?: boolean
}

export const InstanceBills: React.FC<InstanceBillsProps> = observer(
  ({
    projectData,
    serviceData,
    usageData,
    loading,
    currentBill,
    error,
    isCurrentMonth,
    ProjectExport,
    UsageExport,
    useCassandraServiceNames = false,
    hideResourceAndUsage = false
  }) => {
    const [activeTab, setActiveTab] = useState<TabType>(hideResourceAndUsage ? TABS.SERVICE : TABS.PROJECT)
    const tabOptions = hideResourceAndUsage
      ? [{ label: 'Summary by Service', value: TABS.SERVICE }]
      : [
          { label: 'Summary by Resource', value: TABS.PROJECT },
          { label: 'Summary by Service', value: TABS.SERVICE },
          { label: 'Usage Details', value: TABS.USAGE }
        ]

    useEffect(() => {
      if (hideResourceAndUsage && activeTab !== TABS.SERVICE) {
        setActiveTab(TABS.SERVICE)
      }
    }, [activeTab, hideResourceAndUsage])

    return (
      <Box mt={24}>
        <Flex justify="space-between" align="center">
          <SegmentedControl
            w={hideResourceAndUsage ? 180 : 504}
            radius="md"
            value={activeTab}
            onChange={(val) => setActiveTab((val as TabType) || TABS.PROJECT)}
            data={tabOptions}
            mb={12}
          />
          {activeTab === TABS.PROJECT && ProjectExport}
          {activeTab === TABS.USAGE && UsageExport}
        </Flex>
        <Box>
          {activeTab === TABS.PROJECT && (
            <ProjectBillsTable
              data={projectData}
              loading={loading}
              error={error}
              currentBill={currentBill}
              withServicePlan={true}
              withSorting={true}
            />
          )}

          {activeTab === TABS.SERVICE && (
            <ServiceBillsTable
              data={serviceData}
              loading={loading}
              error={error}
              isCurrentMonth={isCurrentMonth}
              currentBill={currentBill}
              withSorting={true}
              useCassandraServiceNames={useCassandraServiceNames}
            />
          )}

          {activeTab === TABS.USAGE && (
            <UsageDetailsTable
              data={usageData}
              loading={loading}
              error={error}
              columnNames={{
                cluster: 'Cluster & Instance Name'
              }}
              withSorting={true}
              useCassandraServiceNames={useCassandraServiceNames}
              tableProps={{
                mantineTableContainerProps: {
                  sx: {
                    maxHeight: '400px',
                    '@media (min-width: 1920px)': {
                      maxHeight: '700px'
                    }
                  }
                }
              }}
            />
          )}
        </Box>
      </Box>
    )
  }
)