import { useCallback, useState } from 'react'

export type sidebarVisibilityOptions = 'full' | 'small' | 'hidden'

function useSidebarVisibility() {
  const [sidebarVisibility, setSideBarVisibility] = useState<sidebarVisibilityOptions>('full')

  const sidebarToggleText = getSidebarToggleText(sidebarVisibility)

  const toggleSidebarVisibility = useCallback(() => {
    if (sidebarVisibility === 'full') {
      setSideBarVisibility('small')
    } else if (sidebarVisibility === 'small') {
      setSideBarVisibility('hidden')
    } else if (sidebarVisibility === 'hidden') {
      setSideBarVisibility('full')
    }
  }, [setSideBarVisibility, sidebarVisibility, sidebarToggleText])

  return { sidebarVisibility, toggleSidebarVisibility, sidebarToggleText }
}
const getSidebarToggleText = (sidebarVisibility: sidebarVisibilityOptions) => {
  if (sidebarVisibility === 'full') return '<-'
  if (sidebarVisibility === 'small') return '<-'
  if (sidebarVisibility === 'hidden') return '->'
}
export default useSidebarVisibility