import React, { useState, useEffect, useCallback } from 'react';
import { useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useConfig } from '../../utilities/Config';
import { useAuth } from '../../utilities/Auth';
import { useStepNav } from '../../elements/StepNav';
import usePayloadAPI from '../../../hooks/usePayloadAPI';
import { useLocale } from '../../utilities/Locale';
import RenderCustomComponent from '../../utilities/RenderCustomComponent';
import DefaultGlobal from './Default';
import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
import { useDocumentInfo } from '../../utilities/DocumentInfo';
import { usePreferences } from '../../utilities/Preferences';
const GlobalView = (props) => {
    var _a;
    const { state: locationState } = useLocation();
    const locale = useLocale();
    const { setStepNav } = useStepNav();
    const { user } = useAuth();
    const [initialState, setInitialState] = useState();
    const { getVersions, preferencesKey, docPermissions, getDocPermissions } = useDocumentInfo();
    const { getPreference } = usePreferences();
    const { t } = useTranslation();
    const { serverURL, routes: { api, }, } = useConfig();
    const { global } = props;
    const { slug, label, fields, admin: { components: { views: { Edit: CustomEdit, } = {}, } = {}, } = {}, } = global;
    const onSave = useCallback(async (json) => {
        getVersions();
        getDocPermissions();
        const state = await buildStateFromSchema({ fieldSchema: fields, data: json.result, operation: 'update', user, locale, t });
        setInitialState(state);
    }, [getVersions, fields, user, locale, t, getDocPermissions]);
    const [{ data }] = usePayloadAPI(`${serverURL}${api}/globals/${slug}`, { initialParams: { 'fallback-locale': 'null', depth: 0, draft: 'true' } });
    const dataToRender = (locationState === null || locationState === void 0 ? void 0 : locationState.data) || data;
    useEffect(() => {
        const nav = [{
                label,
            }];
        setStepNav(nav);
    }, [setStepNav, label]);
    useEffect(() => {
        const awaitInitialState = async () => {
            const state = await buildStateFromSchema({ fieldSchema: fields, data: dataToRender, user, operation: 'update', locale, t });
            await getPreference(preferencesKey);
            setInitialState(state);
        };
        awaitInitialState();
    }, [dataToRender, fields, user, locale, getPreference, preferencesKey, t]);
    return (React.createElement(RenderCustomComponent, { DefaultComponent: DefaultGlobal, CustomComponent: CustomEdit, componentProps: {
            isLoading: !initialState || !docPermissions,
            data: dataToRender,
            permissions: docPermissions,
            initialState,
            global,
            onSave,
            apiURL: `${serverURL}${api}/globals/${slug}${((_a = global.versions) === null || _a === void 0 ? void 0 : _a.drafts) ? '?draft=true' : ''}`,
            action: `${serverURL}${api}/globals/${slug}?locale=${locale}&depth=0&fallback-locale=null`,
        } }));
};
export default GlobalView;
