import { useEffect, useRef, EffectCallback } from 'react'
import { useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'
import isEqual from 'lodash/isEqual'

import { getAuthenticated, getChecked, getAuthenticatedUser } from '../selectors/authentication'
import { getTheme } from '../selectors/theme'

export const useAuthenticationCheck = () => {
    const checked = useSelector(getChecked)
    const authenticated = useSelector(getAuthenticated)
    const history = useHistory()

    useEffect(() => {
        if (checked && !authenticated) history.push('/login')
    }, [checked, authenticated])
}

const useDeepCompareMemoize = (value: any) => {
    const ref = useRef()

    if (!isEqual(value, ref.current)) {
        ref.current = value
    }

    return ref.current
}

export const useDeepCompareEffect = (callback: EffectCallback, deps?: readonly any[] | undefined) => {
    useEffect(callback, useDeepCompareMemoize(deps))
}

export const useTheme = () => useSelector(getTheme)

export function useSetting<T>(key: string): T | undefined
export function useSetting<T>(key: string, defaultValue: T): T
export function useSetting<T>(key: string, defaultValue?: T): T | undefined {
    const user = useSelector(getAuthenticatedUser)
    if (!user || !user.settings) return defaultValue

    return user.settings[key] ?? defaultValue
}