import { Card, Flex, Box, Typography, Button, Divider, CardProps, closeModal, openModal } from '@tidbcloud/uikit'
import { Form, FormTextInput } from '@tidbcloud/uikit/biz'
import { IconTrash01 } from '@tidbcloud/uikit/icons'
import React, { useState } from 'react'
import { useForm } from 'react-hook-form'

import { useDidMountEffect } from 'dbaas/utils/useRefMounted'

export const VerticalDivider = () => <Divider orientation="horizontal" />

export const DeleteInput: React.FC<
  React.PropsWithChildren<{
    label?: string
    placeholder?: string
    onSubmit: () => Promise<any>
    onCancel: () => void
  }>
> = ({ onSubmit, onCancel }) => {
  const form = useForm<{ deleteInput: string }>()
  const { watch } = form
  const input = watch('deleteInput')

  return (
    <Form
      form={form}
      onSubmit={onSubmit}
      onCancel={onCancel}
      actionsProps={{
        confirmText: 'Delete',
        confirmProps: {
          disabled: input && input.toLowerCase() === 'delete' ? false : true
        }
      }}
    >
      <Flex align="center">
        <Typography variant="label-lg" mr={24}>
          type <b>Delete</b>
        </Typography>
        <FormTextInput sx={{ flex: 1 }} name="deleteInput" autoComplete={'input1'} autoFocus />
      </Flex>
    </Form>
  )
}

export const DeleteModal: React.FC<
  React.PropsWithChildren<{
    title?: React.ReactNode
    content?: React.ReactNode
    trigger?: React.ReactElement
    onSubmit: () => Promise<any>
    placeholder?: string
  }>
> = ({ title, onSubmit, content, trigger, placeholder = '' }) => {
  const modalId = 'delete-integration-modal'

  const handleSubmit = async () => {
    await onSubmit?.()
    closeModal(modalId)
  }

  const onClose = () => {
    closeModal(modalId)
  }

  const openDeleteModal = () => {
    return openModal({
      modalId,
      title,
      centered: true,
      trapFocus: false,
      size: 'tiny',
      children: (
        <div>
          <p>{content}</p>
          <DeleteInput onSubmit={handleSubmit} onCancel={onClose} placeholder={placeholder} />
        </div>
      )
    })
  }

  const TriggerElem = trigger ? (
    React.cloneElement(trigger, {
      onClick: () => {
        openDeleteModal()
      }
    })
  ) : (
    <Button
      color="red"
      variant="light"
      onClick={() => {
        openDeleteModal()
      }}
      leftSection={<IconTrash01 size={16} />}
    >
      Delete
    </Button>
  )

  return <div>{TriggerElem}</div>
}

type CardContainerStatus = 'detail' | 'editing' | 'closed'

export interface CardContainerProps extends Omit<CardProps, 'children' | 'left' | 'right'> {
  left?: React.ReactNode
  content?: React.ReactNode
  right?: React.ReactNode
  className?: string
  children?: (
    status: CardContainerStatus,
    setStatus: React.Dispatch<React.SetStateAction<CardContainerStatus>>
  ) => React.ReactNode
  isEmpty?: boolean
  open?: boolean
  withCursor?: boolean
  disabled?: boolean
  onClick?: (status: CardContainerStatus) => void
}

export const CardContainer: React.FC<CardContainerProps> = ({
  children,
  className,
  content,
  left,
  right,
  isEmpty = true,
  open = false,
  disabled = false,
  withCursor,
  onClick,
  ...rest
}) => {
  const [status, setStatus] = useState<CardContainerStatus>(open ? (isEmpty ? 'editing' : 'detail') : 'closed')

  useDidMountEffect(() => {
    // editing -> detail, which means created
    if (!isEmpty && status === 'editing') {
      setStatus('detail')
    }
    // detail -> closed, which means delete
    if (isEmpty && status === 'detail') {
      setStatus('closed')
    }
  }, [isEmpty, status])

  const onContentClick: React.MouseEventHandler<HTMLDivElement> = (_e) => {
    let _status: CardContainerStatus
    if (isEmpty) {
      _status = status === 'editing' ? 'closed' : 'editing'
    } else {
      _status = status === 'detail' ? 'closed' : 'detail'
    }

    setStatus(_status)
    onClick?.(_status)
  }

  return (
    <Card className={className} sx={{ overflow: 'unset' }} {...rest}>
      <Flex
        align="center"
        h={96}
        sx={{ cursor: disabled ? 'not-allowed' : withCursor === false ? 'default' : 'pointer', paddingLeft: 32 }}
        onClick={onContentClick}
      >
        <Box w={64} mr={48}>
          {left}
        </Box>
        <Box sx={{ flex: 1 }}>{content}</Box>
        {right}
      </Flex>
      <Box>{children?.(status, setStatus)}</Box>
    </Card>
  )
}

export default CardContainer

export { CardForm, SubmitAction } from './form'
export type { ActionSteps } from './form'