import React, { FC } from 'react'
import { __ } from '@wordpress/i18n'
import { Notice } from '@wordpress/ui'
import Steps from './Steps'
import { tipsDetails } from './tipsDetails'

const CheckoutStatus: FC<{ active: boolean }> = ({ active }) => {
  // Translated up front: the minifier would merge two calls in a ternary into __(active ? a : b), which make-pot cannot read
  const blocks = __(
    'Your checkout already uses blocks.',
    'posten-bring-checkout'
  )
  const classic = __(
    'Your checkout uses the classic checkout. It works today, but new checkout features from WooCommerce come to the block checkout.',
    'posten-bring-checkout'
  )
  return (
    <Notice.Root intent={active ? 'success' : 'info'}>
      <Notice.Description>{active ? blocks : classic}</Notice.Description>
    </Notice.Root>
  )
}

const WhyMoveNow: FC = () => (
  <div className="tips-section">
    <h3 className="tips-section-heading">
      {__('Why move now', 'posten-bring-checkout')}
    </h3>
    <ul className="tips-benefits">
      <li>
        {__(
          'The block checkout is the default checkout in WooCommerce',
          'posten-bring-checkout'
        )}
      </li>
      <li>
        {__(
          'New checkout features from WooCommerce are built for blocks',
          'posten-bring-checkout'
        )}
      </li>
    </ul>
    <p className="tips-body-text">
      {__(
        'Your customers keep the same Posten Bring delivery options when you switch.',
        'posten-bring-checkout'
      )}
    </p>
  </div>
)

const HowToSwitch: FC = () => (
  <Steps
    heading={__('How to switch', 'posten-bring-checkout')}
    steps={[
      {
        title: __('Open the checkout page', 'posten-bring-checkout'),
        text: __(
          'Edit the checkout page in WordPress. The classic checkout shows there as a single block.',
          'posten-bring-checkout'
        ),
      },
      {
        title: __('Transform it to blocks', 'posten-bring-checkout'),
        text: __(
          'Select the classic checkout block and choose to transform it into blocks. WooCommerce sets up the block checkout for you.',
          'posten-bring-checkout'
        ),
      },
      {
        title: __('Save and check', 'posten-bring-checkout'),
        text: __(
          'Save the page and place a test order to check that the Posten Bring delivery options show as before.',
          'posten-bring-checkout'
        ),
      },
    ]}
  />
)

/**
 * Why the merchant should move to the block checkout, and how to switch to it.
 */
export const BlockCheckoutStory: FC = () => {
  const active = tipsDetails().checkoutBlockActive

  return (
    <>
      <CheckoutStatus active={active} />
      <WhyMoveNow />
      {!active && <HowToSwitch />}
    </>
  )
}