"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSidebar = void 0;
const useMediaQuery_1 = __importDefault(require("@mui/material/useMediaQuery"));
const react_1 = require("react");
const useTheme_1 = require("../../../theme/hooks/useTheme");
const useFirstMountState_1 = require("../../../useFirstMountState");
const useLocalStorage_1 = require("../../../useLocalStorage");
const useViewportType_1 = require("../../../useViewportType");
const useMobileSidebar = () => {
    const [collapsedIn, setCollapsedIn] = (0, react_1.useState)(false);
    const onToggleSidebar = () => {
        setCollapsedIn((currentState) => !currentState);
    };
    return {
        collapsedIn,
        onToggleSidebar,
        isPinned: collapsedIn,
        onTogglePin: () => undefined,
    };
};
const useDesktopSidebar = (localStorageKey, isFocusedMode) => {
    const theme = (0, useTheme_1.useTheme)();
    const isFirstRender = (0, useFirstMountState_1.useFirstMountState)();
    const isLargeScreen = (0, useMediaQuery_1.default)(theme.breakpoints.up('xl'));
    /**
     Логика работы комопнента:
     - состояние прикреплен/откреплен запоминается в localStorage
     - значение по умолчанию: прикреплен - для больших экранов, откреплен - на небольших разрешениях
     - для FocusMode по-умолчанию сайдбар всегда откреплен
     */
    const getInitialState = () => {
        if (typeof window === 'undefined') {
            return true;
        }
        return isLargeScreen;
    };
    const [storageState = getInitialState(), setStorageState] = (0, useLocalStorage_1.useLocalStorage)(localStorageKey, getInitialState());
    const [isPinned, setPinned] = (0, react_1.useState)(true);
    const [collapsedIn, setCollapsedIn] = (0, react_1.useState)(true);
    /**
     * Присваивается значение из localStorage внутреннему флагу после монтирования компонента
     * Это необходимо, чтобы предотвратить возникновение ошибки гидратации в nextjs
     * Если пользователь свернул сайдбар, то после перезагрузки страницы, он увидит плавное схлопывание сайдбара.
     * При этом next не будет выдавать ошибку о несоответствии стилей
     */
    (0, react_1.useEffect)(() => {
        setPinned(storageState);
        setCollapsedIn(storageState);
    }, [storageState]);
    (0, react_1.useEffect)(() => {
        if (isFocusedMode) {
            setPinned(false);
            setCollapsedIn(false);
            return;
        }
        setPinned(storageState);
        setCollapsedIn(storageState);
    }, [isFocusedMode]);
    (0, react_1.useEffect)(() => {
        if (isFirstRender) {
            return;
        }
        if (isPinned) {
            setCollapsedIn(true);
        }
    }, [isPinned]);
    const onToggleSidebar = (newValue = false) => {
        if (!isPinned) {
            setCollapsedIn(newValue);
        }
        return;
    };
    const onTogglePin = () => {
        if (isFocusedMode) {
            setPinned(!isPinned);
        }
        else {
            setStorageState(!storageState);
        }
    };
    return {
        collapsedIn,
        onToggleSidebar,
        isPinned,
        onTogglePin,
    };
};
const useSidebar = (localStorageKey, isFocusedMode) => {
    const { isMobile } = (0, useViewportType_1.useViewportType)();
    const mobileProviderValues = useMobileSidebar();
    const desktopProviderValues = useDesktopSidebar(localStorageKey, isFocusedMode);
    return isMobile ? mobileProviderValues : desktopProviderValues;
};
exports.useSidebar = useSidebar;
