import { Button, IconButton } from '@chakra-ui/react'
import { useSetAtom } from 'jotai'
import { useEffect } from 'react'
import { useTranslation } from 'react-i18next'

import { NostrIcon } from '@/shared/components/icons'

import { useModal } from '../../shared/hooks/useModal'
import { isAccountDuplicateError } from '../../utils'
import { FailedToConnectAccount } from './components/FailedToConnectAccount'
import { NostrHelpModal } from './components/NostrHelpModal'
import { useNostrExtensonLogin } from './hooks/useNostrExtensionLogin'
import { loginMethodAtom } from './state'
import { ConnectWithButtonProps, ExternalAccountType } from './type'

export const ConnectWithNostr = ({ onClose, isIconOnly, ...rest }: Omit<ConnectWithButtonProps, 'accountType'>) => {
  const setLoginMethod = useSetAtom(loginMethodAtom)

  const { connect, error, clearError } = useNostrExtensonLogin()

  const { t } = useTranslation()

  const failedModal = useModal()
  const nostrHelpModal = useModal()

  const handleClick = async () => {
    if (!window.nostr) {
      return nostrHelpModal.onOpen()
    }

    try {
      await connect()
      setLoginMethod(ExternalAccountType.nostr)
    } finally {
      onClose?.()
    }
  }

  useEffect(() => {
    if (error) {
      if (isAccountDuplicateError(error)) {
        failedModal.onOpen()
      }

      clearError()
    }
  }, [error])

  const ButtonComponent = isIconOnly ? IconButton : Button

  const buttonProps = isIconOnly
    ? {
        icon: <NostrIcon boxSize={'16px'} />,
      }
    : {
        leftIcon: <NostrIcon boxSize={'16px'} />,
      }

  if (!window.nostr) {
    return null
  }

  return (
    <>
      <ButtonComponent
        aria-label="Connect with Nostr"
        size="lg"
        variant="solid"
        colorScheme="violet"
        onClick={handleClick}
        {...buttonProps}
        {...rest}
      >
        {!isIconOnly && rest.children ? rest.children : t('Nostr')}
      </ButtonComponent>
      <NostrHelpModal {...nostrHelpModal} />
      <FailedToConnectAccount {...failedModal} />
    </>
  )
}