import React, { FC } from 'react'
import { Button, ExternalLink, Modal } from '@wordpress/components'
import { external } from '@wordpress/icons'
import { __, sprintf } from '@wordpress/i18n'
import { Tip, TipAction, TipLink } from './tipList'

const newWindow = (label: string): string =>
  /* translators: %s: the text of a link that opens in a new window */
  sprintf(__('%s (opens in a new window)', 'posten-bring-checkout'), label)

const Intro: FC<{ tip: Tip }> = ({ tip }) => (
  <div className="tips-intro">
    <span className="tips-eyebrow">{tip.title}</span>
    <h2 className="tips-headline">{tip.headline}</h2>
    <p className="tips-lead">{tip.lead}</p>
  </div>
)

const SetUp: FC<{ action: TipAction }> = ({ action }) => (
  <>
    <Button
      className="tips-cta"
      variant="primary"
      href={action.href}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={newWindow(action.label)}
      icon={external}
      iconPosition="right"
      __next40pxDefaultSize
    >
      {action.label}
    </Button>
    <span className="tips-cta-hint">{action.hint}</span>
  </>
)

const WhatYouNeed: FC<{ tip: Tip }> = ({ tip }) => (
  <div className="tips-needs">
    <h3 className="tips-aside-heading">
      {__('What you need', 'posten-bring-checkout')}
    </h3>
    <ul className="tips-needs-list">
      {tip.needs.map(need => (
        <li key={need} className="tips-need">
          <span className="tips-need-mark" aria-hidden="true" />
          {need}
        </li>
      ))}
    </ul>
    {tip.action && <SetUp action={tip.action} />}
  </div>
)

const UsefulLinks: FC<{ tip: Tip }> = ({ tip }) => {
  const contactEmail = __(
    'checkout.implementering@posten.no',
    'posten-bring-checkout'
  )

  return (
    <div className="tips-links">
      <h3 className="tips-aside-heading">
        {__('Useful links', 'posten-bring-checkout')}
      </h3>
      <ul className="tips-links-list">
        {[tip.faq, tip.externalLink]
          .filter((link): link is TipLink => link !== undefined)
          .map(link => (
            <li key={link.href}>
              <ExternalLink href={link.href}>{link.label}</ExternalLink>
            </li>
          ))}
        <li>
          <a href={`mailto:${contactEmail}`}>
            {__('Contact us', 'posten-bring-checkout')}
          </a>
        </li>
      </ul>
    </div>
  )
}

/**
 * Explains one tip: a picture and the story of how it works on the left, and
 * what the merchant needs and where to set it up on the right.
 */
const TipModal: FC<{ tip: Tip; onClose: () => void }> = ({ tip, onClose }) => {
  const { Photo, Story } = tip

  return (
    <Modal
      className="tips-modal"
      title={__('Did you know?', 'posten-bring-checkout')}
      onRequestClose={onClose}
      contentLabel={tip.title}
      size="large"
    >
      <div className="tips-modal-columns">
        <div className="tips-main">
          {Photo && <Photo />}
          <Intro tip={tip} />
          <Story />
        </div>
        <div className="tips-aside">
          <WhatYouNeed tip={tip} />
          <UsefulLinks tip={tip} />
        </div>
      </div>
    </Modal>
  )
}

export default TipModal