'use client';
import { getTranslation } from '@payloadcms/translations';
import React, { useCallback, useEffect, useState } from 'react';
import { Button } from '../../../elements/Button/index.js';
import { useDocumentDrawer } from '../../../elements/DocumentDrawer/index.js';
import FileDetails from '../../../elements/FileDetails/index.js';
import { useListDrawer } from '../../../elements/ListDrawer/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import LabelComp from '../../Label/index.js';
import { fieldBaseClass } from '../shared.js';
const baseClass = 'upload';
export const UploadInput = (props)=>{
    const { Description, Error, Label: LabelFromProps, api = '/api', className, collection, label, onChange, readOnly, relationTo, required, serverURL, showError, style, value, width } = props;
    const Label = LabelFromProps || /*#__PURE__*/ React.createElement(LabelComp, {
        label: label,
        required: required
    });
    const { i18n, t } = useTranslation();
    const [file, setFile] = useState(undefined);
    const [missingFile, setMissingFile] = useState(false);
    const [collectionSlugs] = useState([
        collection?.slug
    ]);
    const [filterOptionsResult, setFilterOptionsResult] = useState();
    const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({
        collectionSlug: collectionSlugs[0]
    });
    const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({
        collectionSlugs,
        filterOptions: filterOptionsResult
    });
    useEffect(()=>{
        if (value !== null && typeof value !== 'undefined' && value !== '') {
            const fetchFile = async ()=>{
                const response = await fetch(`${serverURL}${api}/${relationTo}/${value}`, {
                    credentials: 'include',
                    headers: {
                        'Accept-Language': i18n.language
                    }
                });
                if (response.ok) {
                    const json = await response.json();
                    setFile(json);
                } else {
                    setMissingFile(true);
                    setFile(undefined);
                }
            };
            void fetchFile();
        } else {
            setFile(undefined);
        }
    }, [
        value,
        relationTo,
        api,
        serverURL,
        i18n
    ]);
    const onSave = useCallback((args)=>{
        setMissingFile(false);
        onChange(args.doc);
        closeDrawer();
    }, [
        onChange,
        closeDrawer
    ]);
    const onSelect = useCallback((args)=>{
        setMissingFile(false);
        onChange({
            id: args.docID
        });
        closeListDrawer();
    }, [
        onChange,
        closeListDrawer
    ]);
    if (collection.upload) {
        return /*#__PURE__*/ React.createElement("div", {
            className: [
                fieldBaseClass,
                baseClass,
                className,
                showError && 'error',
                readOnly && 'read-only'
            ].filter(Boolean).join(' '),
            style: {
                ...style,
                width
            }
        }, Error, Label, collection?.upload && /*#__PURE__*/ React.createElement(React.Fragment, null, file && !missingFile && /*#__PURE__*/ React.createElement(FileDetails, {
            collectionSlug: relationTo,
            doc: file,
            handleRemove: readOnly ? undefined : ()=>{
                onChange(null);
            },
            uploadConfig: collection.upload
        }), (!file || missingFile) && /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__wrap`
        }, /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__buttons`
        }, /*#__PURE__*/ React.createElement(DocumentDrawerToggler, {
            className: `${baseClass}__toggler`,
            disabled: readOnly
        }, /*#__PURE__*/ React.createElement(Button, {
            buttonStyle: "secondary",
            disabled: readOnly,
            el: "div"
        }, t('fields:uploadNewLabel', {
            label: getTranslation(collection.labels.singular, i18n)
        }))), /*#__PURE__*/ React.createElement(ListDrawerToggler, {
            className: `${baseClass}__toggler`,
            disabled: readOnly
        }, /*#__PURE__*/ React.createElement(Button, {
            buttonStyle: "secondary",
            disabled: readOnly,
            el: "div"
        }, t('fields:chooseFromExisting'))))), Description), !readOnly && /*#__PURE__*/ React.createElement(DocumentDrawer, {
            onSave: onSave
        }), !readOnly && /*#__PURE__*/ React.createElement(ListDrawer, {
            onSelect: onSelect
        }));
    }
    return null;
};

//# sourceMappingURL=Input.js.map