var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { useCallback } from "react";
import { useDropzone } from "react-dropzone";
import React from "react";
import styled from "@emotion/styled";
const UploadArea = styled.div `
  border: 1px dashed lightgrey;
  padding: 5px;
  text-align: center;
  border-radius: 2px;
  background-color: #efefef;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  cursor: pointer;
`;
const getBase64 = (file) => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
    });
};
export const ImageUpload = ({ children, onUpload }) => {
    const onDrop = useCallback((files) => __awaiter(void 0, void 0, void 0, function* () {
        console.log("Files", files);
        files.forEach((file) => __awaiter(void 0, void 0, void 0, function* () {
            const data = files.length && (yield getBase64(file));
            if (data) {
                yield onUpload(data, file);
            }
        }));
    }), []);
    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
    return (<div {...getRootProps()}>
      <input {...getInputProps()}/>
      {children || (<UploadArea>
          {isDragActive ? (<div>Drop the image here ...</div>) : (<div>
              Drag 'n' drop the image here, or click to upload the image
            </div>)}
        </UploadArea>)}
    </div>);
};
//# sourceMappingURL=ImageUpload.jsx.map