import { Card, Typography, Descriptions, Divider, Table, Button } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { capitalize } from 'lodash'
import { useState } from 'react'
import { Link, useParams } from 'react-router-dom'

import {
  deleteCustomer,
  useGetCustomersByPartnerId,
  useGetTenantByID
} from 'apiClient/services/account'
import { FormsPartnerCustomer } from 'apiClient/services/account/interface'
import ModalForm from 'components/ModalForm'
import { ListToolBar } from 'components/Table'
import { formatTime } from 'utils/time'

import { CreateMCPOCustomer } from './Create'

const { Title } = Typography

export const CPPOQuit: React.FC<
  React.PropsWithChildren<{
    customerId: string
    mspName: string
    onDelete?: () => void
  }>
> = ({ onDelete, customerId, mspName }) => {
  const [visible, setVisible] = useState(false)
  const onSubmit = async (data: FormsPartnerCustomer) => {
    await deleteCustomer({
      ...data,
      partner_type: 'MCPO',
      customer_org_id: customerId
    })
    setVisible(false)
    onDelete?.()
  }

  const renderFields = () => (
    <>
      <p>Do you confirm to quit MSP customer name from {mspName}?</p>
      <p>
        The MSP customer organization will become a direct organization of TiDB
        Cloud after quit.
      </p>
    </>
  )

  return (
    <div>
      <Button type="link" onClick={() => setVisible(true)}>
        Quit
      </Button>
      <ModalForm
        title="Quit MCPO"
        visible={visible}
        name="delete-customer-form"
        onSubmit={onSubmit}
        onCancel={() => setVisible(false)}
        destoryOnClose={true}
        getFields={renderFields}
      ></ModalForm>
    </div>
  )
}

export const MCPODetails: React.FC<React.PropsWithChildren<{}>> = () => {
  const { org_id } = useParams<{ org_id: string }>()
  const { data } = useGetTenantByID(org_id, {
    query: { refetchOnWindowFocus: false, refetchInterval: false }
  })
  const [pageConfig, setPageConfig] = useState({
    page: 1,
    pageSize: 10
  })

  const {
    data: customers,
    refetch,
    isLoading
  } = useGetCustomersByPartnerId(
    org_id,
    {
      page: pageConfig.page,
      per_page: pageConfig.pageSize
    },
    {
      query: { refetchOnWindowFocus: false, refetchInterval: false }
    }
  )

  const columns: ColumnsType<FormsPartnerCustomer> = [
    {
      title: 'ID',
      dataIndex: 'customer_org_id',
      render(value) {
        return <Link to={`/orgs/${value}`}>{value}</Link>
      }
    },
    {
      title: 'MCPO Customer',
      dataIndex: 'name'
    },
    {
      title: 'Email',
      dataIndex: 'email'
    },
    {
      title: 'Status',
      dataIndex: 'status',
      render(value) {
        return capitalize(value)
      }
    },
    {
      title: 'Effective At',
      dataIndex: 'effected_at',
      render(value) {
        return formatTime(value, undefined, 'YYYY-MM-DD HH:mm:ssZ', 0)
      }
    },
    {
      title: 'Expiration At',
      dataIndex: 'expired_at',
      render(value) {
        if (!value) {
          return '-'
        }
        return formatTime(value, undefined, 'YYYY-MM-DD HH:mm:ssZ', 0)
      }
    }
  ]

  const partner = data?.data || {}

  return (
    <div>
      <Card title={<Title level={4}>{partner.name}</Title>} bordered={false}>
        <Descriptions>
          <Descriptions.Item label="ID">
            <Link to={`/orgs/${partner.id}`}>{partner.id}</Link>
          </Descriptions.Item>
          <Descriptions.Item label="Email">{partner.email}</Descriptions.Item>
        </Descriptions>
      </Card>
      <Divider></Divider>
      <div>
        <Title level={5}>MCPO Customers</Title>
        <ListToolBar
          reload={async () => {
            await refetch()
          }}
          actions={[
            <CreateMCPOCustomer
              partner_org_id={org_id}
              onCreate={() => {
                refetch()
              }}
            />
          ]}
        />
      </div>
      <Table
        columns={columns}
        dataSource={customers?.data || []}
        loading={isLoading}
      ></Table>
    </div>
  )
}

export default MCPODetails