import { Tabs, Card } from 'antd'
import React from 'react'

import { FormsBillingConfig } from 'apiClient/services/billing/interface'

import { Bills } from './Bills'
import Invovices from './Invoices'
import { PartnerBills } from './PartnerBills'

const { TabPane } = Tabs

enum BillingTabs {
  INVOICES = 'Invoices',
  BILLS = 'Bills',
  METERING = 'Metering'
}

export const BillingPanel: React.FC<
  React.PropsWithChildren<{
    billingConfig: FormsBillingConfig
    isPartner: boolean
  }>
> = ({ billingConfig, isPartner }) => {
  return (
    <Card>
      <Tabs defaultActiveKey={BillingTabs.BILLS}>
        <TabPane tab={BillingTabs.BILLS} key={BillingTabs.BILLS}>
          {isPartner ? (
            <PartnerBills billingConfig={billingConfig} />
          ) : (
            <Bills billingConfig={billingConfig} />
          )}
        </TabPane>
        <TabPane tab={BillingTabs.INVOICES} key={BillingTabs.INVOICES}>
          <Invovices billingConfig={billingConfig} />
        </TabPane>
      </Tabs>
    </Card>
  )
}