import React, { FC } from 'react'
import { Notice } from '@wordpress/ui'
import { sprintf } from '@wordpress/i18n'
import { useI18n } from '@wordpress/react-i18n'
import CustomsModal from './CustomsModal'
import { ProductNeedingCustomsInfo } from '../customsRules'

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

const CustomsInformationNotice: FC<CustomsInformationNoticeProps> = ({
  products,
  nvit,
  onSaved,
}) => {
  const { __, _n } = useI18n()
  const [modalOpen, setModalOpen] = React.useState(false)

  if (products.length === 0) {
    return null
  }

  const nvitOnly = products.every(product => product.nvit)

  return (
    <>
      <Notice.Root intent={nvitOnly ? 'info' : 'warning'}>
        <Notice.Title>
          {sprintf(
            _n(
              '%d item needs customs information',
              '%d items need customs information',
              products.length,
              'posten-bring-checkout'
            ),
            products.length
          )}
        </Notice.Title>
        <Notice.Actions>
          <Notice.ActionButton onClick={() => setModalOpen(true)}>
            {__('Add customs information', 'posten-bring-checkout')}
          </Notice.ActionButton>
        </Notice.Actions>
      </Notice.Root>
      {modalOpen && (
        <CustomsModal
          products={products}
          nvit={nvit}
          onClose={() => setModalOpen(false)}
          onSaved={onSaved}
        />
      )}
    </>
  )
}

export default CustomsInformationNotice