import { InfoCircleOutlined, DownOutlined } from '@ant-design/icons'
import {
  Card,
  Descriptions,
  Typography,
  Tag,
  Space,
  Tooltip,
  Dropdown,
  Button,
  Menu
} from 'antd'

import {
  useGetCustomerByOrgId,
  useGetTenantByID
} from 'apiClient/services/account'
import {
  TenantGetTenantResp,
  TenantTenantStatus,
  OperationOperationTarget
} from 'apiClient/services/devops/interface'
import { format } from 'utils/time'

import CreateOperation from '../../Devops/Operations/CreateOperation'
import ImpersonateV2 from '../ClusterDetail/Operations/ImpersonateV2'

import { AddCredit } from './Operations/AddCredits'
import { DeleteOrg } from './Operations/DeleteOrg'
import TenantInitVersion from './Operations/TenantInitVersion'
import { UpdateOrg } from './Operations/UpdateOrg'
import { useCustomerType } from './shared/useCustomerType'
import { useOrgType } from './shared/useOrgType'
import { AddUser } from './Users/AddUser'

const { Title } = Typography

export const BasicInfo: React.FC<
  React.PropsWithChildren<{ tenant: TenantGetTenantResp }>
> = ({ tenant }) => {
  const { data: customer, isFetched } = useGetCustomerByOrgId(tenant.id || '', {
    query: {
      retry: false,
      refetchOnWindowFocus: false,
      refetchInterval: false,
      refetchIntervalInBackground: false
    }
  })

  const { isDirectCustomer } = useCustomerType(customer?.data)

  const { data: org, isFetched: isOrgFetched } = useGetTenantByID(
    tenant.id || '',
    {
      query: {
        retry: false,
        refetchOnWindowFocus: false,
        refetchInterval: false,
        refetchIntervalInBackground: false
      }
    }
  )
  const { orgTypeLabel } = useOrgType(org?.data, customer?.data)

  const { data: partner } = useGetTenantByID(
    customer?.data.partner_org_id || '',
    {
      query: {
        enabled: !isDirectCustomer,
        retry: false,
        refetchOnWindowFocus: false,
        refetchInterval: false,
        refetchIntervalInBackground: false
      }
    }
  )
  const menu = (
    <Menu>
      <Menu.Item>
        {/* <UpgradeOperation></UpgradeOperation> */}
        <TenantInitVersion change_type="fulltidb"></TenantInitVersion>
      </Menu.Item>
      <Menu.Item>
        <TenantInitVersion change_type="data-migration"></TenantInitVersion>
      </Menu.Item>
      <Menu.Item>
        <AddUser
          type="org"
          orgId={tenant.id || ''}
          orgName={tenant.alias || tenant.name || ''}
        />
      </Menu.Item>
      {!!org?.data && (
        <Menu.Item>
          <UpdateOrg tenant={org.data} />
        </Menu.Item>
      )}
      <Menu.Item>
        <DeleteOrg
          orgId={tenant.id || ''}
          orgName={tenant.alias || tenant.name || ''}
        />
      </Menu.Item>
      {tenant.kind == 'internal' ? (
        <Menu.Item>
          <AddCredit orgId={tenant.id || ''} />
        </Menu.Item>
      ) : (
        <></>
      )}
      <Menu.Item>
        <CreateOperation
          target_type={OperationOperationTarget.tenant}
          target_id={tenant.id}
          op="other Operations"
          init_categories={['tenant']}
        ></CreateOperation>
      </Menu.Item>
    </Menu>
  )

  return (
    <Card
      title={<Title level={4}>{tenant.name}</Title>}
      bordered={false}
      extra={
        <Space>
          <ImpersonateV2></ImpersonateV2>
          <Dropdown overlay={menu}>
            <Button type="primary">
              Actions <DownOutlined />
            </Button>
          </Dropdown>
        </Space>
      }
    >
      <Descriptions>
        <Descriptions.Item label="ID">{tenant.id}</Descriptions.Item>
        <Descriptions.Item label="Alias">
          {tenant.alias || tenant.name}
        </Descriptions.Item>
        <Descriptions.Item label="Status">
          <TenantStatus status={tenant.status} />
        </Descriptions.Item>
        <Descriptions.Item label="Created At">
          {tenant.created_at}
        </Descriptions.Item>
        <Descriptions.Item label="Region">{tenant.region}</Descriptions.Item>
        <Descriptions.Item label="Plan">{tenant.plan}</Descriptions.Item>
        <Descriptions.Item label="Property">{tenant.kind}</Descriptions.Item>
        <Descriptions.Item label="Email">{tenant.email}</Descriptions.Item>
        <Descriptions.Item label="Sales Owner">
          {tenant.sales_owner_email || '-'}
        </Descriptions.Item>
        <Descriptions.Item label="Segmentation">
          {tenant.segmentation || '-'}
        </Descriptions.Item>
        <Descriptions.Item label="Account ID">
          {tenant.customer_id || '-'}
        </Descriptions.Item>
        <Descriptions.Item label="TAM Name">
          {tenant.tam_name || '-'}
        </Descriptions.Item>
        {isFetched && isOrgFetched && (
          <Descriptions.Item
            label="Customer Type"
            style={{ alignItems: 'center' }}
            contentStyle={{ alignItems: 'center' }}
          >
            {orgTypeLabel}
            {!isDirectCustomer && (
              <Tooltip
                title={`Effective from ${format(
                  customer?.data.effected_at,
                  undefined,
                  'YYYY-MM-DD HH:mm:ssZ',
                  0
                )}`}
              >
                <InfoCircleOutlined style={{ marginLeft: 4 }} />
              </Tooltip>
            )}
          </Descriptions.Item>
        )}
        {!isDirectCustomer && !!partner?.data && (
          <>
            <Descriptions.Item label="Linked partner">
              {partner.data.name + ` (ID: ${customer?.data.partner_org_id})` ||
                '-'}
            </Descriptions.Item>
          </>
        )}
      </Descriptions>
    </Card>
  )
}

const TenantStatus: React.FC<
  React.PropsWithChildren<{ status: TenantTenantStatus | undefined }>
> = ({ status }) => {
  let color
  switch (status) {
    case 'cleared':
      color = 'orange'
      break
    case 'deleted':
      color = 'red'
      break
    case 'active':
      color = 'green'
      break
    default:
      color = 'blue'
  }
  return (
    <Space>
      <Tag color={color} key={status}>
        {status}
      </Tag>
    </Space>
  )
}