import React, { FC, useState } from 'react'
import { Button } from '@wordpress/components'
import { useI18n } from '@wordpress/react-i18n'
import { useAnnounce } from './useAnnounce'
import useAutoUpdates, { AutoUpdates } from '../model/autoUpdates'

export declare interface TurnOnAutoUpdatesProps {
  /** The status, when the page already has it */
  known?: AutoUpdates
  /** Whether to say so when automatic updates are already on */
  confirmWhenOn?: boolean
  variant?: 'secondary' | 'link'
}

/**
 * Offers to turn on automatic updates of the plugin to merchants who can, so
 * that being asked to update is the last time they need to do it by hand.
 */
const TurnOnAutoUpdates: FC<TurnOnAutoUpdatesProps> = ({
  known,
  confirmWhenOn = false,
  variant = 'secondary',
}) => {
  const { __ } = useI18n()
  const { autoUpdates, isSaving, failed, turn } = useAutoUpdates(known)
  const [askedFor, setAskedFor] = useState<boolean>(false)
  const turnedOnHere = askedFor && Boolean(autoUpdates?.enabled)
  const turnedOn = __('Automatic updates are on.', 'posten-bring-checkout')
  const error = __(
    'Automatic updates could not be turned on. Please try again.',
    'posten-bring-checkout'
  )

  useAnnounce(turnedOnHere && turnedOn)
  useAnnounce(failed && error, 'assertive')

  if (!autoUpdates) {
    return null
  }

  if (autoUpdates.enabled) {
    return confirmWhenOn || turnedOnHere ? (
      <span className="auto-updates-on">{turnedOn}</span>
    ) : null
  }

  if (!autoUpdates.canChange) {
    return null
  }

  return (
    <span className="turn-on-auto-updates">
      <Button
        __next40pxDefaultSize={variant !== 'link'}
        variant={variant}
        isBusy={isSaving}
        disabled={isSaving}
        accessibleWhenDisabled
        onClick={() => {
          setAskedFor(true)
          turn(true)
        }}
      >
        {__('Turn on automatic updates', 'posten-bring-checkout')}
      </Button>
      {failed && <span className="turn-on-auto-updates__error">{error}</span>}
    </span>
  )
}

export default TurnOnAutoUpdates