import { FC } from 'react'
import { __ } from '@wordpress/i18n'
import { cart, globe, tag, undo } from '@wordpress/icons'
import { getAdminLink } from '@woocommerce/settings'
import { settingsLink } from '../settingsModal'
import { pluginPageLink } from '../landing/pluginPage'
import { PrintingPhoto, PrintingStory } from './PrintingStory'
import { ReturnsPhoto, ReturnsStory } from './ReturnsStory'
import { NvitStory } from './NvitStory'
import { BlockCheckoutStory } from './BlockCheckoutStory'
import { tipsDetails } from './tipsDetails'

export interface TipLink {
  label: string
  href: string
}

export interface TipAction extends TipLink {
  hint: string
}

export interface Tip {
  key: string
  icon: JSX.Element
  title: string
  summary: string
  headline: string
  lead: string
  Photo?: FC
  Story: FC
  needs: Array<string>
  action?: TipAction
  faq?: TipLink
  externalLink?: TipLink
}

const faqSearch = (search: string): string =>
  `${pluginPageLink('faq')}&q=${encodeURIComponent(search)}`

const automaticPrinting = (): Tip => ({
  key: 'automaticPrinting',
  icon: tag,
  title: __('Automatic label printing', 'posten-bring-checkout'),
  summary: __(
    'Labels go straight to your printer when you book.',
    'posten-bring-checkout'
  ),
  headline: __('Labels print the moment you book', 'posten-bring-checkout'),
  lead: __(
    'No more downloading and opening PDFs. When you book transport, the label goes straight to the printer you chose, ready to stick on the parcel.',
    'posten-bring-checkout'
  ),
  Photo: PrintingPhoto,
  Story: PrintingStory,
  needs: [
    __('A PrintNode account', 'posten-bring-checkout'),
    __('A computer that can reach the printer', 'posten-bring-checkout'),
    __('A label printer with the right roll', 'posten-bring-checkout'),
  ],
  action: {
    label: __('Set it up now', 'posten-bring-checkout'),
    hint: __(
      'Opens automatic printing in Settings in a new window',
      'posten-bring-checkout'
    ),
    href: settingsLink('printing'),
  },
  faq: {
    label: __('Questions and answers about printing', 'posten-bring-checkout'),
    href: faqSearch('PrintNode'),
  },
  externalLink: { label: 'PrintNode', href: 'https://www.printnode.com/' },
})

const selfServiceReturns = (): Tip => ({
  key: 'selfServiceReturns',
  icon: undo,
  title: __('Self-service returns', 'posten-bring-checkout'),
  summary: __(
    'Let customers request a return themselves.',
    'posten-bring-checkout'
  ),
  headline: __(
    'Let customers start their own returns',
    'posten-bring-checkout'
  ),
  lead: __(
    'Customers request the return from their order and get everything they need from Posten by email. The plugin approves it for you, or you approve it yourself.',
    'posten-bring-checkout'
  ),
  Photo: ReturnsPhoto,
  Story: ReturnsStory,
  needs: [
    __('A Norwegian webshop shipping within Norway', 'posten-bring-checkout'),
    __('Self-service returns turned on in Settings', 'posten-bring-checkout'),
    __('A return address, or the store address', 'posten-bring-checkout'),
  ],
  action: {
    label: __('Set it up now', 'posten-bring-checkout'),
    hint: __(
      'Opens self-service returns in Settings in a new window',
      'posten-bring-checkout'
    ),
    href: settingsLink('returns'),
  },
  faq: {
    label: __('Questions and answers about returns', 'posten-bring-checkout'),
    href: faqSearch(__('Returns', 'posten-bring-checkout')),
  },
})

const nvit = (): Tip => ({
  key: 'nvit',
  icon: globe,
  title: __('Orders to Northern Norway (NVIT)', 'posten-bring-checkout'),
  summary: __(
    'Why these orders need customs information.',
    'posten-bring-checkout'
  ),
  headline: __(
    'Why a parcel within Norway needs customs information',
    'posten-bring-checkout'
  ),
  lead: __(
    "Parcels to Northern Norway go by rail through Sweden, because it's the fastest and most cost-effective route. While they pass through the EU, they need customs information. Bring calls this Norwegian goods in transit (NVIT).",
    'posten-bring-checkout'
  ),
  Story: NvitStory,
  needs: [
    __('Nothing to turn on', 'posten-bring-checkout'),
    __('An HS code on each product', 'posten-bring-checkout'),
    __(
      'A goods description and a weight on each product',
      'posten-bring-checkout'
    ),
  ],
  action: {
    label: __('Add HS codes to products', 'posten-bring-checkout'),
    hint: __(
      'Opens your products in WooCommerce in a new window',
      'posten-bring-checkout'
    ),
    href: getAdminLink('edit.php?post_type=product'),
  },
  faq: {
    label: __('Questions and answers about customs', 'posten-bring-checkout'),
    href: faqSearch(__('Customs', 'posten-bring-checkout')),
  },
  externalLink: {
    label: __('Bring: Norwegian goods in transit', 'posten-bring-checkout'),
    href: 'https://www.bring.no/tjenester/toll/endringer-norske-varer-i-transitt',
  },
})

const editCheckoutPage = (href: string): TipAction | undefined =>
  href
    ? {
        label: __('Open the checkout page', 'posten-bring-checkout'),
        hint: __(
          'Opens the checkout page in the editor in a new window',
          'posten-bring-checkout'
        ),
        href,
      }
    : undefined

const blockCheckout = (): Tip => ({
  key: 'blockCheckout',
  icon: cart,
  title: __('Block checkout', 'posten-bring-checkout'),
  summary: __(
    'Get your checkout ready for what WooCommerce builds next.',
    'posten-bring-checkout'
  ),
  headline: __(
    'Get your checkout ready for the future',
    'posten-bring-checkout'
  ),
  lead: __(
    'Posten Bring Checkout works in both the classic and the block checkout, so your customers see the same delivery options either way. But the block checkout is where WooCommerce builds the checkout of the future. Moving now, while you can do it calmly, saves you a rushed switch later.',
    'posten-bring-checkout'
  ),
  Story: BlockCheckoutStory,
  needs: [
    __('Nothing extra to install', 'posten-bring-checkout'),
    __('A few minutes in the page editor', 'posten-bring-checkout'),
  ],
  action: editCheckoutPage(tipsDetails().checkoutPageEditLink),
})

/**
 * The features we teach the merchant on the order pages, one tip each.
 */
export const tips = (): Array<Tip> => [
  automaticPrinting(),
  selfServiceReturns(),
  nvit(),
  blockCheckout(),
]