import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Form } from '../../../../../scalars/components/form/index.js';
import { FileField } from '../../../../../scalars/components/file-field/index.js';
import { Button } from '../../../../../ui/components/button/index.js';
/**
 * Example component demonstrating the FileField component usage within a real Form context.
 * This shows how to manage file upload states and handle user interactions in a production-like scenario.
 */
const FileUploadItemExample = () => {
    const [status, setStatus] = useState('idle');
    const [progress, setProgress] = useState(0);
    const [errorMessage, setErrorMessage] = useState([]);
    const [file, setFile] = useState(undefined);
    const simulateUpload = () => {
        setStatus('uploading');
        setProgress(0);
        const interval = setInterval(() => {
            setProgress((prev) => {
                if (prev >= 100) {
                    clearInterval(interval);
                    setStatus('success');
                    return 100;
                }
                return prev + 10;
            });
        }, 200);
    };
    const simulateError = () => {
        setStatus('error');
        setErrorMessage(['File size exceeds limit', 'Invalid file format']);
    };
    const handleCancel = () => {
        console.log('File upload canceled');
        setStatus('idle');
        setProgress(0);
        setErrorMessage([]);
    };
    const handleReload = () => {
        console.log('Retrying upload');
        setStatus('uploading');
        setProgress(0);
        setErrorMessage([]);
        simulateUpload();
    };
    const resetToIdle = () => {
        setStatus('idle');
        setProgress(0);
        setErrorMessage([]);
    };
    const handleFormSubmit = async (data) => {
        const file = data.file;
        setFile(file);
        // Simulate API call
        await new Promise((resolve) => setTimeout(resolve, 1000));
        // eslint-disable-next-line no-alert
        alert(`Form submitted successfully!\n\nFile: ${data.file.name}\nDescription: ${data.description}`);
    };
    return (_jsxs("div", { className: "space-y-6 p-6 max-w-2xl", children: [_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "FileField Integration Example" }), _jsx("p", { className: "text-sm text-gray-600", children: "This example demonstrates how to use FileField within a real Form context, showing file upload states and user interactions in a production-like scenario." }), _jsxs("div", { className: "border rounded-lg p-6 bg-white shadow-sm", children: [_jsx("h4", { className: "text-md font-medium text-gray-700 mb-4", children: "Document Upload Form" }), _jsx(Form, { onSubmit: handleFormSubmit, children: ({ formState: { isSubmitting } }) => (_jsxs("div", { className: "space-y-4 w-[247px]", children: [_jsx(FileField, { name: "file", label: "Upload Document", description: "Choose your document", required: true, maxFileSize: 15728640, dragAndDropEnabled: true, 
                                            // File upload state props
                                            status: status, progress: progress, showPreview: true, errorsUpload: errorMessage, onCancel: handleCancel, onReload: handleReload, fileName: file?.name ?? '', fileSize: file?.size ?? 0, mimeType: file?.type ?? '' }), _jsxs("div", { className: "flex flex-wrap gap-2 pt-2", children: [_jsx("button", { type: "button", onClick: simulateUpload, disabled: status === 'uploading', className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm", children: "Simulate Upload" }), _jsx("button", { type: "button", onClick: simulateError, disabled: status === 'uploading', className: "px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm", children: "Simulate Error" }), _jsx("button", { type: "button", onClick: resetToIdle, className: "px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 text-sm", children: "Reset to Idle" })] }), _jsx("div", { className: "pt-4", children: _jsx(Button, { type: "submit", disabled: isSubmitting, className: "w-full", children: isSubmitting ? 'Submitting...' : 'Submit Document' }) })] })) })] })] }), _jsxs("div", { className: "text-sm text-gray-600 space-y-2", children: [_jsx("h4", { className: "font-medium text-gray-700", children: "How to use this example:" }), _jsxs("ol", { className: "list-decimal list-inside space-y-1 ml-4", children: [_jsx("li", { children: "Select a file using the FileField component in the form above" }), _jsx("li", { children: "Use the control buttons to simulate different upload states" }), _jsx("li", { children: "Submit the form to see how FileField integrates with form submission" }), _jsx("li", { children: "Observe how the FileUploadItem component responds to different props" }), _jsx("li", { children: "Try the cancel and reload functionality" })] })] })] }));
};
export default FileUploadItemExample;
//# sourceMappingURL=file-upload-item-example.js.map