import { Progress, Modal, Typography, Stack, Group, Button } from '@tidbcloud/uikit'
import { useMemoizedFn, useUpdateEffect } from 'ahooks'
import { useEffect, useMemo, useState } from 'react'

import { FormErrorMessage } from 'dbaas/components/Form'
import { useFakeProgress } from 'dbaas/utils/useFakeProgress'

interface Options {
  error?: string
  onCancel?: () => void
  title: string
}

export const useProgressModal = ({ title, error, onCancel }: Options) => {
  const [modalOpen, setModalOpen] = useState(false)
  const [err, setErr] = useState('')

  useUpdateEffect(() => {
    if (!modalOpen) {
      setErr('')
      p.reset()
    }
  }, [modalOpen])

  useEffect(() => {
    setErr(error ?? '')
  }, [error])

  const p = useFakeProgress()
  const percent = Math.floor(p.percent * 100)
  const color = useMemo(() => {
    if (percent === 100 && !error) {
      return 'green'
    }
    if (!!error) {
      return 'red'
    }
    return 'peacock'
  }, [percent, error])

  const start = useMemoizedFn(() => {
    if (!modalOpen) {
      setModalOpen(true)
    }
    p.start()
  })
  const pause = useMemoizedFn(() => p.pause())
  const done = useMemoizedFn(() => p.done())
  const show = useMemoizedFn(() => setModalOpen(true))
  const close = useMemoizedFn(() => setModalOpen(false))

  const content = (
    <Modal
      size="xl"
      opened={modalOpen}
      onClose={() => setModalOpen(false)}
      closeOnClickOutside={false}
      title={title}
      centered
    >
      <Stack>
        <Group justify="space-between">
          <Progress value={percent} color={color} className="wd-flex-1" />
          <Group>
            <Typography color={err ? 'red' : undefined} fw={700}>
              {error ? 'Failed' : `${percent}%`}
            </Typography>

            <Button
              variant="default"
              data-mp-event="Progress Modal Cancel Button Clicked"
              onClick={() => {
                onCancel?.()
                setModalOpen(false)
              }}
            >
              Cancel
            </Button>
          </Group>
        </Group>

        <FormErrorMessage message={err} />
      </Stack>
    </Modal>
  )

  return {
    content,
    start,
    pause,
    show,
    close,
    done,
    isOpen: modalOpen
  }
}