import identity from 'lodash/identity'
import { useEffect, useState } from 'react'

interface UseSessionStateOptions {
  sessionStorageKey: string
  hydrate?: (value: any) => any
  dehydrate?: (value: any) => any
}

const defaultOptions = {
  hydrate: identity,
  dehydrate: identity,
}

/**
 * Same as "useState" but saves the value to local storage each time it changes
 */
const useSessionState = (initialValue: any, userOptions: UseSessionStateOptions) => {
  const { sessionStorageKey, hydrate, dehydrate } = { ...defaultOptions, ...userOptions }
  const [value, setValue] = useState(() => {
    try {
      const valueFromLS = sessionStorage.getItem(sessionStorageKey)

      return valueFromLS ? hydrate(JSON.parse(valueFromLS)) : initialValue
    } catch (error) {
      return initialValue
    }
  })

  useEffect(() => {
    sessionStorage.setItem(sessionStorageKey, JSON.stringify(dehydrate(value)))
  }, [value, sessionStorageKey, dehydrate])

  return [value, setValue]
}

export default useSessionState