import React, { useRef } from 'react'
import agent from '../api/agent'
import { useNavigate } from 'react-router-dom'
import { Data } from '../models/game'
import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogContent, AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  Button, Icon, Text
} from '@chakra-ui/react'

type Props = {
  id: string
  open: boolean
  setOpen: Function
  setLoading: Function
  game: Data
}

export default function DeleteDialogue({
  id,
  open,
  setOpen,
  setLoading,
  game,
}: Props) {
  const history = useNavigate()
  const handleClose = () => {
    setOpen(false)
  }

  const deleteGame = async (id: string) => {
    setLoading(true)
    try {
      await agent.Games.delete(id)
      setLoading(false)
      handleClose()
      history(`/games/`)
    } catch (err) {
      console.error(err)
      setLoading(false)
    }
  }

  const cancelRef = useRef(null)

  return (
    <AlertDialog isOpen={open} leastDestructiveRef={cancelRef} onClose={handleClose}>
      <AlertDialogOverlay>
        <AlertDialogContent>

      <AlertDialogHeader fontSize='lg' fontWeight='bold'>Delete?</AlertDialogHeader>
      <AlertDialogBody>
        Are you sure you would like to delete <strong>{game.title}</strong>?
      </AlertDialogBody>
      <AlertDialogFooter>
        <Button ref={cancelRef} onMouseDown={handleClose}>
          <Icon name='remove' mr='1' /> <Text mt='1'>No</Text>
        </Button>
        <Button
          colorScheme='red'
          onMouseDown={() => {
            deleteGame(id)
          }}
          ml={3}
          autoFocus
        >
          <Icon name='checkmark' mr='1' /> <Text mt='1'>Yes</Text>
        </Button>
      </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogOverlay>
    </AlertDialog>
  )
}