import React, { FC } from 'react'
import { Button, CheckboxControl, Modal } from '@wordpress/components'
import { createInterpolateElement } from '@wordpress/element'
import { sprintf } from '@wordpress/i18n'
import { useI18n } from '@wordpress/react-i18n'
import { Badge, Notice, Text } from '@wordpress/ui'
import apiFetch from '@wordpress/api-fetch'
import CustomsProductCard, { EnteredForProduct } from './CustomsProductCard'
import HsCodeSelector from './HsCodeSelector'
import {
  goodsDescriptionOwner,
  ProductNeedingCustomsInfo,
} from '../customsRules'
import {
  customsInformationToSave,
  EnteredCustomsInformation,
} from '../customsInformationToSave'
import { useGoodsDescriptionSuggestions } from '../useGoodsDescriptionSuggestions'
import { useAnnounce } from './useAnnounce'
import { GoodsDescriptionSuggestion } from '../model/models'

export declare interface CustomsModalProps {
  products: Array<ProductNeedingCustomsInfo>
  nvit: boolean
  onClose: () => void
  onSaved: () => void
}

declare interface SaveError {
  code?: string
  sku?: string
  saved?: Array<string>
}

const savedAnything = (result: PromiseSettledResult<unknown>) =>
  result.status === 'fulfilled' ||
  ((result.reason as SaveError)?.saved?.length ?? 0) > 0

const goodsDescriptionOwners = (products: Array<ProductNeedingCustomsInfo>) => [
  ...new Set(
    products
      .filter(product => product.missingGoodsDescription)
      .map(product => goodsDescriptionOwner(product.item))
  ),
]

const suggestedDescriptions = (
  suggestions: Record<string, GoodsDescriptionSuggestion>
): Record<string, string> =>
  Object.fromEntries(
    Object.entries(suggestions).flatMap(
      ([productId, { status, description }]) =>
        status === 'SUGGESTED' && description ? [[productId, description]] : []
    )
  )

const post = (path: string, body: Array<object>) =>
  apiFetch({
    path: `/posten-bring-checkout${path}`,
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  })

