import React, { FC, useState } from 'react'
import { Button, ExternalLink } from '@wordpress/components'
import { Icon } from '@wordpress/icons'
import { __ } from '@wordpress/i18n'
import { pluginPageLink } from '../landing/pluginPage'
import { Tip, tips } from './tipList'
import TipModal from './TipModal'
import './tips.scss'

export type TipsLayout = 'row' | 'quiet'

const READ_MORE_VARIANT: Record<TipsLayout, 'secondary' | 'link'> = {
  row: 'secondary',
  quiet: 'link',
}

const TipCard: FC<{
  tip: Tip
  layout: TipsLayout
  onReadMore: () => void
}> = ({ tip, layout, onReadMore }) => (
  <li className="tips-card">
    <Icon className="tips-card-icon" icon={tip.icon} size={24} />
    <div className="tips-card-text">
      <h3 className="tips-card-title">{tip.title}</h3>
      <p className="tips-card-summary">{tip.summary}</p>
      <div className="tips-card-action">
        <Button
          variant={READ_MORE_VARIANT[layout]}
          size="compact"
          onClick={onReadMore}
        >
          {__('Read more', 'posten-bring-checkout')}
          <span className="screen-reader-text">: {tip.title}</span>
        </Button>
      </div>
    </div>
  </li>
)

/**
 * "Did you know?": teaches the merchant features they may have missed, on the
 * pages where they handle their orders. Each tip opens a modal that explains
 * it and links to where it is set up.
 */
const Tips: FC<{ layout?: TipsLayout }> = ({ layout = 'row' }) => {
  const [openTip, setOpenTip] = useState<Tip | undefined>(undefined)

  return (
    <section
      className={`tips tips-${layout}`}
      aria-label={__('Did you know?', 'posten-bring-checkout')}
    >
      <div className="tips-header">
        <h2 className="tips-heading">
          {__('Did you know?', 'posten-bring-checkout')}
        </h2>
        <ExternalLink href={pluginPageLink('changelog')}>
          {__('See all updates', 'posten-bring-checkout')}
        </ExternalLink>
      </div>
      <ul className="tips-cards">
        {tips().map(tip => (
          <TipCard
            key={tip.key}
            tip={tip}
            layout={layout}
            onReadMore={() => setOpenTip(tip)}
          />
        ))}
      </ul>
      {openTip && (
        <TipModal tip={openTip} onClose={() => setOpenTip(undefined)} />
      )}
    </section>
  )
}

export default Tips