import React, { useEffect, useMemo, useState } from 'react'
import apiFetch from '@wordpress/api-fetch'
import {
  Card,
  CardBody,
  CheckboxControl,
  Notice,
  Spinner,
  TextControl,
} from '@wordpress/components'
import { useI18n } from '@wordpress/react-i18n'
import { sprintf } from '@wordpress/i18n'
import { useEnableWpCompatOverlaySlot } from '@wordpress/ui'
import {
  CHANGELOG_TYPES,
  ChangelogEntry,
  ChangelogResponse,
  formatChangelogDate,
} from './model/changelog'
import './styles.scss'

const Changelog = () => {
  const { __ } = useI18n()
  useEnableWpCompatOverlaySlot()

  const [entries, setEntries] = useState<Array<ChangelogEntry>>([])
  const [currentVersion, setCurrentVersion] = useState('')
  const [isLoading, setIsLoading] = useState(true)
  const [hasError, setHasError] = useState(false)
  const [search, setSearch] = useState('')
  const [types, setTypes] = useState<Array<string>>([])

  const typeLabels: Record<string, string> = {
    new: __('New', 'posten-bring-checkout'),
    improvement: __('Improvement', 'posten-bring-checkout'),
    fix: __('Fix', 'posten-bring-checkout'),
    deprecated: __('Deprecated', 'posten-bring-checkout'),
    removed: __('Removed', 'posten-bring-checkout'),
  }

  useEffect(() => {
    const fetchChangelog = async () => {
      try {
        const response: ChangelogResponse = await apiFetch({
          path: '/posten-bring-checkout/changelog',
        })
        setEntries(response?.entries || [])
        setCurrentVersion(response?.currentVersion || '')
        // The endpoint answers 200 even when the feed is unreachable, so that
        // the installed version can still be shown. The flag is what tells the
        // two apart.
        setHasError(false === response?.feedOk)
      } catch (error) {
        setHasError(true)
      } finally {
        setIsLoading(false)
      }
    }

    fetchChangelog()
  }, [])

  const visible = useMemo(() => {
    const query = search.trim().toLowerCase()

    return entries.filter(entry => {
      if (types.length && !types.includes(entry.type)) {
        return false
      }

      if (!query) {
        return true
      }

      return `${entry.title} ${entry.contentHtml}`.toLowerCase().includes(query)
    })
  }, [entries, search, types])

  const notInstalled = useMemo(
    () => entries.filter(entry => !entry.installed),
    [entries]
  )

  const toggleType = (type: string) =>
    setTypes(current =>
      current.includes(type)
        ? current.filter(it => it !== type)
        : [...current, type]
    )

  const filtered = types.length > 0 || search.trim() !== ''

  return (
    <div className="pbc-changelog">
      <div className="pbc-changelog__intro">
        <h1>{__("What's new in Posten Bring Checkout", 'posten-bring-checkout')}</h1>
        <p>
          {__(
            'Every change we ship to the WooCommerce plugin, newest first. Filter by type or search to find a specific change.',
            'posten-bring-checkout'
          )}
        </p>
      </div>

      <div className="pbc-changelog__layout">
        <div className="pbc-changelog__log">
          {notInstalled.length > 0 && (
            <div className="pbc-changelog__notice">
              <Notice status="warning" isDismissible={false}>
                {__(
                  'Some changes below need a newer version of the plugin.',
                  'posten-bring-checkout'
                )}
              </Notice>
            </div>
          )}

          {/* Nothing pending is worth saying out loud, not just the absence of a
              warning. The trophy sits outside the translated string so it
              cannot be lost in translation. */}
          {!isLoading &&
            !hasError &&
            currentVersion &&
            entries.length > 0 &&
            notInstalled.length === 0 && (
              <div className="pbc-changelog__notice">
                <Notice status="success" isDismissible={false}>
                  {'🏆 '}
                  {__('You are up to date.', 'posten-bring-checkout')}
                </Notice>
              </div>
            )}

          {isLoading && (
            <Card>
              <CardBody>
                <Spinner />
              </CardBody>
            </Card>
          )}

          {!isLoading && hasError && (
            <Notice status="warning" isDismissible={false}>
              {__(
                'We could not reach the changelog feed. Try again in a few minutes.',
                'posten-bring-checkout'
              )}
            </Notice>
          )}

          {!isLoading && !hasError && visible.length === 0 && (
            <Card>
              <CardBody>
                {entries.length === 0
                  ? __('There are no updates to show yet.', 'posten-bring-checkout')
                  : __('No updates match your filters.', 'posten-bring-checkout')}
              </CardBody>
            </Card>
          )}

          {visible.map(entry => (
            <div
              className={`pbc-changelog__entry${entry.installed ? '' : ' pbc-changelog__entry--pending'}`}
              key={entry.slug}
            >
              <div className="pbc-changelog__rail">
                <span className="pbc-changelog__date">
                  {formatChangelogDate(entry.date)}
                </span>
                <span className="pbc-changelog__marker" aria-hidden="true" />
              </div>
              <Card>
                <CardBody>
                  <h2 className="pbc-changelog__title">{entry.title}</h2>
                  <div
                    className="pbc-changelog__content"
                    /* The feed is our own, published by the developer site, and
                       SimplePie has already sanitised it server side */
                    dangerouslySetInnerHTML={{ __html: entry.contentHtml }}
                  />
                  <div className="pbc-changelog__tags">
                    {entry.type && (
                      <span
                        className={`pbc-changelog__badge pbc-changelog__badge--${entry.type}`}
                      >
                        {typeLabels[entry.type] || entry.type}
                      </span>
                    )}
                    {entry.version && (
                      <span className="pbc-changelog__version">{`v${entry.version}`}</span>
                    )}
                    {!entry.installed && (
                      <span className="pbc-changelog__badge pbc-changelog__badge--pending">
                        {__('Requires update', 'posten-bring-checkout')}
                      </span>
                    )}
                  </div>
                </CardBody>
              </Card>
            </div>
          ))}
        </div>

        <div className="pbc-changelog__sidebar">
          {currentVersion && (
            <Card className="pbc-changelog__yourversion">
              <CardBody>
                <span className="pbc-changelog__yourversion-label">
                  {__('Installed version', 'posten-bring-checkout')}
                </span>
                <span className="pbc-changelog__yourversion-number">{`v${currentVersion}`}</span>
              </CardBody>
            </Card>
          )}
          <Card>
            <CardBody>
              <TextControl
                __nextHasNoMarginBottom
                label={__('Search', 'posten-bring-checkout')}
                value={search}
                onChange={setSearch}
              />
              <fieldset className="pbc-changelog__filter">
                <legend>{__('Type of change', 'posten-bring-checkout')}</legend>
                {CHANGELOG_TYPES.map(type => (
                  <CheckboxControl
                    __nextHasNoMarginBottom
                    key={type}
                    label={typeLabels[type]}
                    checked={types.includes(type)}
                    onChange={() => toggleType(type)}
                  />
                ))}
              </fieldset>
              <p className="pbc-changelog__count">
                {filtered
                  ? sprintf(
                      /* translators: 1: number of matching updates, 2: total number of updates. */
                      __('%1$d of %2$d updates', 'posten-bring-checkout'),
                      visible.length,
                      entries.length
                    )
                  : sprintf(
                      /* translators: %d is the number of updates. */
                      __('%d updates', 'posten-bring-checkout'),
                      entries.length
                    )}
              </p>
            </CardBody>
          </Card>
        </div>
      </div>
    </div>
  )
}

export default Changelog