import { ComboboxItem } from '@tidbcloud/uikit'
import { Form, FormSelect } from '@tidbcloud/uikit/biz'
import { FC, useCallback, useRef } from 'react'
import { useForm } from 'react-hook-form'
import { useMutation } from 'react-query'

import { CentralClusterStatus, listClusters, useNewUserDebugAuthorization } from 'dbaas/services'
import useStores from 'dbaas/stores/useStores'
import { eventTracking } from 'dbaas/utils/tracking'

type FormValues = {
  project_id: string
  cluster_id: string
  feature: string
  expires: string
}

interface IAuthorizationFormProps {
  onSubmitSuccess?: () => void
  onCancel?: () => void
}

const features: ComboboxItem[] = [
  {
    value: 'dashboard',
    label: 'TiDB Dashboard (Sensitive Data)'
  }
]

const expires: ComboboxItem[] = [
  {
    value: `${3 * 24}`,
    label: '3 Days (3 * 24 Hours)'
  },
  {
    value: `${7 * 24}`,
    label: '7 Days (7 * 24 Hours)'
  },
  {
    value: `${14 * 24}`,
    label: '14 Days (14 * 24 Hours)'
  },
  {
    value: `${28 * 24}`,
    label: '28 Days (28 * 24 Hours)'
  }
]

export const AuthorizationForm: FC<React.PropsWithChildren<IAuthorizationFormProps>> = ({
  onSubmitSuccess,
  onCancel
}) => {
  const {
    store: { userProfile, tenantData }
  } = useStores()
  const projects: ComboboxItem[] = (userProfile.projects || []).map((p) => ({
    value: p.id,
    label: p.name
  }))
  const projectID = useRef<string | undefined>()
  const form = useForm<FormValues>()

  const {
    data: clusters,
    mutate: fetchClusterList,
    isLoading: isClusterListLoading
  } = useMutation(({ tenantID, projectID }: { tenantID: string; projectID: string }) =>
    listClusters(tenantID, projectID)
  )
  const { mutateAsync: newUserDebugAuthorization } = useNewUserDebugAuthorization()

  const onSubmit = useCallback(
    async (v: FormValues) => {
      eventTracking('Create Authorization Modal Confirm Button Clicked')

      await newUserDebugAuthorization({
        organization: tenantData.id,
        cluster: v.cluster_id,
        data: { expires: parseInt(v.expires) } as any
      })
      onSubmitSuccess?.()
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [tenantData.id]
  )

  return (
    <Form<FormValues> form={form} onSubmit={onSubmit} onCancel={onCancel}>
      <FormSelect
        label="Project"
        name="project_id"
        placeholder="Choose a project"
        data={projects}
        required
        rules={{
          required: 'Please choose a project'
        }}
        onChange={(v) => {
          if (!v || v === projectID.current) {
            return
          }

          projectID.current = v
          form.setValue('cluster_id', '')
          fetchClusterList({ tenantID: tenantData.id, projectID: v })
        }}
      />
      <FormSelect
        label="Cluster"
        name="cluster_id"
        placeholder={isClusterListLoading ? 'Loading...' : 'Choose a cluster'}
        data={(clusters?.items || []).map((c) => {
          const isDisabled = c.status === CentralClusterStatus.CREATING || c.status === CentralClusterStatus.RECOVERING
          return {
            value: c.id,
            label: isDisabled ? `${c.name} (${c.status})` : c.name,
            disabled: isDisabled
          }
        })}
        disabled={isClusterListLoading}
        rules={{
          required: 'Please choose a cluster'
        }}
        required
      />
      <FormSelect
        label="Authorize to"
        name="authorize_to"
        data={[]}
        placeholder="TiDB Cloud Technical Supports"
        disabled
      />
      <FormSelect
        label="Authorized Feature"
        name="feature"
        data={features}
        rules={{
          required: 'Please choose a feature'
        }}
        placeholder="Choose a feature"
        required
      />
      <FormSelect
        label="Time Limit"
        name="expires"
        data={expires}
        rules={{
          required: 'Please set a time limit'
        }}
        placeholder="Set a time limit. You can cancel this authorization at anytime."
        required
      />
    </Form>
  )
}