import React from 'react'
import {StyleSheet} from 'react-native'
import {usePalette} from 'lib/hooks/usePalette'
import {observer} from 'mobx-react-lite'
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
import {useLanguagePrefs, toPostLanguages} from '#/state/preferences/languages'

export const LanguageToggle = observer(function LanguageToggleImpl({
  code2,
  name,
  onPress,
  langType,
}: {
  code2: string
  name: string
  onPress: () => void
  langType: 'contentLanguages' | 'postLanguages'
}) {
  const pal = usePalette('default')
  const langPrefs = useLanguagePrefs()

  const values =
    langType === 'contentLanguages'
      ? langPrefs.contentLanguages
      : toPostLanguages(langPrefs.postLanguage)
  const isSelected = values.includes(code2)

  // enforce a max of 3 selections for post languages
  let isDisabled = false
  if (langType === 'postLanguages' && values.length >= 3 && !isSelected) {
    isDisabled = true
  }

  return (
    <ToggleButton
      label={name}
      isSelected={isSelected}
      onPress={isDisabled ? undefined : onPress}
      style={[pal.border, styles.languageToggle, isDisabled && styles.dimmed]}
    />
  )
})

const styles = StyleSheet.create({
  languageToggle: {
    borderTopWidth: 1,
    borderRadius: 0,
    paddingHorizontal: 6,
    paddingVertical: 12,
  },
  dimmed: {
    opacity: 0.5,
  },
})