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

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { forwardRef, useState } from 'react';
import styled from 'styled-components';
import { extractStyles, filterBaseProps, POSITION_STYLES, } from '../../../tasty';
import { Button } from '../../actions';
import { Block } from '../../Block';
import { Text } from '../../content/Text';
import { Flex } from '../../layout/Flex';
const DEFAULT_STYLES = {
    display: 'inline-flex',
    padding: '.75x 1x',
    gap: '1x',
    flow: 'row',
    placeItems: 'center',
    fill: '#white',
    border: true,
    preset: 't3',
};
export const Base64Upload = styled(forwardRef(function Base64Upload(allProps, ref) {
    const { onInput, ...props } = allProps;
    const styles = extractStyles(props, POSITION_STYLES, DEFAULT_STYLES);
    const [file, setFile] = useState();
    const [error, setError] = useState('');
    function onInputFile(e) {
        if (!e.target)
            return;
        const localFile = e.target.files[0];
        const reader = new FileReader();
        setError('');
        if (!localFile)
            return;
        if (!localFile.name.endsWith('.json')) {
            setError('Incorrect format. JSON file is required');
            return;
        }
        reader.onload = function () {
            /**
             * @type {string}
             */
            const text = String(reader.result);
            let base64text;
            try {
                JSON.parse(text);
                base64text = btoa(text);
            }
            catch (e) {
                setError('Invalid JSON file');
                console.error(e);
                return;
            }
            onInput &&
                onInput({
                    encoded: base64text,
                    raw: JSON.parse(text),
                });
            setFile(localFile.name);
        };
        try {
            reader.readAsText(localFile);
        }
        catch (e) {
            setError('Invalid file');
        }
    }
    return (_jsxs(_Fragment, { children: [_jsxs(Button, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, children: [_jsx(Flex, { radius: "round", fill: "#purple.10", color: "#dark-02", padding: "0 1x", height: "($size - 1x + 2bw)", placeItems: "center", children: "Choose file" }), _jsx(Block, { color: "#dark-04", children: file || 'No file selected' }), _jsx("input", { type: "file", name: "base64", accept: ".json", onInput: onInputFile })] }), error && _jsx(Text.Danger, { color: "danger", children: error })] }));
})) `
  appearance: none;
  cursor: var(--pointer);
  outline: none;

  & input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    cursor: var(--pointer);
    width: 100%;
    height: 100%;
  }

  && {
    border: var(--border-width) solid rgb(var(--dark-02-color-rgb) / 0.1);
  }

  &&:not([data-hovered]) {
    background: rgb(var(--purple-color) / 0);
  }

  &&[data-hovered] {
    background: rgb(var(--purple-color) / 0.1);
  }
`;

        