import React, { FC } from 'react'
import { __ } from '@wordpress/i18n'

const SWEDEN =
  'M167.8 59.5 L178.8 74.0 L192.8 80.6 L198.8 96.0 L201.8 109.2 L203.8 131.2 L183.8 135.6 L174.8 153.2 L165.8 175.2 L148.8 192.8 L135.8 206.0 L134.8 243.4 L148.8 272.0 L132.8 289.6 L128.9 313.8 L126.9 331.4 L118.9 342.4 L106.9 355.6 L92.9 360.0 L91.9 353.4 L88.9 344.6 L82.9 324.8 L81.9 309.4 L74.9 294.0 L74.9 283.0 L75.9 278.6 L81.9 261.0 L87.9 250.0 L84.9 236.8 L88.9 223.6 L83.9 208.2 L84.9 192.8 L82.9 179.6 L92.9 159.8 L102.9 146.6 L107.9 131.2 L116.9 120.2 L126.9 100.4 L141.8 82.8 L143.8 71.8 Z'
const NORWAY =
  'M75.9 278.6 L81.9 261.0 L87.9 250.0 L84.9 236.8 L88.9 223.6 L83.9 208.2 L84.9 192.8 L82.9 179.6 L92.9 159.8 L102.9 146.6 L107.9 131.2 L116.9 120.2 L126.9 100.4 L141.8 82.8 L143.8 71.8 L167.8 59.5 L172.8 56.4 L186.8 67.4 L201.8 65.2 L212.7 69.6 L220.7 60.8 L231.7 41.0 L246.7 41.0 L252.7 58.6 L270.7 43.2 L273.7 30.0 L247.7 19.0 L220.7 14.6 L197.8 21.2 L172.8 34.4 L151.8 43.2 L132.8 58.6 L117.9 69.6 L97.9 82.8 L106.9 98.2 L92.9 126.8 L82.9 148.8 L68.9 162.0 L60.9 173.0 L43.0 190.6 L24.0 203.8 L13.0 223.6 L13.0 250.0 L18.0 274.2 L19.0 283.0 L23.0 296.2 L33.5 303.2 L43.0 300.6 L50.6 292.7 L62.9 280.8 L68.9 272.0 L70.4 262.1 L72.9 274.2 Z'
const RAIL =
  'M70.4 260.8 L78.9 255.5 L85.9 261.4 L95.9 269.8 L112.9 267.6 L128.4 246.0 L126.9 229.1 L119.4 203.4 L133.5 188.8 L160.3 173.0 L171.8 157.6 L179.7 130.8 L169.3 101.9 L165.0 85.9 L144.0 73.3 L137.1 73.1'
const ROAD = 'M137.1 73.1 L144.8 60.8 L152.4 46.5'
const PIN =
  'M152.4 46.5 m0 2 c-6 -7 -9 -10 -9 -14 a9 9 0 0 1 18 0 c0 4 -3 7 -9 14z'

const LABEL = {
  fontFamily: 'inherit',
  fontSize: 12,
  fontWeight: 600,
  fill: '#1a1a1a',
}
const COUNTRY = {
  fontFamily: 'inherit',
  fontSize: 11,
  fontWeight: 700,
  letterSpacing: 1,
}

type Marker = 'stop' | 'eu' | 'customer'

const LegendItem: FC<{ marker: Marker; title: string; text: string }> = ({
  marker,
  title,
  text,
}) => (
  <li className="tips-nvit-legend-item">
    <span
      className={`tips-nvit-legend-marker tips-nvit-legend-marker-${marker}`}
      aria-hidden="true"
    />
    <span className="tips-nvit-legend-text">
      <span className="tips-nvit-legend-title">{title}</span>
      <span className="tips-nvit-legend-description">{text}</span>
    </span>
  </li>
)

