import React from 'react'
import {
  Modal, ModalBody, ModalCloseButton, ModalContent,
  ModalHeader,
} from '@chakra-ui/react'
import { useHookstate } from '@hookstate/core'
import { openAndCloseSearchDialogue } from '../stateManagement/loadingState'
import Search from './Search'

export default function SearchModal() {
  const setIsOpen = useHookstate(openAndCloseSearchDialogue)
  const isOpen = setIsOpen.get()

  const handleClose = () => {
    setIsOpen.set(false)
  }

  return (
    <Modal isOpen={isOpen} onClose={handleClose}>
      <ModalContent>
        <ModalHeader>Search</ModalHeader>
        <ModalCloseButton onMouseDown={() => handleClose()}/>
        <ModalBody>
          <Search />
        </ModalBody>
      </ModalContent>
    </Modal>
  )
}
