import React, { FC } from 'react'
import { Stack } from '@wordpress/ui'
import { useI18n } from '@wordpress/react-i18n'
import singlePrint from '../../../assets/img/Single-Print-1.png'
import multiplePrint from '../../../assets/img/Multi-Print-1.png'
import multiplePrintReview from '../../../assets/img/Multi-Print-2.png'
import HowToSteps from './HowToSteps'
import useHowToStep from './useHowToStep'

const PrintLabelsGuide: FC = () => {
  const { __ } = useI18n()
  const step = useHowToStep()
  const goToOrders = __(
    'Go to your orders page in the sidebar.',
    'posten-bring-checkout'
  )

  return (
    <Stack className="how-to-guide" direction="column" gap="xl">
      <Stack direction="column" gap="md">
        <h3 className="how-to-heading">
          {__('Printing labels for one order', 'posten-bring-checkout')}
        </h3>
        <HowToSteps
          steps={[
            step(1, goToOrders),
            step(
              2,
              __(
                'Click the order you want to print label for.',
                'posten-bring-checkout'
              )
            ),
            step(3, __('Click "Print label"', 'posten-bring-checkout')),
          ]}
        />
        <img className="how-to-image" src={singlePrint} alt="" />
      </Stack>
      <Stack direction="column" gap="md">
        <h3 className="how-to-heading">
          {__('Print labels for multiple orders', 'posten-bring-checkout')}
        </h3>
        <HowToSteps
          steps={[
            step(1, goToOrders),
            step(
              2,
              __(
                'Select the orders you want to print label for. Under "Bulk actions" select "Posten Bring Checkout" and click "Apply"',
                'posten-bring-checkout'
              )
            ),
          ]}
        />
        <img className="how-to-image" src={multiplePrint} alt="" />
        <HowToSteps
          steps={[step(3, __('Click "Print labels"', 'posten-bring-checkout'))]}
        />
        <img className="how-to-image" src={multiplePrintReview} alt="" />
      </Stack>
    </Stack>
  )
}

export default PrintLabelsGuide