import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { useThematic } from '@thematic/react';
import { memo, useMemo } from 'react';
import { useDropzone } from './Dropzone.hooks.js';
import { DEFAULT_STYLES, staticStyles } from './Dropzone.styles.js';
const DEFAULT_ACCEPTED_FILE_TYPES = [];
const DEFAULT_DROPZONE_OPTIONS = {};
export const Dropzone = /*#__PURE__*/ memo(function Dropzone({ onDrop , onDropRejected , onDropAccepted , acceptedFileTypes =DEFAULT_ACCEPTED_FILE_TYPES , dropzoneOptions =DEFAULT_DROPZONE_OPTIONS , placeholder , showPlaceholder =true , styles =DEFAULT_STYLES , children ,  }) {
    const thematic = useThematic();
    const { getRootProps , getInputProps , isDragActive , isDragReject , acceptedFileTypesExt ,  } = useDropzone({
        acceptedFileTypes,
        onDropRejected,
        onDropAccepted,
        onDrop,
        dropzoneOptions
    });
    const placeholderText = useMemo(()=>{
        return showPlaceholder ? placeholder || `Drop ${acceptedFileTypesExt} files here` : '';
    }, [
        showPlaceholder,
        placeholder,
        acceptedFileTypesExt
    ]);
    const container = useMemo(()=>({
            ...staticStyles.container,
            opacity: isDragActive ? 0.5 : 1,
            backgroundColor: isDragActive ? 'white' : 'transparent',
            borderColor: isDragActive ? thematic.application().accent().hex() : thematic.application().lowContrast().hex(),
            ...styles.container
        }), [
        styles,
        thematic,
        isDragActive
    ]);
    const dragZone = useMemo(()=>({
            ...staticStyles.dragZone,
            ...styles.dragZone
        }), [
        styles
    ]);
    const dragReject = useMemo(()=>({
            ...staticStyles.dragReject,
            backgroundColor: thematic.application().foreground().hex(),
            color: thematic.application().background().hex(),
            ...styles.dragReject
        }), [
        thematic,
        styles
    ]);
    const placeholderStyles = useMemo(()=>({
            ...staticStyles.placeholder,
            ...styles.placeholder
        }), [
        styles
    ]);
    return /*#__PURE__*/ _jsx("section", {
        style: container,
        children: /*#__PURE__*/ _jsxs("div", {
            style: dragZone,
            ...getRootProps(),
            children: [
                /*#__PURE__*/ _jsx("input", {
                    ...getInputProps()
                }),
                acceptedFileTypes.some((t)=>t.includes('application') || t.includes('text')) && isDragReject ? /*#__PURE__*/ _jsxs("div", {
                    style: dragReject,
                    children: [
                        /*#__PURE__*/ _jsx("p", {
                            style: {
                                margin: 0
                            },
                            children: "Some files will be rejected."
                        }),
                        /*#__PURE__*/ _jsxs("small", {
                            children: [
                                "The accepted file types are: ",
                                acceptedFileTypesExt.join(', ')
                            ]
                        })
                    ]
                }) : children || /*#__PURE__*/ _jsx("p", {
                    style: placeholderStyles,
                    children: placeholderText
                })
            ]
        })
    });
});