const CustomsModal: FC<CustomsModalProps> = ({
  products,
  nvit,
  onClose,
  onSaved,
}) => {
  const { __ } = useI18n()
  const [entered, setEntered] = React.useState<EnteredCustomsInformation>({
    hsCodes: {},
    skus: {},
    goodsDescriptions: {},
  })
  const [sameHsCodeForAll, setSameHsCodeForAll] = React.useState(false)
  const [hsCodeForAll, setHsCodeForAll] = React.useState('')
  const [saving, setSaving] = React.useState(false)
  const [saveError, setSaveError] = React.useState<string>()
  const { loading, suggestions } = useGoodsDescriptionSuggestions(
    goodsDescriptionOwners(products)
  )

  React.useEffect(
    () =>
      setEntered(current => ({
        ...current,
        goodsDescriptions: {
          ...suggestedDescriptions(suggestions),
          ...current.goodsDescriptions,
        },
      })),
    [suggestions]
  )

  const productsMissingHsCode = products.filter(it => it.missingHsCode)
  const toSave = customsInformationToSave(products, {
    ...entered,
    hsCodeForAll: sameHsCodeForAll ? hsCodeForAll : undefined,
  })
  const nothingToSave = Object.values(toSave).every(it => it.length === 0)

  const enteredFor = ({
    item,
  }: ProductNeedingCustomsInfo): EnteredForProduct => ({
    hsCode: entered.hsCodes[item.product_id],
    sku: entered.skus[item.product_id],
    goodsDescription: entered.goodsDescriptions[goodsDescriptionOwner(item)],
  })

  const enter = (
    { item }: ProductNeedingCustomsInfo,
    { hsCode, sku, goodsDescription }: EnteredForProduct
  ) =>
    setEntered(current => ({
      hsCodes:
        hsCode === undefined
          ? current.hsCodes
          : { ...current.hsCodes, [item.product_id]: hsCode },
      skus:
        sku === undefined
          ? current.skus
          : { ...current.skus, [item.product_id]: sku },
      goodsDescriptions:
        goodsDescription === undefined
          ? current.goodsDescriptions
          : {
              ...current.goodsDescriptions,
              [goodsDescriptionOwner(item)]: goodsDescription,
            },
    }))

  const saveErrorMessage = (error: SaveError) =>
    error?.code === 'duplicateSku'
      ? sprintf(
          __(
            'The SKU %s is already used by another product. Enter a different SKU.',
            'posten-bring-checkout'
          ),
          error.sku ?? ''
        )
      : __(
          'Could not save customs information. Please try again.',
          'posten-bring-checkout'
        )

  const save = async () => {
    setSaving(true)
    setSaveError(undefined)
    const results = await Promise.allSettled(
      (
        [
          ['/hscodes', toSave.hsCodes],
          ['/skus', toSave.skus],
          ['/goods-descriptions', toSave.goodsDescriptions],
        ] as Array<[string, Array<object>]>
      )
        .filter(([, body]) => body.length > 0)
        .map(([path, body]) => post(path, body))
    )
    const failure = results.find(
      (result): result is PromiseRejectedResult => result.status === 'rejected'
    )
    setSaving(false)
    if (results.some(savedAnything)) {
      onSaved()
    }
    if (failure) {
      setSaveError(saveErrorMessage(failure.reason))
    } else {
      onClose()
    }
  }

  // Translated up front: the minifier would merge two calls in a ternary into __(nvit ? a : b), which make-pot cannot read
  const titles = {
    nvit: __(
      'NVIT - Items that need customs information',
      'posten-bring-checkout'
    ),
    other: __('Items that need customs information', 'posten-bring-checkout'),
  }
  const nvitInfo = __(
    'For the fastest and most cost-effective shipping, shipments to Northern Norway are transported by rail through Sweden. Due to new EU regulations, these shipments now require customs information. Read more about new customs regulations for <link>Norwegian goods in transit (NVIT)</link>',
    'posten-bring-checkout'
  )

  useAnnounce(nvit && nvitInfo.replace(/<\/?link>/g, ''))

  return (
    <Modal
      className="customs-container"
      title={nvit ? titles.nvit : titles.other}
      onRequestClose={onClose}
      size={products.length === 1 ? 'medium' : 'large'}
      focusOnMount="firstInputElement"
      style={{ backgroundColor: 'rgb(247, 247, 247)' }}
    >
      {nvit && (
        <Notice.Root intent="info" className="mbl">
          <Notice.Description>
            {createInterpolateElement(nvitInfo, {
              link: (
                <a
                  href="https://www.bring.no/tjenester/toll/endringer-norske-varer-i-transitt"
                  target="_blank"
                  rel="noopener noreferrer"
                />
              ),
            })}
          </Notice.Description>
        </Notice.Root>
      )}
      {productsMissingHsCode.length > 1 && (
        <div className="mbm">
          <CheckboxControl
            label={__(
              'All items have the same HS code',
              'posten-bring-checkout'
            )}
            checked={sameHsCodeForAll}
            onChange={setSameHsCodeForAll}
          />
        </div>
      )}
      {sameHsCodeForAll && (
        <div className="pam item mbm">
          <Text variant="heading-lg">
            {__('All items', 'posten-bring-checkout')}
          </Text>
          <HsCodeSelector
            value={hsCodeForAll}
            onSelectHsCode={hsCode => setHsCodeForAll(hsCode ?? '')}
          />
        </div>
      )}
      <div className="customs-product-grid mbl">
        {products.map(product => (
          <CustomsProductCard
            key={product.item.product_id}
            product={product}
            entered={enteredFor(product)}
            suggestion={suggestions[goodsDescriptionOwner(product.item)]}
            loadingSuggestion={loading}
            sameHsCodeForAll={sameHsCodeForAll}
            disabled={saving}
            onChange={changes => enter(product, changes)}
          />
        ))}
      </div>
      {saveError && (
        <p role="alert" className="mbm" style={{ color: '#cc1818' }}>
          {saveError}
        </p>
      )}
      <div className="flex flex-dir-row justify-csb align-ic">
        <div className="flex flex-dir-row gas">
          <Button
            variant="primary"
            __next40pxDefaultSize
            isBusy={saving}
            disabled={saving || nothingToSave}
            onClick={save}
          >
            {__('Save', 'posten-bring-checkout')}
          </Button>
          <Button
            variant="secondary"
            __next40pxDefaultSize
            disabled={saving}
            onClick={onClose}
          >
            {__('Cancel', 'posten-bring-checkout')}
          </Button>
        </div>
        {productsMissingHsCode.length > 0 && (
          <Badge intent="none">
            {__(
              'HS code data is provided by Tolletaten (Norwegian customs)',
              'posten-bring-checkout'
            )}
          </Badge>
        )}
      </div>
    </Modal>
  )
}

export default CustomsModal