import React, { FC } from 'react'
import { FormToggle } from '@wordpress/components'
import { Notice } from '@wordpress/ui'
import { update } from '@wordpress/icons'
import { useI18n } from '@wordpress/react-i18n'
import { useAnnounce } from './components/useAnnounce'
import SettingsRow from './components/SettingsRow'
import useAutoUpdates from './model/autoUpdates'

export type ToggleAutoUpdatesProps = ReturnType<typeof useAutoUpdates>

/** The settings page follows the status itself, to know whether to show it */
const ToggleAutoUpdates: FC<ToggleAutoUpdatesProps> = ({
  autoUpdates,
  isSaving,
  failed,
  turn,
}) => {
  const { __ } = useI18n()

  const error =
    failed &&
    __(
      'An error occurred while changing automatic updates. Please try again.',
      'posten-bring-checkout'
    )

  useAnnounce(error, 'assertive')

  if (!autoUpdates) {
    return null
  }

  return (
    <SettingsRow
      icon={update}
      title={__('Automatic updates', 'posten-bring-checkout')}
      on={autoUpdates.enabled}
      description={
        <>
          {__(
            'WordPress 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'
          )}
          {!autoUpdates.canChange && (
            <div>
              {__(
                'Your administrator or host decides this for your site.',
                'posten-bring-checkout'
              )}
            </div>
          )}
          {error && (
            <Notice.Root intent="error" className="mts">
              <Notice.Description>{error}</Notice.Description>
            </Notice.Root>
          )}
        </>
      }
    >
      <FormToggle
        aria-label={__('Automatic updates', 'posten-bring-checkout')}
        checked={autoUpdates.enabled}
        disabled={isSaving || !autoUpdates.canChange}
        onChange={() => turn(!autoUpdates.enabled)}
      />
    </SettingsRow>
  )
}

export default ToggleAutoUpdates