const Train: FC = () => (
  <g transform="translate(78 196) scale(1.45)">
    <rect
      x="-3"
      y="1"
      width="54"
      height="26"
      rx="6"
      fill="#ffffff"
      stroke="#3d7ac7"
      strokeWidth="0.8"
    />
    <path
      d="M36 9 l-2.2 -2.8 l2.2 -2.8 l2.2 2.8 z"
      fill="none"
      stroke="#303030"
      strokeWidth="0.8"
      strokeLinejoin="round"
    />
    <path d="M2 18h29" stroke="#303030" strokeWidth="1.4" />
    <rect x="2" y="11" width="13" height="6.4" rx="0.6" fill="#7bc144" />
    <path
      d="M4.6 11.6v5.2M7.2 11.6v5.2M9.8 11.6v5.2M12.4 11.6v5.2"
      stroke="#5a9a2c"
      strokeWidth="0.6"
    />
    <rect x="17" y="11" width="13" height="6.4" rx="0.6" fill="#4a4a4a" />
    <path
      d="M19.6 11.6v5.2M22.2 11.6v5.2M24.8 11.6v5.2M27.4 11.6v5.2"
      stroke="#303030"
      strokeWidth="0.6"
    />
    <path d="M31 17.5h1.5" stroke="#303030" strokeWidth="1" />
    <path d="M32.5 9 h8.5 a5.5 5.5 0 0 1 5.5 5.5 v4 h-14 z" fill="#303030" />
    <path
      d="M34.5 11 h3 v3 h-3z M39 11 h2 a4 4 0 0 1 3.5 3 h-5.5z"
      fill="#dfeaf5"
    />
    <path d="M32.5 16 h14" stroke="#7bc144" strokeWidth="0.9" />
    {[5, 12, 20, 27, 35.5, 43].map(cx => (
      <circle key={cx} cx={cx} cy="20.2" r="1.6" fill="#1a1a1a" />
    ))}
    <path d="M0 22.4h48" stroke="#303030" strokeWidth="1" />
    <path
      d="M2 22.4v1.8M6 22.4v1.8M10 22.4v1.8M14 22.4v1.8M18 22.4v1.8M22 22.4v1.8M26 22.4v1.8M30 22.4v1.8M34 22.4v1.8M38 22.4v1.8M42 22.4v1.8M46 22.4v1.8"
      stroke="#303030"
      strokeWidth="0.9"
    />
  </g>
)

/**
 * The rail route that takes parcels to Northern Norway through Sweden.
 */
const NvitMap: FC = () => {
  const oslo = __('Oslo', 'posten-bring-checkout')
  const narvik = __('Narvik', 'posten-bring-checkout')
  const tromso = __('Tromsø', 'posten-bring-checkout')

  return (
    <div className="tips-nvit-route">
      <svg
        className="tips-nvit-map"
        viewBox="0 0 290 372"
        role="img"
        aria-label={__(
          'Map: the parcel goes from Oslo by rail through Sweden, which is in the EU, to Narvik and on to the customer in Tromsø.',
          'posten-bring-checkout'
        )}
      >
        <path
          d={SWEDEN}
          fill="#e3ecf6"
          stroke="#3d7ac7"
          strokeWidth="1.5"
          strokeLinejoin="round"
        />
        <path
          d={NORWAY}
          fill="#ffffff"
          stroke="#b5b5b5"
          strokeWidth="1.2"
          strokeLinejoin="round"
        />
        <text x="150" y="300" style={{ ...COUNTRY, fill: '#1d4f91' }}>
          {__('SWEDEN · EU', 'posten-bring-checkout')}
        </text>
        <text x="16" y="246" style={{ ...COUNTRY, fill: '#8a8a8a' }}>
          {__('NORWAY', 'posten-bring-checkout')}
        </text>
        <path
          d={RAIL}
          fill="none"
          stroke="#303030"
          strokeWidth="3.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d={ROAD}
          fill="none"
          stroke="#303030"
          strokeWidth="2.5"
          strokeDasharray="4 5"
          strokeLinecap="round"
        />
        <Train />
        <circle
          cx="70.4"
          cy="260.8"
          r="6"
          fill="#303030"
          stroke="#ffffff"
          strokeWidth="3"
        />
        <text x="62" y="264" textAnchor="end" style={LABEL}>
          {oslo}
        </text>
        <circle
          cx="137.1"
          cy="73.1"
          r="6"
          fill="#303030"
          stroke="#ffffff"
          strokeWidth="3"
        />
        <text x="128" y="77" textAnchor="end" style={LABEL}>
          {narvik}
        </text>
        <path d={PIN} fill="#7bc144" stroke="#ffffff" strokeWidth="2" />
        <circle cx="152.4" cy="34.5" r="3" fill="#ffffff" />
        <text x="166" y="40" style={LABEL}>
          {tromso}
        </text>
      </svg>
      <ol className="tips-nvit-legend">
        <LegendItem
          marker="stop"
          title={oslo}
          text={__('The parcel leaves by rail', 'posten-bring-checkout')}
        />
        <LegendItem
          marker="eu"
          title={__('Through Sweden', 'posten-bring-checkout')}
          text={__(
            'In the EU, so the parcel needs customs information here',
            'posten-bring-checkout'
          )}
        />
        <LegendItem
          marker="stop"
          title={narvik}
          text={__('Back in Norway', 'posten-bring-checkout')}
        />
        <LegendItem
          marker="customer"
          title={tromso}
          text={__('Your customer', 'posten-bring-checkout')}
        />
      </ol>
    </div>
  )
}

export default NvitMap