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

import {
  useGetCustomersByPartnerId,
  useGetResaleCustomerSignupUrl,
  useGetTenantByID
} from 'apiClient/services/account'
import { FormsPartnerCustomer } from 'apiClient/services/account/interface'
import { ListToolBar } from 'components/Table'
import { countries } from 'utils/countries'
import { getErrorMessage } from 'utils/error'
import { formatTime } from 'utils/time'

import { CreateResellerCustomer } from './Create'

const { Title } = Typography

const GenerateSignURL: React.FC<React.PropsWithChildren<{ orgId: string }>> = ({
  orgId
}) => {
  const { isFetching, refetch } = useGetResaleCustomerSignupUrl(orgId, {
    query: {
      enabled: false
    }
  })

  const onClick = async () => {
    try {
      const data = await refetch()
      window.open(data?.data?.data || '', '_blank')
    } catch (e) {
      notification.error({ message: getErrorMessage(e) })
    }
  }
  return (
    <div>
      <Button onClick={onClick} loading={isFetching} type="default">
        Preview Signup URL
      </Button>
    </div>
  )
}

export const ResaleDetails: 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: 'Reseller 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}
        extra={<GenerateSignURL orgId={org_id} />}
      >
        <Descriptions>
          <Descriptions.Item label="ID">
            <Link to={`/orgs/${partner.id}`}>{partner.id}</Link>
          </Descriptions.Item>
          <Descriptions.Item label="Email">{partner.email}</Descriptions.Item>
          <Descriptions.Item label="Country">
            {countries[partner.country || ''] || partner.country}
          </Descriptions.Item>
        </Descriptions>
      </Card>
      <Divider></Divider>
      <div>
        <Title level={5}>Reseller Customers</Title>
        <ListToolBar
          reload={async () => {
            await refetch()
          }}
          actions={[
            <CreateResellerCustomer
              resale_org_id={org_id}
              onCreate={() => {
                refetch()
              }}
            />
          ]}
        />
      </div>
      <Table
        columns={columns}
        dataSource={customers?.data || []}
        loading={isLoading}
      ></Table>
    </div>
  )
}

export default ResaleDetails