"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Wizard = exports.reducer = exports.initialState = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const helper_1 = require("./helper");
const AdaptableConfigurationDialog_1 = tslib_1.__importDefault(require("./AdaptableConfigurationDialog"));
const FileDroppable_1 = tslib_1.__importDefault(require("../../components/FileDroppable"));
const Utils_1 = require("./Utils");
const Flex_1 = require("../../components/Flex");
exports.initialState = {
    dropped: false,
};
const reducer = (state, action) => {
    if (action.type === 'DROPPED') {
        return {
            ...state,
            adaptableOptions: action.payload.adaptableOptions,
            gridOptions: action.payload.gridOptions,
            dropped: true,
            error: null,
        };
    }
    if (action.type === 'ERROR') {
        return {
            ...state,
            dropped: false,
            error: action.payload,
        };
    }
    if (action.type === 'CANCEL') {
        return {
            ...state,
            error: null,
            dropped: false,
        };
    }
    return state;
};
exports.reducer = reducer;
/**
 * The wizard in a few modes:
 *
 * 1. Based on data:
 * 1.1 Drag and drop a file
 * 1.2 Fetch data from a url
 *
 * 2. Based on configuration:
 * Provide a schema, on how the data looks like.
 */
const Wizard = (props) => {
    const [state, dispatch] = (0, react_1.useReducer)(exports.reducer, {
        ...exports.initialState,
        adaptableOptions: props.adaptableOptions,
        gridOptions: props.gridOptions,
    });
    const [droppableKey, setDroppableKey] = (0, react_1.useState)(Date.now());
    const [isDataLoading, setIsDataLoading] = (0, react_1.useState)(false);
    const handleDataSource = (array, file) => {
        const dataSourceInfo = (props.prepareData || helper_1.prepareDataSource)(array, file);
        try {
            (0, Utils_1.validDataSource)(dataSourceInfo);
        }
        catch (err) {
            return dispatch({
                type: 'ERROR',
                payload: `Invalid adaptable configuration - ${err}`,
            });
        }
        const gridOptions = (0, helper_1.prepareGridOptions)(dataSourceInfo, props.gridOptions);
        const adaptableOptions = { ...props.adaptableOptions };
        adaptableOptions.adaptableId = adaptableOptions.adaptableId || (file ? file.name : '');
        if (dataSourceInfo.primaryKey) {
            adaptableOptions.primaryKey = dataSourceInfo.primaryKey;
        }
        const shouldShowWizard = props.fetchData ? Boolean(props.showFetchDataWizard) : true;
        if (shouldShowWizard) {
            dispatch({
                type: 'DROPPED',
                payload: { adaptableOptions, gridOptions },
            });
        }
        else {
            props.onInit(adaptableOptions, gridOptions);
        }
    };
    let wizard;
    if (props.skipToWizard || state.dropped) {
        wizard = (React.createElement(AdaptableConfigurationDialog_1.default, { startSections: props.startSections, adaptableConfig: {
                adaptableOptions: state.adaptableOptions,
                gridOptions: state.gridOptions,
            }, onCancel: () => {
                // change the file droppable component key
                // so it's remounted and it's in the initial state
                setDroppableKey(Date.now());
                dispatch({
                    type: 'CANCEL',
                });
            }, onFinish: (adaptableConfig) => {
                props.onInit(adaptableConfig.adaptableOptions, adaptableConfig.gridOptions);
            } }));
    }
    (0, react_1.useEffect)(() => {
        if (props.fetchData) {
            setIsDataLoading(true);
            props.fetchData().then((data) => {
                handleDataSource(data);
                setIsDataLoading(false);
            });
        }
    }, []);
    const ddEnabled = props.ddEnabled ?? !props.fetchData;
    return (React.createElement(React.Fragment, null,
        ddEnabled && (React.createElement(FileDroppable_1.default, { key: droppableKey, className: 'ab-NocodeWizard', toJSON: props.fileContentsToJSON, readFile: props.readFile, fileAccept: props.fileAccept, helpText: props.helpText, message: state.error, defaultText: props.defaultActionMessage, dragOverText: props.dragOverActionMessage, loadingText: props.loadingMessage, onDropSuccess: handleDataSource })),
        isDataLoading && (React.createElement(Flex_1.Flex, { className: 'ab-NocodeWizard', alignItems: "center", justifyContent: "center", flexDirection: "column" }, props.loadingMessage || 'Loading ...')),
        wizard));
};
exports.Wizard = Wizard;
