import { useI18n } from 'domains/i18n/hooks'
import { useVisibility } from 'domains/visibility/hooks'
import { className } from 'lib/css'
import { useCallback } from 'preact/hooks'
import Icon from 'ui/components/layout/icon'
import { useWindowOpenButtonFocusing } from 'ui/hooks/focus-helper-hooks'
import { useSeamlyLayoutMode } from 'ui/hooks/seamly-state-hooks'

const CollapseButton = () => {
  const { t } = useI18n()
  const { isOpen, closeChat } = useVisibility()
  const { isWindow } = useSeamlyLayoutMode()
  const focusWindowOpenButton = useWindowOpenButtonFocusing()

  const handleClick = useCallback(() => {
    closeChat()
    focusWindowOpenButton()
  }, [closeChat, focusWindowOpenButton])

  return isOpen && isWindow ? (
    <button
      type="button"
      className={className('button', 'collapse-button')}
      onClick={handleClick}
    >
      <Icon name="chevronDown" size="32" alt={t('window.srCollapseButton')} />
    </button>
  ) : null
}

export default CollapseButton