// import { useDropzone } from "react-dropzone";
// import Link from "next/link";
// import { useState, useEffect } from "react";
// import { useRouter } from "next/router";
// import useTranslation from "next-translate/useTranslation";
// import { JSONPath as jsonpath } from "jsonpath-plus";
// import _ from "lodash";

//const FileUpload = () => {
//     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
//     const files = acceptedFiles.map((file) => (
//         <li key={file.path}>
//             {file.path} - {file.size} bytes
//         </li>
//     ));
//     return (
//         <div className="govuk-grid-column-full">
//             <div className="govuk-grid-row">
//                 <div className="govuk-form-group">
//                     <section className="container">
//                         <div
//                             {...getRootProps({
//                                 className: "dropzone",
//                             })}
//                         >
//                             <input {...getInputProps()} />
//                             <p>
//                                 Drag and drop files here or click to select
//                                 files
//                             </p>
//                         </div>
//                         <aside>
//                             <h4>Files</h4>
//                             <ul>{files}</ul>
//                         </aside>
//                     </section>
//                 </div>
//             </div>
//         </div>
//     );
// };
// export default FileUpload;

import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useDropzone } from "react-dropzone";

const baseStyle = {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: "20px",
    borderWidth: 2,
    borderRadius: 2,
    borderColor: "#eeeeee",
    borderStyle: "dashed",
    backgroundColor: "#fafafa",
    color: "#bdbdbd",
    transition: "border .3s ease-in-out",
};

const activeStyle = {
    borderColor: "#2196f3",
};

const acceptStyle = {
    borderColor: "#00e676",
};

const rejectStyle = {
    borderColor: "#ff1744",
};

function DropzoneComponent(props) {
    const [files, setFiles] = useState([]);

    const onDrop = useCallback((acceptedFiles) => {
        setFiles(
            acceptedFiles.map((file) =>
                Object.assign(file, {
                    preview: URL.createObjectURL(file),
                })
            )
        );
    }, []);

    const {
        getRootProps,
        getInputProps,
        isDragActive,
        isDragAccept,
        isDragReject,
    } = useDropzone({
        onDrop,
    });

    const style = useMemo(
        () => ({
            ...baseStyle,
            ...(isDragActive ? activeStyle : {}),
            ...(isDragAccept ? acceptStyle : {}),
            ...(isDragReject ? rejectStyle : {}),
        }),
        [isDragActive, isDragReject, isDragAccept]
    );

    const thumbs = files.map((file) => (
        <div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
            <img src={file.preview} alt={file.name} width="50" /> -{" "}
            <span className="govuk-body">
                {file.name} ({file.size / 1024}kb)
            </span>
        </div>
    ));

    // clean up
    useEffect(
        () => () => {
            files.forEach((file) => URL.revokeObjectURL(file.preview));
        },
        [files]
    );

    return (
        <div className="govuk-grid-row ">
            <div className="govuk-form-group"></div>
            <section className="container">
                <div {...getRootProps({ style, className: "dropzone" })}>
                    <input {...getInputProps()} />
                    <p>Drag and drop files here or click to select files</p>
                </div>
            </section>{" "}
            <aside>{thumbs}</aside>
        </div>
    );
}

export default DropzoneComponent;