import React from 'react'
import { ExpandableInfoSection } from './components/ExpandableInfoSection'
import { useI18n } from '@wordpress/react-i18n'
import singleBooking1 from '../../assets/img/Single-Booking-1.png'
import singlePrint1 from '../../assets/img/Single-Print-1.png'
import multiPrint1 from '../../assets/img/Multi-Print-1.png'
import multiPrint2 from '../../assets/img/Multi-Print-2.png'
import multiBooking2 from '../../assets/img/Multi-Booking-2.png'
import multiBooking1 from '../../assets/img/Multi-Booking-1.png'

const HowTo = () => {
  const { __ } = useI18n()

  const renderSteps = steps => (
    <div className="flex-dir-col flex how-to-guide-container">
      {steps.map((item, index) => (
        <React.Fragment key={index}>
          <div className="flex align-ifs steps-row">
            <div className="prs step-cell">
              <strong>{item.step}</strong>
            </div>
            <div className="description-cell">{item.description}</div>
          </div>
          {index < steps.length - 1 && <hr className="ma0 separator" />}
        </React.Fragment>
      ))}
    </div>
  )

  const singleBookingSteps = [
    {
      step: __('Step-1', 'posten-bring-checkout'),
      description: __(
        'Go to your orders page in the sidebar.',
        'posten-bring-checkout'
      ),
    },
    {
      step: __('Step-2', 'posten-bring-checkout'),
      description: __(
        'Click the order you want to book shipping for.',
        'posten-bring-checkout'
      ),
    },
    {
      step: __('Step-3', 'posten-bring-checkout'),
      description: __(
        'Review the shipping options and weight, then complete by clicking "Book shipping"',
        'posten-bring-checkout'
      ),
    },
  ]

  const multipleBookingSteps = [
    {
      step: __('Step-1', 'posten-bring-checkout'),
      description: __(
        'Go to your orders page in the sidebar.',
        'posten-bring-checkout'
      ),
    },
    {
      step: __('Step-2', 'posten-bring-checkout'),
      description: __(
        'Select the orders you want to book shipping for. Under "Bulk actions" select "Posten Bring Checkout" and click "Apply"',
        'posten-bring-checkout'
      ),
    },
  ]

  const multipleBookingRemainingSteps = [
    {
      step: __('Step-3', 'posten-bring-checkout'),
      description: __(
        'Review the shipping options and weight, then complete by clicking "Book shipping"',
        'posten-bring-checkout'
      ),
    },
  ]

  const printSingleLabelSteps = [
    {
      step: __('Step-1', 'posten-bring-checkout'),
      description: __(
        'Go to your orders page in the sidebar.',
        'posten-bring-checkout'
      ),
    },
    {
      step: __('Step-2', 'posten-bring-checkout'),
      description: __(
        'Click the order you want to print label for.',
        'posten-bring-checkout'
      ),
    },
    {
      step: __('Step-3', 'posten-bring-checkout'),
      description: __('Click "Print label"', 'posten-bring-checkout'),
    },
  ]

  const printMultipleLabelSteps = [
    {
      step: __('Step-1', 'posten-bring-checkout'),
      description: __(
        'Go to your orders page in the sidebar.',
        'posten-bring-checkout'
      ),
    },
    {
      step: __('Step-2', 'posten-bring-checkout'),
      description: __(
        'Select the orders you want to print label for. Under "Bulk actions" select "Posten Bring Checkout" and click "Apply"',
        'posten-bring-checkout'
      ),
    },
  ]

  const printMultipleLabelRemainingSteps = [
    {
      step: __('Step-3', 'posten-bring-checkout'),
      description: __('Click "Print labels"', 'posten-bring-checkout'),
    },
  ]

  const topics = [
    {
      title: __('Book shipping', 'posten-bring-checkout'),
      content: (
        <>
          <h1>
            {__('Booking transport for one order', 'posten-bring-checkout')}
          </h1>
          {renderSteps(singleBookingSteps)}
          <div className="mbm mtm">
            <img className="how-to-image" src={singleBooking1} alt={''} />
          </div>
          <h1>
            {__('Book shipping for multiple orders', 'posten-bring-checkout')}
          </h1>
          {renderSteps(multipleBookingSteps)}
          <div className="mbm mtm">
            <img className="how-to-image" src={multiBooking1} alt={''} />
          </div>
          {renderSteps(multipleBookingRemainingSteps)}
          <div className="mbm mtm">
            <img className="how-to-image" src={multiBooking2} alt={''} />
          </div>
        </>
      ),
    },
    {
      title: __('Print labels', 'posten-bring-checkout'),
      content: (
        <>
          <h1>
            {__('Printing labels for one order', 'posten-bring-checkout')}
          </h1>
          {renderSteps(printSingleLabelSteps)}
          <div className="mbm mtm">
            <img className="how-to-image" src={singlePrint1} alt={''} />
          </div>

          <h1>
            {__('Print labels for multiple orders', 'posten-bring-checkout')}
          </h1>
          {renderSteps(printMultipleLabelSteps)}
          <div className="mbm mtm">
            <img className="how-to-image" src={multiPrint1} alt={''} />
          </div>
          {renderSteps(printMultipleLabelRemainingSteps)}
          <div className="mbm mtm">
            <img className="how-to-image" src={multiPrint2} alt={''} />
          </div>
        </>
      ),
    },
  ]

  return (
    <>
      {topics.map((topic, index) => (
        <ExpandableInfoSection
          key={index}
          sectionTitle={<h4 className="mrm">{topic.title}</h4>}
          detailsText={topic.content}
          detailsClassNames="pls prs pbm pbs mlm mtm"
          id={`howto-${index}`}
        />
      ))}
    </>
  )
}

export default HowTo