import React, { FC, PropsWithChildren } from 'react'
import { Link, Stack, Text } from '@wordpress/ui'
import { useI18n } from '@wordpress/react-i18n'
import { sprintf } from '@wordpress/i18n'
import useOrderOverview from './useOrderOverview'
import Skeleton from './Skeleton'

const DAY_MS = 24 * 60 * 60 * 1000

const startOfDay = (date: Date) =>
  new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()

const calendarDaysSince = (date: Date, now: Date) =>
  Math.round((startOfDay(now) - startOfDay(date)) / DAY_MS)

const placedRelativeToToday = (createdAt: string) =>
  new Intl.RelativeTimeFormat(document.documentElement.lang || undefined, {
    numeric: 'auto',
  }).format(-calendarDaysSince(new Date(createdAt), new Date()), 'day')

const GlanceGroup: FC<PropsWithChildren<{ title: string }>> = ({
  title,
  children,
}) => (
  <Stack direction="column" gap="xs">
    <h3 className="landing-item-title">{title}</h3>
    {children}
  </Stack>
)

const GlanceFigure: FC<{ value: number; label: string }> = ({
  value,
  label,
}) => (
  <div className="glance-figure">
    <span className="glance-figure__value">{value}</span>
    <Text className="landing-subdued">{label}</Text>
  </div>
)

const AtAGlance: FC = () => {
  const { __ } = useI18n()
  const overview = useOrderOverview()

  if (overview === 'loading') {
    return <Skeleton lines={3} />
  }
  if (overview === 'failed') {
    return (
      <Text className="landing-subdued">
        {__(
          "The figures couldn't be loaded right now. Try again later.",
          'posten-bring-checkout'
        )}
      </Text>
    )
  }

  const { unfulfilled, openReturns } = overview

  return (
    <div className="glance-groups">
      <GlanceGroup title={__('Orders', 'posten-bring-checkout')}>
        <GlanceFigure
          value={unfulfilled.count}
          label={__('Unfulfilled', 'posten-bring-checkout')}
        />
        {unfulfilled.count > 0 && unfulfilled.oldestCreatedAt && (
          <Text className="landing-subdued">
            {sprintf(
              /* translators: %s: when the oldest order was placed, e.g. "3 days ago" */
              __('Oldest placed %s', 'posten-bring-checkout'),
              placedRelativeToToday(unfulfilled.oldestCreatedAt)
            )}
          </Text>
        )}
        {unfulfilled.count > 0 && (
          <Link href={unfulfilled.url}>
            {__('View orders', 'posten-bring-checkout')}
          </Link>
        )}
      </GlanceGroup>
      <GlanceGroup title={__('Returns', 'posten-bring-checkout')}>
        <GlanceFigure
          value={openReturns}
          label={__('Orders with open returns', 'posten-bring-checkout')}
        />
      </GlanceGroup>
    </div>
  )
}

export default AtAGlance