import useMediaQuery from '@mui/material/useMediaQuery';
import { useEffect, useState } from 'react';
import { useTheme } from '../../../theme/hooks/useTheme';
import { useFirstMountState } from '../../../useFirstMountState';
import { useLocalStorage } from '../../../useLocalStorage';
import { useViewportType } from '../../../useViewportType';
const useMobileSidebar = () => {
    const [collapsedIn, setCollapsedIn] = useState(false);
    const onToggleSidebar = () => {
        setCollapsedIn((currentState) => !currentState);
    };
    return {
        collapsedIn,
        onToggleSidebar,
        isPinned: collapsedIn,
        onTogglePin: () => undefined,
    };
};
const useDesktopSidebar = (localStorageKey, isFocusedMode) => {
    const theme = useTheme();
    const isFirstRender = useFirstMountState();
    const isLargeScreen = useMediaQuery(theme.breakpoints.up('xl'));
    /**
     Логика работы комопнента:
     - состояние прикреплен/откреплен запоминается в localStorage
     - значение по умолчанию: прикреплен - для больших экранов, откреплен - на небольших разрешениях
     - для FocusMode по-умолчанию сайдбар всегда откреплен
     */
    const getInitialState = () => {
        if (typeof window === 'undefined') {
            return true;
        }
        return isLargeScreen;
    };
    const [storageState = getInitialState(), setStorageState] = useLocalStorage(localStorageKey, getInitialState());
    const [isPinned, setPinned] = useState(true);
    const [collapsedIn, setCollapsedIn] = useState(true);
    /**
     * Присваивается значение из localStorage внутреннему флагу после монтирования компонента
     * Это необходимо, чтобы предотвратить возникновение ошибки гидратации в nextjs
     * Если пользователь свернул сайдбар, то после перезагрузки страницы, он увидит плавное схлопывание сайдбара.
     * При этом next не будет выдавать ошибку о несоответствии стилей
     */
    useEffect(() => {
        setPinned(storageState);
        setCollapsedIn(storageState);
    }, [storageState]);
    useEffect(() => {
        if (isFocusedMode) {
            setPinned(false);
            setCollapsedIn(false);
            return;
        }
        setPinned(storageState);
        setCollapsedIn(storageState);
    }, [isFocusedMode]);
    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,
    };
};
export const useSidebar = (localStorageKey, isFocusedMode) => {
    const { isMobile } = useViewportType();
    const mobileProviderValues = useMobileSidebar();
    const desktopProviderValues = useDesktopSidebar(localStorageKey, isFocusedMode);
    return isMobile ? mobileProviderValues : desktopProviderValues;
};
