import React, { FC, PropsWithChildren, Ref } from 'react'
import { Button } from '@wordpress/components'
import { external } from '@wordpress/icons'
import { Badge, Stack, Text } from '@wordpress/ui'
import { useI18n } from '@wordpress/react-i18n'

export type SetUpStepStatus = 'done' | 'started' | 'current' | 'next' | 'todo'

export type SetUpStepAction = { label: string } & (
  | { href: string; external?: boolean; onClick?: () => void }
  | { onClick: () => void }
)

export declare interface SetUpStepProps {
  number: number
  status: SetUpStepStatus
  title: string
  description: string
  where?: string
  action?: SetUpStepAction
  /** Lets the steps move focus to this step's action */
  actionRef?: Ref<HTMLAnchorElement & HTMLButtonElement>
}

/**
 * A step the merchant has started outside this page, such as opening Mybring,
 * looks done: we cannot tell whether it was finished, and the next step is
 * where they should carry on.
 */
const numberLooks: Record<SetUpStepStatus, 'done' | 'current' | 'next'> = {
  done: 'done',
  started: 'done',
  current: 'current',
  next: 'next',
  todo: 'next',
}

const linkProps = (action: SetUpStepAction) =>
  'href' in action
    ? {
        href: action.href,
        target: action.external ? '_blank' : undefined,
        rel: action.external ? 'noreferrer' : undefined,
        icon: action.external ? external : undefined,
      }
    : {}

/** One numbered step of the set-up, with its status and what to do next. */
const SetUpStep: FC<PropsWithChildren<SetUpStepProps>> = ({
  number,
  status,
  title,
  description,
  where,
  action,
  actionRef,
  children,
}) => {
  const { __ } = useI18n()
  const doneLooking = numberLooks[status] === 'done'

  return (
    <li className="set-up-step">
      <span
        className={`set-up-step__number set-up-step__number--${numberLooks[status]}`}
        aria-hidden="true"
      >
        {number}
      </span>
      <Stack direction="column" gap="xs">
        <Stack direction="row" gap="sm" align="center">
          <h3 className="landing-item-title">{title}</h3>
          {doneLooking ? (
            <Badge intent="stable">{__('Done', 'posten-bring-checkout')}</Badge>
          ) : (
            <Badge intent="none">{__('To do', 'posten-bring-checkout')}</Badge>
          )}
        </Stack>
        <div className="set-up-step__description">
          <p
            className={`landing-text${status === 'todo' ? ' landing-subdued' : ''}`}
          >
            {description}
          </p>
          {status !== 'done' && action && (
            <Button
              ref={actionRef}
              __next40pxDefaultSize
              variant={status === 'current' ? 'primary' : 'secondary'}
              disabled={status === 'todo'}
              accessibleWhenDisabled
              iconPosition="right"
              onClick={action.onClick}
              {...linkProps(action)}
            >
              {action.label}
            </Button>
          )}
        </div>
        {children}
        {where && (
          <Text className="landing-subdued">
            {__('Where:', 'posten-bring-checkout')}{' '}
            <span className="set-up-step__where">{where}</span>
          </Text>
        )}
      </Stack>
    </li>
  )
}

export default SetUpStep