import { useI18n } from 'domains/i18n/hooks'
import { useAppDispatch } from 'domains/store'
import {
  hideOption as dispatchHideOption,
  showOption as dispatchShowOption,
  setUserSelectedOption as dispatchUserSelectedOption,
  setUserSelectedOptions as dispatchUserSelectedOptions,
} from 'domains/store/slice'
import { useCallback } from 'preact/hooks'
import { useElementFocusingById } from 'ui/hooks/focus-helper-hooks'
import { useSeamlyObjectStore } from 'ui/hooks/seamly-api-hooks'
import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'

export const useSeamlyOptions = () => {
  const { t } = useI18n()
  const { options } = useSeamlyStateContext()

  const { panelActive, optionActive, userSelectedOptions, features } = options

  const { extraMenuItem, sendTranscript } = features

  const optionsObj = { extraMenuItem, sendTranscript }

  const menuTitle = (option) => {
    return option === 'extraMenuItem'
      ? 'Extra menu item'
      : t(`options.${option}.menuTitle`)
  }

  const menuOptions = Object.keys(optionsObj)
    .filter((key) => {
      return optionsObj[key]
    })
    .map((option) => ({
      name: option,
      title: menuTitle(option),
      available: optionsObj[option].enabled,
    }))

  const allowOptionSelection = extraMenuItem || sendTranscript

  const dispatch = useAppDispatch()
  const { get, set } = useSeamlyObjectStore()

  const initUserSelectedOptions = useCallback(() => {
    const storedOptions = get('options') || {}
    dispatch(dispatchUserSelectedOptions(storedOptions))
  }, [get, dispatch])

  const setUserSelectedOptions = useCallback(
    (optionValues) => {
      dispatch(dispatchUserSelectedOptions(optionValues))
      set('options', optionValues)
    },
    [set, dispatch],
  )

  const setUserSelectedOption = useCallback(
    (option, value) => {
      const storedOptions = get('options') || {}
      if (typeof storedOptions === 'object') {
        set('options', {
          ...storedOptions,
          [option]: value,
        })
      }
      dispatch(dispatchUserSelectedOption({ option, value }))
    },
    [dispatch, get, set],
  )

  const showOption = (optionName) => {
    dispatch(dispatchShowOption(optionName))
  }

  const hideOption = () => {
    dispatch(dispatchHideOption())
  }

  return {
    allowOptionSelection,
    userSelectedOptions,
    features,
    menuOptions,
    initUserSelectedOptions,
    setUserSelectedOptions,
    setUserSelectedOption,
    showOption,
    hideOption,
    panelActive,
    optionActive,
  }
}

export const useOptionButton = () => {
  const { optionsButtonId: id } = useSeamlyStateContext()
  const focusButton = useElementFocusingById(id)

  return { id, focusButton }
}