import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable no-unused-vars */
/* eslint-disable react/no-unknown-property */
/* eslint-disable max-len */
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { createOnDrop } from '@vitessce/vit-s';
import { TextField, Button, Typography, Card, CardContent, Accordion, AccordionSummary, AccordionDetails, ExpandMore, } from '@vitessce/styles';
import clsx from 'clsx';
import { useStyles } from './launcher-styles.js';
export function LauncherStart(props) {
    const { setIsEditing, setIsUsingLocalFiles, configUrl, setConfigUrl, sourceUrlArr, setSourceUrlArr, setValidConfigFromDroppedData, setStoresFromDroppedData, setLauncherError, } = props;
    const { classes } = useStyles();
    const [spotlightCard, setSpotlightCard] = useState(null);
    // Single dropzone for both data files/folders and config files.
    const dropzoneRef = useRef(null);
    const localDataInputFoldersRef = useRef(null);
    const localDataInputFilesRef = useRef(null);
    const localConfigInputRef = useRef(null);
    // Handlers for drag-and-drop and file input changes.
    const onDropHandler = useMemo(() => createOnDrop({ setViewConfig: setValidConfigFromDroppedData, setStores: setStoresFromDroppedData }, false, // isFileInput
    true), [setValidConfigFromDroppedData, setStoresFromDroppedData]);
    const onFileInputHandler = useMemo(() => createOnDrop({ setViewConfig: setValidConfigFromDroppedData, setStores: setStoresFromDroppedData }, true, // isFileInput
    true), [setValidConfigFromDroppedData, setStoresFromDroppedData]);
    // Effect for setting up drag-and-drop event listeners for data file/folder input.
    useEffect(() => {
        // Make the entire Launcher a dropzone,
        // and then determine whether the dropped file(s) are config or data files
        // (e.g., if a single .json file, assume config; else data).
        const zone = dropzoneRef.current;
        const zoneDataInput1 = localDataInputFoldersRef.current;
        const zoneDataInput2 = localDataInputFilesRef.current;
        const zoneConfigInput = localConfigInputRef.current;
        const onDragEnter = (e) => {
            e.preventDefault();
            setSpotlightCard('data-local');
        };
        const onDragLeave = () => {
            setSpotlightCard(null);
        };
        const onDragOver = (e) => {
            e.preventDefault();
        };
        const onDrop = async (e) => {
            e.preventDefault();
            setIsEditing(false);
            // Clear the other field values.
            setConfigUrl(undefined);
            setSourceUrlArr(undefined);
            // Call onDrop handler passed in from parent of <VitS/Vitessce/> via prop.
            try {
                await onDropHandler(e);
                setIsUsingLocalFiles(true);
            }
            catch (err) {
                setLauncherError(`Error processing dropped files: ${err.message}`);
                setIsEditing(true);
            }
            setSpotlightCard(null);
        };
        const onDataInputChange = async (e) => {
            // Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
            e.preventDefault();
            setIsEditing(false);
            setSpotlightCard('data-local');
            // Clear the other field values.
            setConfigUrl(undefined);
            setSourceUrlArr(undefined);
            try {
                await onFileInputHandler(e);
                setIsUsingLocalFiles(true);
            }
            catch (err) {
                setLauncherError(`Error processing selected files: ${err.message}`);
                setIsEditing(true);
            }
            setSpotlightCard(null);
        };
        const onConfigInputChange = async (e) => {
            // Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
            e.preventDefault();
            setIsEditing(false);
            setSpotlightCard('config-local');
            // Clear the other field values.
            setConfigUrl(undefined);
            setSourceUrlArr(undefined);
            try {
                await onFileInputHandler(e);
                setIsUsingLocalFiles(true);
            }
            catch (err) {
                setLauncherError(`Error processing selected file: ${err.message}`);
                setIsEditing(true);
            }
            setSpotlightCard(null);
        };
        // The dragenter event happens at the moment you drag something in to the target element,
        // and then it stops.
        // The dragover event happens during the time you are dragging something until you drop it.
        zone.addEventListener('dragenter', onDragEnter);
        zone.addEventListener('dragleave', onDragLeave);
        zone.addEventListener('dragover', onDragOver);
        zone.addEventListener('drop', onDrop);
        zoneDataInput1.addEventListener('change', onDataInputChange);
        zoneDataInput2.addEventListener('change', onDataInputChange);
        zoneConfigInput.addEventListener('change', onConfigInputChange);
        return () => {
            zone.removeEventListener('dragenter', onDragEnter);
            zone.removeEventListener('dragleave', onDragLeave);
            zone.removeEventListener('dragover', onDragOver);
            zone.removeEventListener('drop', onDrop);
            zoneDataInput1.removeEventListener('change', onDataInputChange);
            zoneDataInput2.removeEventListener('change', onDataInputChange);
            zoneConfigInput.removeEventListener('change', onConfigInputChange);
        };
    }, [dropzoneRef, localDataInputFoldersRef, localDataInputFilesRef,
        onDropHandler, setIsUsingLocalFiles, setIsEditing, setSpotlightCard,
        onFileInputHandler, setConfigUrl, setSourceUrlArr, setLauncherError,
    ]);
    return (_jsxs("div", { className: classes.launcher, ref: dropzoneRef, children: [_jsxs("div", { className: classes.launcherRow, children: [_jsxs("div", { className: clsx({ [classes.cardDim]: spotlightCard && (spotlightCard === 'config-local' || spotlightCard === 'config-remote') }), children: [_jsx(Typography, { variant: "h5", children: "Begin with data" }), _jsxs("p", { children: ["Let Vitessce ", _jsx("a", { href: "https://vitessce.io/docs/default-config-json/", children: "infer an initial configuration" }), " based on the contents of your ", _jsx("a", { href: "https://vitessce.io/docs/data-types-file-types/", children: "data files." })] })] }), _jsxs("div", { className: classes.launcherCardRow, children: [_jsx(Card, { className: clsx(classes.launcherCard, { [classes.cardDim]: spotlightCard && spotlightCard !== 'data-local' }), children: _jsx("span", { className: classes.cardDashed, children: _jsxs(CardContent, { className: classes.cardContent, children: [_jsxs(Typography, { variant: "h6", children: ["Local data ", _jsx("br", {}), "(Drag and drop)"] }), _jsx("p", { children: "Select or drop local files (or folders) to view them in Vitessce. Vitessce launches with a default configuration (based on file extensions and contents). Files remain local; no upload occurs." }), _jsx("div", { className: classes.buttonSpacer }), _jsxs("div", { className: classes.dataButtonGroup, children: [_jsxs(Button, { component: "label", htmlFor: "data-local-input-directory", variant: "outlined", fullWidth: true, children: [_jsx("span", { children: "Select folder(s)" }), _jsx("input", { id: "data-local-input-directory", type: "file", ref: localDataInputFoldersRef, className: classes.hiddenFileInput, multiple: true, directory: "true", webkitdirectory: "true", mozdirectory: "true" })] }), "\u00A0", _jsxs(Button, { component: "label", htmlFor: "data-local-input-files", variant: "outlined", fullWidth: true, children: [_jsx("span", { children: "Select file(s)" }), _jsx("input", { id: "data-local-input-files", type: "file", ref: localDataInputFilesRef, className: classes.hiddenFileInput, multiple: true })] })] }), _jsx("div", { className: classes.buttonSpacer })] }) }) }), _jsx(Card, { className: clsx(classes.launcherCard, { [classes.cardDim]: spotlightCard && spotlightCard !== 'data-remote' }), children: _jsxs(CardContent, { children: [_jsxs(Typography, { variant: "h6", children: ["Remote data ", _jsx("br", {}), " (Load from URL)"] }), _jsxs("p", { children: ["Enter file (or folder) URLs to view them in Vitessce. Vitessce launches with a default configuration (based on file types and contents). See our ", _jsx("a", { href: "https://vitessce.io/docs/data-hosting/", children: "data hosting" }), " documentation for assistance in making your data accessible to Vitessce.\u00A0"] }), _jsxs("div", { className: classes.textareaAndButton, children: [_jsx(TextField, { multiline: true, label: "Data URL(s)", placeholder: "One or more file URLs (semicolon-separated)", minRows: 2, className: classes.dataUrlTextarea, value: sourceUrlArr ? sourceUrlArr.join(';') : '', onChange: (e) => {
                                                        // Clear existing state.
                                                        setConfigUrl(undefined);
                                                        setSourceUrlArr(e.target.value);
                                                    }, onBlur: () => setSpotlightCard(null), onFocus: () => {
                                                        setSpotlightCard('data-remote');
                                                        // We need to set isEditing, otherwise the launcher UI will disappear
                                                        // as soon as there is a non-empty sourceUrlArr value.
                                                        setIsEditing(true);
                                                    } }), _jsx(Button, { variant: "outlined", onClick: () => {
                                                        setIsEditing(false);
                                                    }, children: "Visualize" })] }), _jsxs(Accordion, { disableGutters: true, style: { marginTop: '5px' }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), "aria-controls": "panel1-content", id: "panel1-header", children: "Specifying file extensions" }), _jsx(AccordionDetails, { children: _jsxs(Typography, { variant: "body2", children: ["Vitessce automatically tries to infer the file type based on the file extension. For URLs with non-standard extensions, the file type can be specified by appending ", _jsxs("code", { children: [_jsx("b", { children: "$" }), "FILE_TYPE"] }), " to the URL. For example, to specify that a folder at ", _jsx("code", { children: "https://example.com/my_data.zarr" }), " is in SpatialData format, use the URL ", _jsxs("code", { children: ["https://example.com/my_data.zarr", _jsx("b", { children: "$" }), "spatialdata.zarr"] }), ". See our ", _jsx("a", { href: "https://vitessce.io/docs/data-types-file-types/", children: "data types and file types documentation" }), " for a list of supported file types."] }) })] })] }) })] })] }), _jsxs("div", { className: classes.launcherRow, children: [_jsxs("div", { className: clsx({ [classes.cardDim]: spotlightCard && (spotlightCard === 'data-local' || spotlightCard === 'data-remote') }), children: [_jsx(Typography, { variant: "h5", children: "Begin with configuration" }), _jsxs("p", { children: ["Use the options below to supply a Vitessce ", _jsx("a", { href: "https://vitessce.io/docs/view-config-json/", children: "configuration in JSON format." })] })] }), _jsxs("div", { className: classes.launcherCardRow, children: [_jsx(Card, { className: clsx(classes.launcherCard, { [classes.cardDim]: spotlightCard && spotlightCard !== 'config-local' }), children: _jsx("span", { className: classes.cardDashed, children: _jsxs(CardContent, { className: classes.cardContent, children: [_jsxs(Typography, { variant: "h6", children: ["Local config file ", _jsx("br", {}), " (Drag and drop)"] }), _jsx("p", { children: "View a configured Vitessce visualization by selecting or dropping a local JSON file." }), _jsx("div", { className: classes.buttonSpacer }), _jsxs(Button, { component: "label", variant: "outlined", fullWidth: true, children: [_jsx("span", { children: "Select file" }), _jsx("input", { type: "file", ref: localConfigInputRef, className: classes.hiddenFileInput, accept: ".json,application/json" })] }), _jsx("div", { className: classes.buttonSpacer })] }) }) }), _jsx(Card, { className: clsx(classes.launcherCard, { [classes.cardDim]: spotlightCard && spotlightCard !== 'config-remote' }), children: _jsxs(CardContent, { children: [_jsxs(Typography, { variant: "h6", children: ["Remote config file ", _jsx("br", {}), " (Load from URL)"] }), _jsxs("p", { children: ["View a configured Vitessce visualization by specifying a URL to a JSON config file. See our ", _jsx("a", { href: "https://vitessce.io/docs/data-hosting/", children: "data hosting" }), " documentation for assistance in making your config file accessible to Vitessce.\u00A0"] }), _jsxs("div", { className: classes.textareaAndButton, children: [_jsx(TextField, { multiline: true, label: "Config URL", placeholder: "Enter a URL", minRows: 2, className: classes.dataUrlTextarea, value: configUrl || '', onChange: (e) => {
                                                        // Clear existing state.
                                                        setSourceUrlArr(undefined);
                                                        setConfigUrl(e.target.value);
                                                    }, onBlur: () => setSpotlightCard(null), onFocus: () => {
                                                        setSpotlightCard('config-remote');
                                                        // We need to set isEditing, otherwise the launcher UI will disappear
                                                        // as soon as there is a non-empty configUrl value.
                                                        setIsEditing(true);
                                                    } }), _jsx(Button, { variant: "outlined", onClick: () => {
                                                        setIsEditing(false);
                                                    }, children: "Visualize" })] })] }) })] })] })] }));
}
