import type { FC } from 'react';
import React from 'react';
import cx from 'classnames';
import type { UploadAreaLegacyProps } from './types';
import type { DropzoneState } from 'react-dropzone';

const CLASS_NAME = 'UploadArea-legacy';

type Props = Pick<
    UploadAreaLegacyProps,
    'children' | 'className' | 'style' | 'testId' | 'inputId' | 'multipleFileSelection'
> & {
    dropzoneState: DropzoneState;
};

export const UploadAreaLegacy: FC<Props> = ({
    children,
    className,
    style,
    testId = CLASS_NAME,
    inputId,
    multipleFileSelection = true,
    dropzoneState,
}) => {
    const { getRootProps, getInputProps, isDragActive, open } = dropzoneState;

    const openFileUploadDialog = (event: React.MouseEvent) => {
        event.preventDefault();
        open();
    };

    return (
        <div
            {...getRootProps({
                className: cx('UploadArea', CLASS_NAME, className, {
                    [`${CLASS_NAME}-drag-is-active`]: isDragActive,
                }),
                style,
                'data-testid': testId,
                role: 'none',
                onClick: openFileUploadDialog,
            })}
        >
            <input
                {...getInputProps({
                    className: `${CLASS_NAME}-input`,
                    id: inputId,
                })}
                {...(multipleFileSelection
                    ? { webkitdirectory: '', mozdirectory: '', directory: '' }
                    : {})}
            />
            {children}
        </div>
    );
};