/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-c015414
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createFocusableRef } from '@react-spectrum/utils';
import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from 'react';
import { useProviderProps } from '../../../provider.js';
import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty/index.js';
import { useCombinedRefs } from '../../../utils/react/index.js';
import { Action } from '../../actions/index.js';
import { useFieldProps, useFormProps, wrapWithField } from '../../form/index.js';
const FileInputElement = tasty(Action, {
    qa: 'FileInputWrapper',
    styles: {
        display: 'inline-flex',
        position: 'relative',
        preset: 't3',
        padding: '.5x 1x',
        gap: '1x',
        flow: 'row',
        placeItems: 'center start',
        fill: {
            '': '#white',
            'drag-hover': '#purple.16',
            ':hover': '#purple.08',
            disabled: '#dark.04',
        },
        border: {
            '': true,
            ':focus-within & :focus-visible': '#purple-text',
        },
        radius: true,
        cursor: '$pointer',
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        Button: {
            radius: true,
            border: {
                '': '#clear',
                pressed: '#purple.30',
            },
            fill: '#purple.12',
            color: {
                '': '#purple',
                disabled: '#dark.30',
            },
            padding: '.5x (1.5x - 1px)',
            transition: 'theme',
        },
        Placeholder: {
            color: '#dark-02',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            width: 'max 100%',
            overflow: 'hidden',
        },
        Value: {
            color: '#dark-02',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            width: 'max 100%',
            overflow: 'hidden',
        },
        Input: {
            position: 'absolute',
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
            radius: '$content-radius',
            opacity: 0.01,
            cursor: '$pointer',
            zIndex: 10,
        },
    },
});
function extractContents(element, callback) {
    const files = element?.files;
    if (files && files.length > 0) {
        const fileReader = new FileReader();
        fileReader.onload = function () {
            callback(fileReader.result);
        };
        fileReader.readAsText(files[0]);
    }
}
function extractFileNameFromValue(value) {
    return typeof value === 'string'
        ? value.split('\\')?.pop()
        : undefined;
}
function FileInput(props, ref) {
    props = useProviderProps(props);
    props = useFormProps(props);
    props = useFieldProps({ ...props }, {
        defaultValidationTrigger: 'onChange',
        valuePropsMapper: ({ value, onChange }) => ({
            onChange,
            value: props.type === 'file' || !props.type ? value : undefined,
        }),
    });
    let { id, name, qa, value, onChange, placeholder, inputRef, isDisabled, inputStyles, type = 'file', inputProps, accept, form, ...otherProps } = props;
    const [dragHover, setDragHover] = useState(false);
    const defaultValue = useMemo(() => (type === 'file' ? value : undefined), [type, value]);
    const defaultFileName = useMemo(() => extractFileNameFromValue(defaultValue), []);
    const [fileName, setFileName] = useState(defaultFileName);
    let domRef = useRef(null);
    inputRef = useCombinedRefs(inputRef);
    const onLocalChange = useCallback((event) => {
        const value = event.target.value;
        setFileName(extractFileNameFromValue(value));
        if (type === 'file') {
            onChange?.(value);
        }
        else {
            extractContents(event.target, onChange);
        }
    }, [onChange]);
    let styles = extractStyles(otherProps, CONTAINER_STYLES);
    // Expose imperative interface for ref
    useImperativeHandle(ref, () => ({
        ...createFocusableRef(domRef, inputRef),
        select() {
            if (inputRef?.current) {
                inputRef.current.select();
            }
        },
        getInputElement() {
            return inputRef?.current;
        },
    }));
    const fileInput = (_jsxs(FileInputElement, { ref: domRef, styles: inputStyles, isDisabled: isDisabled, mods: {
            selected: !!value,
            'drag-hover': dragHover,
        }, onKeyDown: (e) => {
            if (e.key === 'Enter' || e.key === 'Space') {
                inputRef?.current?.click();
            }
        }, children: [_jsx("input", { ref: inputRef, id: id, name: name, accept: accept, "data-qa": qa || 'FileInput', "data-input-type": "fileinput", "data-element": "Input", disabled: isDisabled, type: "file", multiple: false, tabIndex: -1, onChange: onLocalChange, onDragEnter: () => {
                    setDragHover(true);
                }, onDragLeave: () => {
                    setDragHover(false);
                }, onDrop: () => {
                    setDragHover(false);
                }, ...inputProps }), _jsx("div", { "data-element": "Button", children: "Choose file" }), _jsx("div", { "data-element": fileName ? 'Value' : 'Placeholder', children: fileName || placeholder || 'No file selected' })] }));
    return wrapWithField(fileInput, domRef, {
        ...props,
    });
}
/**
 * FileInputs are file inputs that allow users to select local files to
 * upload them to the server.
 */
const _FileInput = forwardRef(FileInput);
_FileInput.displayName = 'FileInput';
export { _FileInput as FileInput };

        