import React, { FC, ReactNode, useId } from 'react'
import { Button, Dialog, Link, Stack } from '@wordpress/ui'
import { useI18n } from '@wordpress/react-i18n'
import BookShippingGuide from './BookShippingGuide'
import PrintLabelsGuide from './PrintLabelsGuide'
import { pluginPageLink } from './pluginPage'

interface DailyUseTask {
  title: string
  text: string
  guide: ReactNode
  extra?: ReactNode
}

/** One daily task, with a button that opens its guide in a dialog. */
const DailyUseItem: FC<DailyUseTask> = ({ title, text, guide, extra }) => {
  const { __ } = useI18n()
  const headingId = useId()
  const buttonId = useId()

  return (
    <li className="daily-use-task">
      <Stack direction="column" gap="xs">
        <h3 id={headingId} className="landing-item-title">
          {title}
        </h3>
        <p className="landing-text landing-subdued">{text}</p>
        {extra}
      </Stack>
      <Dialog.Root>
        <Dialog.Trigger
          id={buttonId}
          aria-labelledby={`${buttonId} ${headingId}`}
          render={<Button variant="outline" tone="neutral" />}
        >
          {__('Show guide', 'posten-bring-checkout')}
        </Dialog.Trigger>
        <Dialog.Popup size="large">
          <Dialog.Header>
            <Dialog.Title>{title}</Dialog.Title>
            <Dialog.CloseIconButton />
          </Dialog.Header>
          <Dialog.Content>{guide}</Dialog.Content>
        </Dialog.Popup>
      </Dialog.Root>
    </li>
  )
}

export declare interface DailyUseProps {
  /** Whether the user may open the plugin settings */
  canConfigure: boolean
}

const DailyUse: FC<DailyUseProps> = ({ canConfigure }) => {
  const { __ } = useI18n()

  const tasks: Array<DailyUseTask> = [
    {
      title: __('Book shipping', 'posten-bring-checkout'),
      text: __(
        'Book shipping for one order, or for several orders at once.',
        'posten-bring-checkout'
      ),
      guide: <BookShippingGuide />,
    },
    {
      title: __('Print labels', 'posten-bring-checkout'),
      text: __(
        'Print the labels of one order, or of several orders at once.',
        'posten-bring-checkout'
      ),
      guide: <PrintLabelsGuide />,
      extra: canConfigure && (
        <Link href={pluginPageLink('settings')}>
          {__('Turn on automatic label printing', 'posten-bring-checkout')}
        </Link>
      ),
    },
  ]

  return (
    <ul className="landing-list">
      {tasks.map(task => (
        <DailyUseItem key={task.title} {...task} />
      ))}
    </ul>
  )
}

export default DailyUse