import { useStartChatIcon } from 'domains/config/hooks'
import { useI18n } from 'domains/i18n/hooks'
import { selectHasError } from 'domains/interrupt/selectors'
import { useVisibility } from 'domains/visibility/hooks'
import { className } from 'lib/css'
import { TargetedMouseEvent } from 'preact'
import { useCallback } from 'preact/hooks'
import { useSelector } from 'react-redux'
import Icon from 'ui/components/layout/icon'
import InOutTransition, {
  transitionStartStates,
} from 'ui/components/widgets/in-out-transition'
import {
  useSkiplinkElementFocusing,
  useSkiplinkTargetFocusing,
} from 'ui/hooks/focus-helper-hooks'
import { useSeamlyHasConversation } from 'ui/hooks/seamly-api-hooks'
import { useSeamlyStateContext } from 'ui/hooks/seamly-hooks'
import {
  useSeamlyCurrentAgent,
  useSeamlyUnreadCount,
} from 'ui/hooks/seamly-state-hooks'

const ButtonIcon = () => {
  const startChatIcon = useStartChatIcon()
  const currentAgent = useSeamlyCurrentAgent()
  const hasError = useSelector(selectHasError)
  const isActiveConversation = currentAgent && !hasError
  const src = isActiveConversation ? currentAgent.avatar : startChatIcon
  return src ? (
    <img
      className={className(isActiveConversation ? 'avatar' : 'icon')}
      src={src}
      alt=""
    />
  ) : (
    <Icon name="avatar" size="32" alt="" />
  )
}

const WindowOpenButton = ({ onClick }) => {
  const hasConversation = useSeamlyHasConversation()
  const { t } = useI18n()
  const ariaLabel = hasConversation()
    ? t('window.openButton.srContinue')
    : t('window.openButton.srStart')
  const focusSkipLinkELement = useSkiplinkElementFocusing()
  const focusSkiplinkTarget = useSkiplinkTargetFocusing()
  const { isOpen } = useVisibility()
  const { windowOpenButtonId } = useSeamlyStateContext()
  const count = useSeamlyUnreadCount()

  const handleClick = useCallback(
    (event: TargetedMouseEvent<HTMLButtonElement>) => {
      onClick()
      if (event.detail > 0) {
        // Mouse was used: focus the input element
        focusSkiplinkTarget()
      } else {
        // Keyboard was used: focus the skiplink element instead to improve
        // accessibility for keyboard users.
        focusSkipLinkELement()
      }
    },
    [focusSkipLinkELement, focusSkiplinkTarget, onClick],
  )

  return (
    <InOutTransition
      isActive={!isOpen}
      transitionStartState={transitionStartStates.rendered}
    >
      <button
        type="button"
        className={className('window-open-button')}
        aria-label={ariaLabel}
        onClick={handleClick}
        inert={isOpen || undefined}
        id={windowOpenButtonId}
      >
        <InOutTransition
          isActive={!!count}
          transitionStartState={transitionStartStates.notRendered}
        >
          <span className={className('message-count')} aria-hidden="true">
            {count}
          </span>
        </InOutTransition>
        <ButtonIcon />
      </button>
    </InOutTransition>
  )
}

export default WindowOpenButton