import React, { FC, ReactNode, useEffect, useRef, useState } from 'react'
import { Link, Notice, Stack } from '@wordpress/ui'
import { useI18n } from '@wordpress/react-i18n'
import SetUpStep, { SetUpStepProps, SetUpStepStatus } from './SetUpStep'
import ActivationKeyForm from './ActivationKeyForm'
import useMybringOpened from './useMybringOpened'
import { pluginPageLink } from './pluginPage'
import { SetUpProgress } from './useSetUpProgress'
import { useAnnounce } from '../components/useAnnounce'
import useAutoUpdates from '../model/autoUpdates'

type Audience = 'administrator' | 'others'

type StepOfList = Omit<SetUpStepProps, 'number'> & { content?: ReactNode }

export declare interface SetUpStepsProps {
  progress: SetUpProgress
  /** Whether the user may connect and configure the plugin */
  canConfigure: boolean
  onConnected: () => void
}

/**
 * Walks the merchant through connecting the plugin to Mybring, step by step,
 * marking each step done as the set-up moves on.
 */
const SetUpSteps: FC<SetUpStepsProps> = ({
  progress,
  canConfigure,
  onConnected,
}) => {
  const { __ } = useI18n()
  const [mybringOpened, markMybringOpened] = useMybringOpened()
  const [keyFormAskedFor, setKeyFormAskedFor] = useState<boolean>(false)
  const {
    autoUpdates,
    failed: autoUpdatesFailed,
    turn: turnAutoUpdates,
  } = useAutoUpdates()
  const keyFormOpen = keyFormAskedFor || mybringOpened
  const connected = progress === 'complete'
  const connectedOnArrival = useRef<boolean>(connected)
  const connectedDuringVisit = connected && !connectedOnArrival.current
  const reviewSettingsAction = useRef<HTMLAnchorElement & HTMLButtonElement>(
    null
  )

  useEffect(() => {
    if (connectedDuringVisit) {
      reviewSettingsAction.current?.focus()
    }
  }, [connectedDuringVisit])

  useAnnounce(
    connectedDuringVisit &&
      __(
        'The plugin is connected. Next, review your settings.',
        'posten-bring-checkout'
      )
  )
  const addWebshopStatus: SetUpStepStatus = connected
    ? 'done'
    : mybringOpened
      ? 'started'
      : 'current'
  const connectStatus: SetUpStepStatus = connected
    ? 'done'
    : mybringOpened
      ? 'current'
      : 'next'

  const audience: Audience = canConfigure ? 'administrator' : 'others'
  const connectDescriptions: Record<Audience, string> = {
    administrator: __(
      'Copy the activation key for your webshop in Mybring and paste it here.',
      'posten-bring-checkout'
    ),
    others: __(
      'Only an administrator can connect the plugin. Ask yours to paste the activation key from Mybring here.',
      'posten-bring-checkout'
    ),
  }
  const reviewDescriptions: Record<Audience, string> = {
    administrator: __(
      'Check that your store address is complete, and choose whether labels print automatically and whether customers can return items with Posten.',
      'posten-bring-checkout'
    ),
    others: __(
      'Ask your administrator to check that your store address is complete, and to choose whether labels print automatically and whether customers can return items with Posten.',
      'posten-bring-checkout'
    ),
  }

  const steps: Array<StepOfList> = [
    {
      status: addWebshopStatus,
      title: __('Add your webshop in Mybring', 'posten-bring-checkout'),
      description: __(
        'Register your webshop in the Checkout area of Mybring as an admin user. This gives you the activation key you need in the next step.',
        'posten-bring-checkout'
      ),
      where: __('Mybring › Checkout', 'posten-bring-checkout'),
      action: {
        label: __('Open Mybring', 'posten-bring-checkout'),
        href: 'https://www.mybring.com/checkout',
        external: true,
        onClick: markMybringOpened,
      },
    },
    {
      status: connectStatus,
      title: __('Connect the plugin to Mybring', 'posten-bring-checkout'),
      description: connectDescriptions[audience],
      action:
        canConfigure && !keyFormOpen
          ? {
              label: __('Paste activation key', 'posten-bring-checkout'),
              onClick: () => setKeyFormAskedFor(true),
            }
          : undefined,
      content: canConfigure && !connected && keyFormOpen && (
        <ActivationKeyForm
          prominent={connectStatus === 'current'}
          focusOnOpen={keyFormAskedFor}
          onConnected={onConnected}
        />
      ),
    },
    {
      status: connected ? 'current' : 'todo',
      title: __('Review your settings', 'posten-bring-checkout'),
      description: reviewDescriptions[audience],
      where: __('Posten Bring Checkout › Settings', 'posten-bring-checkout'),
      action: canConfigure
        ? {
            label: __('Open settings', 'posten-bring-checkout'),
            href: pluginPageLink('settings'),
          }
        : undefined,
      actionRef: reviewSettingsAction,
    },
  ]

  // Only offered to those who can turn it on, and shown as done to everyone
  // once it is on, whoever turned it on
  if (autoUpdates?.enabled || autoUpdates?.canChange) {
    steps.push({
      status: autoUpdates.enabled ? 'done' : 'next',
      title: __('Keep the plugin up to date', 'posten-bring-checkout'),
      description: __(
        'WordPress then installs new versions of the plugin as soon as they are out, so you get fixes and changes to Bring services without having to remember it.',
        'posten-bring-checkout'
      ),
      where: __('Plugins › Posten Bring Checkout', 'posten-bring-checkout'),
      action: {
        label: __('Turn on automatic updates', 'posten-bring-checkout'),
        onClick: () => turnAutoUpdates(true),
      },
      content: autoUpdatesFailed && (
        <Notice.Root intent="error">
          <Notice.Description>
            {__(
              'Automatic updates could not be turned on. Please try again.',
              'posten-bring-checkout'
            )}
          </Notice.Description>
        </Notice.Root>
      ),
    })
  }

  return (
    <Stack direction="column" gap="lg">
      <Notice.Root intent="info">
        <Notice.Title>
          {__('Before you start', 'posten-bring-checkout')}
        </Notice.Title>
        <Notice.Description>
          {__(
            'You need a Mybring user with admin access to your company. Not a user yet?',
            'posten-bring-checkout'
          )}{' '}
          <Link
            href="https://www.mybring.com/signup/customer/company"
            openInNewTab
          >
            {__('Register your company', 'posten-bring-checkout')}
          </Link>
        </Notice.Description>
      </Notice.Root>
      <ol className="set-up-steps">
        {steps.map(({ content, ...step }, index) => (
          <SetUpStep key={step.title} number={index + 1} {...step}>
            {content}
          </SetUpStep>
        ))}
      </ol>
    </Stack>
  )
}

export default SetUpSteps