import React, { FC, useEffect, useRef, useState } from 'react'
import { Button, Notice, Stack, ValidatedInputControl } from '@wordpress/ui'
import { useI18n } from '@wordpress/react-i18n'
import {
  connectToMybring,
  isKeyAccepted,
  parseMybringKey,
} from '../model/mybringKey'

export declare interface ActivationKeyFormProps {
  prominent: boolean
  /** Whether to move focus into the key field, when the merchant opened it */
  focusOnOpen: boolean
  onConnected: () => void
}

/**
 * Lets the merchant activate the plugin by pasting the activation key copied
 * from Mybring, without leaving the landing page.
 */
const ActivationKeyForm: FC<ActivationKeyFormProps> = ({
  prominent,
  focusOnOpen,
  onConnected,
}) => {
  const { __ } = useI18n()
  const [key, setKey] = useState<string>('')
  const [activating, setActivating] = useState<boolean>(false)
  const [problem, setProblem] = useState<'rejected' | 'failed' | null>(null)
  const keyField = useRef<HTMLInputElement>(null)

  useEffect(() => {
    if (focusOnOpen) {
      keyField.current?.focus()
    }
  }, [focusOnOpen])

  const mybringKey = parseMybringKey(key.trim())
  const invalidKey = key.trim() !== '' && !mybringKey

  const activate = async () => {
    if (!mybringKey || activating) {
      return
    }
    setActivating(true)
    setProblem(null)
    const outcome = await connectToMybring(mybringKey)
      .then(response => (isKeyAccepted(response) ? 'accepted' : 'rejected'))
      .catch(() => 'failed' as const)
    setActivating(false)
    if (outcome === 'accepted') {
      onConnected()
    } else {
      setProblem(outcome)
    }
  }

  return (
    <Stack direction="column" gap="md">
      {problem === 'rejected' && (
        <Notice.Root intent="error">
          <Notice.Title>
            {__("The key wasn't accepted", 'posten-bring-checkout')}
          </Notice.Title>
          <Notice.Description>
            {__(
              'Check that you copied the key for this webshop from Mybring, and try again.',
              'posten-bring-checkout'
            )}
          </Notice.Description>
        </Notice.Root>
      )}
      {problem === 'failed' && (
        <Notice.Root intent="warning">
          <Notice.Title>
            {__(
              "The key couldn't be checked right now",
              'posten-bring-checkout'
            )}
          </Notice.Title>
          <Notice.Description>
            {__('Try again in a few minutes.', 'posten-bring-checkout')}
          </Notice.Description>
        </Notice.Root>
      )}
      <div className="activation-key-form">
        <ValidatedInputControl
          ref={keyField}
          type="password"
          autoComplete="off"
          label={__('Activation key', 'posten-bring-checkout')}
          value={key}
          customValidity={
            invalidKey
              ? {
                  type: 'invalid',
                  message: __(
                    "This doesn't look like an activation key from Mybring. Copy the whole key and try again.",
                    'posten-bring-checkout'
                  ),
                }
              : undefined
          }
          disabled={activating}
          onChange={event => setKey(event.currentTarget.value)}
          onKeyDown={event => event.key === 'Enter' && activate()}
        />
        <Button
          variant={prominent ? 'solid' : 'outline'}
          disabled={!mybringKey || activating}
          loading={activating}
          onClick={activate}
        >
          {__('Activate', 'posten-bring-checkout')}
        </Button>
      </div>
    </Stack>
  )
}

export default ActivationKeyForm