import React, { FC } from 'react'
import { Stack } from '@wordpress/ui'
import { useI18n } from '@wordpress/react-i18n'
import singleBooking from '../../../assets/img/Single-Booking-1.png'
import multipleBooking from '../../../assets/img/Multi-Booking-1.png'
import multipleBookingReview from '../../../assets/img/Multi-Booking-2.png'
import HowToSteps from './HowToSteps'
import useHowToStep from './useHowToStep'

const BookShippingGuide: FC = () => {
  const { __ } = useI18n()
  const step = useHowToStep()
  const goToOrders = __(
    'Go to your orders page in the sidebar.',
    'posten-bring-checkout'
  )
  const review = __(
    'Review the shipping options and weight, then complete by clicking "Book shipping"',
    'posten-bring-checkout'
  )

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

export default BookShippingGuide