import React, { FC } from 'react'
import { __ } from '@wordpress/i18n'
import printingPhoto from '../../../assets/img/automatic-printing.jpg'
import Steps from './Steps'

export const PrintingPhoto: FC = () => (
  <img
    className="tips-photo"
    loading="lazy"
    src={printingPhoto}
    alt={__(
      'A parcel with a Posten label going into a mailbox',
      'posten-bring-checkout'
    )}
  />
)

const LabelSize: FC<{
  shape: 'square' | 'tall'
  size: string
  title: string
  text: string
}> = ({ shape, size, title, text }) => (
  <div className="tips-label-size">
    <span className={`tips-label tips-label-${shape}`} aria-hidden="true">
      {size}
    </span>
    <span className="tips-label-size-text">
      <span className="tips-label-size-title">{title}</span>
      <span className="tips-label-size-description">{text}</span>
    </span>
  </div>
)

/**
 * How automatic label printing is set up, and which label sizes it prints.
 */
export const PrintingStory: FC = () => (
  <>
    <Steps
      heading={__('How to get started', 'posten-bring-checkout')}
      steps={[
        {
          title: __('Create a PrintNode account', 'posten-bring-checkout'),
          text: __(
            "PrintNode connects the plugin to your printer. It's a subscription you set up and pay for yourself.",
            'posten-bring-checkout'
          ),
        },
        {
          title: __('Install the PrintNode client', 'posten-bring-checkout'),
          text: __(
            'Install the PrintNode client on a computer that can reach the printer, and leave it running.',
            'posten-bring-checkout'
          ),
        },
        {
          title: __('Paste the key, pick a printer', 'posten-bring-checkout'),
          text: __(
            'Paste the API key from PrintNode in Settings and choose a printer for each label size.',
            'posten-bring-checkout'
          ),
        },
      ]}
    />
    <div className="tips-section">
      <h3 className="tips-section-heading">
        {__('One printer, or one per label size', 'posten-bring-checkout')}
      </h3>
      <div className="tips-label-sizes">
        <LabelSize
          shape="square"
          size="100×100"
          title={__('Home mailbox parcel', 'posten-bring-checkout')}
          text={__('100 × 100 mm labels', 'posten-bring-checkout')}
        />
        <LabelSize
          shape="tall"
          size="102×192"
          title={__('All other services', 'posten-bring-checkout')}
          text={__(
            '102 × 192 mm labels. Use one printer for everything, or send each size to its own roll.',
            'posten-bring-checkout'
          )}
        />
      </div>
    </div>
  </>
)