import React, { FC } from 'react'
import { useI18n } from '@wordpress/react-i18n'
import { getAdminLink } from '@woocommerce/settings'
import TurnOnAutoUpdates from './TurnOnAutoUpdates'
import useAutoUpdates, { AutoUpdates } from '../model/autoUpdates'

export declare interface UpdateAvailableBannerProps {
  /** The status prefetched with the order */
  autoUpdates: AutoUpdates
}

/**
 * Tells the merchant a new version is out. Once they turn on automatic
 * updates here, it only confirms that, as WordPress installs it by itself.
 */
const UpdateAvailableBanner: FC<UpdateAvailableBannerProps> = ({
  autoUpdates: known,
}) => {
  const { __ } = useI18n()
  const { autoUpdates } = useAutoUpdates(known)

  return (
    <span className="update-available">
      {!autoUpdates?.enabled && (
        <>
          {__(
            'New version of Posten Bring Checkout available! ',
            'posten-bring-checkout'
          )}
          <a href={getAdminLink('plugins.php')}>
            {__('Update now.', 'posten-bring-checkout')}
          </a>{' '}
        </>
      )}
      <TurnOnAutoUpdates known={known} variant="link" />
    </span>
  )
}

export default UpdateAvailableBanner