import { Alert, Button, Group, Modal, notifier } from '@tidbcloud/uikit'
import { Form, FormTextInput } from '@tidbcloud/uikit/biz'
import { useEffect, useState } from 'react'
import { useFormContext } from 'react-hook-form'

import { useDataappDeploy } from 'dbaas/services/dataservice'

import DiscardButton from '../common/DiscardButton'
import { useDataApiContext } from '../context'
import { useUpdateAppInfo, useTestEndpoint } from '../helpers'
import { EndPoint } from '../types'

import Diff from './Deployment/Diff'

const ActionBtns = ({ close }: { close: () => void }) => {
  const { orgId, projectId, editApp, editEndpoint, dataappDeployConfig, setEditEndpoint, editEndpointRef } =
    useDataApiContext()
  const deployMutation = useDataappDeploy()
  const { watch } = useFormContext()
  const name = watch('deploy_name')
  const { updateAppInfo } = useUpdateAppInfo()
  const [isUpdatingApp, setIsUpdatingApp] = useState(false)

  const deployChanges = async () => {
    try {
      const res = await deployMutation.mutateAsync({
        orgId,
        projectId,
        appId: `${editApp?.id || editEndpoint?.dataappp_id}`,
        data: {
          deploy_name: name
        }
      })

      if (res.code !== 200) {
        notifier.error(res.message)
        close()
      } else {
        setIsUpdatingApp(true)
        const endp = {
          ...editEndpointRef.current,
          has_modified: false,
          is_online: 1
        } as EndPoint
        setEditEndpoint(endp)
        editEndpointRef.current = endp
        updateAppInfo(() => {
          close()
          setIsUpdatingApp(false)
        })
      }
    } catch (_e) {
      close()
    }
  }

  return (
    <Group justify="flex-end">
      <DiscardButton
        data-mp-event="Dataservice discard datapp draft button clicked"
        type="dataapp"
        deployName={name}
        succCallback={close}
      />
      <Button
        loading={deployMutation.isLoading || isUpdatingApp}
        data-mp-event="Dataservice datapp deploy button clicked"
        onClick={deployChanges}
      >
        Deploy {dataappDeployConfig?.enable_automatic_deployment && ' and Push to GitHub'}
      </Button>
    </Group>
  )
}

const Deploy = ({ opened, close }: { opened: boolean; close: (needRefresh: boolean) => void }) => {
  const { dataappDeployConfig, setIsAutoSaveClose } = useDataApiContext()
  const { saveEndpoint } = useTestEndpoint()
  const [saveed, setSaveed] = useState(false)

  useEffect(() => {
    setIsAutoSaveClose(opened)
    saveWhenOpen(opened)

    if (!opened) {
      setSaveed(false)
    }
  }, [opened])

  const saveWhenOpen = async (opened: boolean) => {
    if (opened) {
      try {
        await saveEndpoint()
      } catch (_e) {
      } finally {
        setSaveed(true)
      }
    }
  }

  return (
    <Modal title="Review Draft" size="80%" opened={opened} centered trapFocus={false} onClose={() => close(false)}>
      <Form withActions={false} onSubmit={() => {}}>
        <FormTextInput label="Change Description" name="deploy_name" placeholder="Deploy from Data App" />
        {saveed && <Diff maxHeight="40vh" />}
        <Alert color="sky">
          If choosing "Discard Draft" will roll back to the last deployment content.
          {dataappDeployConfig?.enable_automatic_deployment &&
            ' if choosing deploy will push the changes to your GitHub Repo and override.'}
        </Alert>
        <ActionBtns close={() => close(true)} />
      </Form>
    </Modal>
  )
}

export default Deploy