import { Box, Group, HoverCard } from '@tidbcloud/uikit'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { IconHandsDownFill, IconHandsUpFill, IconThumbsDown, IconThumbsUp } from '@tidbcloud/uikit/icons'
import { useState } from 'react'

import { sendFeedback } from './api'

export const FeedbackActions: React.FC<
  React.PropsWithChildren<{
    visible: boolean
    onLike: () => void
    onDislike: () => void
  }>
> = ({ visible, onLike, onDislike }) => {
  const [liked, setLiked] = useState(false)
  const [disliked, setDisliked] = useState(false)
  return (
    <Group
      gap={10}
      px={8}
      py={4}
      bg="carbon.1"
      sx={(theme) => ({
        display: visible ? 'flex' : 'none',
        position: 'absolute',
        bottom: '-18px',
        right: 0,
        zIndex: 9,
        border: `1px solid ${theme.colors.carbon[4]}`,
        borderRadius: '40px',
        boxShadow: theme.shadows.xs
      })}
    >
      {!disliked && (
        <HoverCard>
          <HoverCard.Target>
            <Box
              mx={-8}
              my={-4}
              px={8}
              py={4}
              sx={(theme) => ({
                cursor: 'pointer',
                color: theme.colors.carbon[6],
                ...(liked
                  ? {}
                  : {
                      ':hover': {
                        color: theme.colors.carbon[7]
                      }
                    })
              })}
              onClick={() => {
                if (liked) {
                  return
                }
                setLiked(true)
                onLike()
              }}
            >
              <Box component={liked ? IconHandsUpFill : IconThumbsUp} size={16} strokeWidth={1} />
            </Box>
          </HoverCard.Target>
          <HoverCard.Dropdown>{liked ? 'Thanks for your feedback!' : 'Like'}</HoverCard.Dropdown>
        </HoverCard>
      )}
      {!liked && (
        <HoverCard>
          <HoverCard.Target>
            <Box
              mx={-8}
              my={-4}
              px={8}
              py={4}
              sx={(theme) => ({
                cursor: 'pointer',
                color: theme.colors.carbon[6],
                ...(disliked
                  ? {}
                  : {
                      ':hover': {
                        color: theme.colors.carbon[7]
                      }
                    })
              })}
              onClick={() => {
                if (disliked) {
                  return
                }
                setDisliked(true)
                onDislike()
              }}
            >
              <Box sx={{ transform: 'translateY(4px)' }}>
                <Box component={disliked ? IconHandsDownFill : IconThumbsDown} size={16} strokeWidth={1} />
              </Box>
            </Box>
          </HoverCard.Target>
          <HoverCard.Dropdown>{disliked ? 'Thanks for your feedback!' : 'Dislike'}</HoverCard.Dropdown>
        </HoverCard>
      )}
    </Group>
  )
}

export const useFeedback = () => {
  const [showFeedback, { open, close }] = useDisclosure(false)
  const [interactionId, setInteractionId] = useState('')
  const openFeedback = (id: string) => {
    setInteractionId(id)
    open()
  }
  const like = (id: string) => sendFeedback(id, { feedback_type: 'like' })
  const dislike = (id: string) => sendFeedback(id, { feedback_type: 'dislike' })
  const feedback = (comment: string) => sendFeedback(interactionId, { comment })

  return {
    showFeedback,
    openFeedback,
    closeFeedback: close,
    like,
    dislike,
    feedback
  }
}