import {
  Button,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
} from "@chakra-ui/react";
import { useEffect, useRef } from "react";
import { fabric } from "fabric";
import { ICanvasOptions } from "fabric/fabric-impl"; // v6
const CanvasTexturesEditor = ({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
    const options: ICanvasOptions = {
      backgroundImage: "/",
    };
    const canvas = new fabric.Canvas(canvasRef.current, options);
    // make the fabric.Canvas instance available to your app
    // updateCanvasContext(canvas);
    return () => {
      // updateCanvasContext(null);
      canvas.dispose();
    };
  }, []);

  return (
    <Modal isOpen={open} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>Modal Title</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <canvas className={"w-full"} height={300} ref={canvasRef}></canvas>
        </ModalBody>

        <ModalFooter>
          <Button colorScheme="blue" mr={3} onClick={() => {}}>
            Close
          </Button>
          <Button variant="ghost">Secondary Action</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default CanvasTexturesEditor;