import { useI18n } from 'domains/i18n/hooks'
import { selectHasError } from 'domains/interrupt/selectors'
import TranslationsOptionsButton from 'domains/translations/components/options-button'
import {
  useLocaleNativeName,
  useTranslations,
} from 'domains/translations/hooks'
import { className } from 'lib/css'
import { useSelector } from 'react-redux'
import Icon from 'ui/components/layout/icon'
import OptionsButton from 'ui/components/options/options-button'
import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'

export default function AppOptions() {
  const { menuOptions, allowOptionSelection } = useSeamlyOptions()
  const { isAvailable: isTranslationsAvailable } = useTranslations()
  const hasError = useSelector(selectHasError)
  const { t, userLocale } = useI18n()
  const localeNativeName = useLocaleNativeName(userLocale)

  if (
    (!isTranslationsAvailable &&
      (!allowOptionSelection || !menuOptions.length)) ||
    hasError
  ) {
    return null
  }

  const openButtonText = t('translations.settings.openButtonText', {
    hasLanguage: !!localeNativeName,
    language: localeNativeName,
  })

  return (
    <div className={className('chat__options')}>
      {isTranslationsAvailable && (
        <div
          className={className(
            'chat__options-item',
            'chat__options-item--left',
          )}
        >
          <TranslationsOptionsButton classNames={['button--secondary']}>
            <Icon alt={openButtonText} name="newTranslation" size="16" />
            <span className={className('button__text')}>{openButtonText}</span>
          </TranslationsOptionsButton>
        </div>
      )}
      {allowOptionSelection && (
        <div
          className={className(
            'chat__options-item',
            'chat__options-item--right',
          )}
        >
          <OptionsButton />
        </div>
      )}
    </div>
  )
}