import React, { FC } from 'react'
import { Spinner, TextControl } from '@wordpress/components'
import { Text } from '@wordpress/ui'
import { useI18n } from '@wordpress/react-i18n'
import HsCodeSelector from './HsCodeSelector'
import { ProductNeedingCustomsInfo } from '../customsRules'
import { GoodsDescriptionSuggestion } from '../model/models'

const GOODS_DESCRIPTION_MAX_LENGTH = 44

export declare interface EnteredForProduct {
  hsCode?: string
  sku?: string
  goodsDescription?: string
}

export declare interface CustomsProductCardProps {
  product: ProductNeedingCustomsInfo
  entered: EnteredForProduct
  suggestion?: GoodsDescriptionSuggestion
  loadingSuggestion: boolean
  sameHsCodeForAll: boolean
  disabled: boolean
  onChange: (changes: EnteredForProduct) => void
}

const CustomsProductCard: FC<CustomsProductCardProps> = ({
  product: { item, missingHsCode, missingSku, missingGoodsDescription },
  entered,
  suggestion,
  loadingSuggestion,
  sameHsCodeForAll,
  disabled,
  onChange,
}) => {
  const { __ } = useI18n()

  const goodsDescriptionHelp = () => {
    if (loadingSuggestion) {
      return (
        <span className="flex flex-dir-row align-ic gaxs">
          <Spinner style={{ margin: 0 }} />
          {__('Suggesting a description…', 'posten-bring-checkout')}
        </span>
      )
    }
    switch (suggestion?.status) {
      case 'SUGGESTED':
        return __(
          'Suggested from the product information. Check it, and edit it if needed.',
          'posten-bring-checkout'
        )
      case 'NOT_IDENTIFIED':
      case 'UNAVAILABLE':
        return __(
          'We could not suggest a description. Please write one in English.',
          'posten-bring-checkout'
        )
      default:
        return __('What the item is, in a few words.', 'posten-bring-checkout')
    }
  }

  return (
    <div className="pam item customs-product-card flex flex-dir-col gas">
      <div className="flex flex-dir-row gam align-ic">
        <img src={item.image_url} alt={item.name} className="item-image" />
        <Text variant="heading-lg">{item.name}</Text>
      </div>
      {missingHsCode && !sameHsCodeForAll && (
        <HsCodeSelector
          value={entered.hsCode}
          onSelectHsCode={hsCode => onChange({ hsCode: hsCode ?? '' })}
        />
      )}
      {missingSku && (
        <TextControl
          __next40pxDefaultSize
          __nextHasNoMarginBottom
          label={__('SKU', 'posten-bring-checkout')}
          help={__(
            "Ideally the manufacturer's or supplier's product number.",
            'posten-bring-checkout'
          )}
          disabled={disabled}
          value={entered.sku ?? ''}
          onChange={sku => onChange({ sku })}
        />
      )}
      {missingGoodsDescription && (
        <TextControl
          __next40pxDefaultSize
          __nextHasNoMarginBottom
          label={__(
            'Customs description (in English)',
            'posten-bring-checkout'
          )}
          placeholder={__(
            'Enter a description in English, for example Wool sweater',
            'posten-bring-checkout'
          )}
          help={goodsDescriptionHelp()}
          maxLength={GOODS_DESCRIPTION_MAX_LENGTH}
          disabled={disabled}
          value={entered.goodsDescription ?? ''}
          onChange={goodsDescription => onChange({ goodsDescription })}
        />
      )}
    </div>
  )
}

export default CustomsProductCard