Modal

import React, { useState,useEffect } from "react";
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Button,
  Box
} from "@chakra-ui/react";

const App = () =>{
  const [modalTitle,setModalTitle]=useState()
  const [modalBody,setModalBody]=useState()
  const [list,setList]=useState();

  const { isOpen, onOpen, onClose } = useDisclosure()
  
  const handleCardData = (key,value)=>{
	console.log(card,key,value,'this is key and value')
        let newCard=card;
        newCard[key]=value;
  	console.log(newCard)
  	setCard(newCard)
  }
  
  const handleList = async () =>{
	  console.log('in handle list')
	  onClose();
	  console.log(list)
  }


const handleModal=(type)=>{
	const data =()=>{ switch(type) {
          case "List":   return (
			<Input type='text' onChange={(e)=>setList(e.target.value)} />
		);
        
          case "Card":   return (
		<>
			<Input m='2' type='text' placeholder="Title" id='title' onChange={(e)=>handleCardData(e.target.id,e.target.value)} />
			<Input m='2' type='text' placeholder="Description" id='description'  onChange={(e)=>handleCardData(e.target.id,e.target.value)} />
			<Input m='2' type='date' placeholder="Due on" id='due-on' onChange={(e)=>handleCardData(e.target.id,e.target.value)} />
		</>)

          default:      return <h1>No project match</h1>
	  }
	}
	
	setModalTitle(type)
	setModalBody(data)
	onOpen();
  }
  return (
  <Box>
    <Button onClick={()=> handleModal('List')}> List </Button>
    <Button onClick={()=> handleModal('Card')}> Card </Button>
    
    <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>{modalTitle}</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            {modalBody}
          </ModalBody>

          <ModalFooter>
	  {modalTitle==='List'?
            <Button colorScheme='blue' mr={3} onClick={()=>handleList()}>
              Save
            </Button>
		:
	    <Button colorScheme='blue' mr={3} onClick={()=>handleCard()}>
	    Save
	    </Button>
	  }
          </ModalFooter>
        </ModalContent>
      </Modal>
  
  </Box>
  )
  
  }