import { Dispatch, SetStateAction, useEffect, useState } from 'react';

export function usePersistedState<S = undefined> (key: string, defaultValue: S): [ S | undefined, Dispatch<SetStateAction<S | undefined>> ] {
    const [ state, setState ] = useState(
        () => {
            try {
                const item = localStorage.getItem(key);

                return JSON.parse(item || (String(defaultValue)));
            } catch (e) {
                console.warn('Failed to retrieve persisted value from store.', e);

                return defaultValue;
            }
        },
    );

    useEffect(() => {
        localStorage.setItem(key, JSON.stringify(state));
    }, [ key, state ]);

    return [ state, setState ];
}