import React from 'react'
import { ReactComponent as ErrorIcon } from '$assets/icons/error.svg'
import { Icon } from '$core-components'
import { t } from '$themelocalization'
import './CartSummaryTooltip.scss'

const CartSummaryTooltip = ({ type, show, onOk, onCancel, isListModel, quantityError }) => show ? (
  <div className="cart-tooltip">
    {type === 'error'
      ? (
        <div className="cart-tooltip-inner">
          <button className="close" onClick={() => onCancel()} aria-label={t('General.Close')}>
            <Icon name="close_black.svg" width="10px" height="10px" ariaHidden="true"/>
          </button>
          <div className="cart-error-message" role="alert">
            <ErrorIcon width="15px" height="15px"/>
            {quantityError
              ? <span>{t('Cart.Summary.Warning.QuantityErrorMessage')}</span>
              : isListModel ? <span>{t('Cart.Summary.Warning.ExportErrorMessage')}</span>
              : <span>{t('Cart.Summary.Warning.ErrorMessage')}</span>}
          </div>
        </div>
      ) : (
        <div className="cart-tooltip-inner">
          <div className="warn-message" role="status">
            <span>{t('Cart.Summary.Warning.WarningMessage')}</span>
            <span>&nbsp;{t('Cart.Summary.Warning.ConfirmQuestion')}</span>
          </div>
          <div className="tooltip-btn-container">
            <div className="tooltip-btn cancel-btn" role="button" tabIndex={0} onClick={() => onCancel()} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onCancel() } }}><span>{t('Cart.Summary.Warning.RejectMessage')}</span>
            </div>
            <div
              className="tooltip-btn continue-btn"
              role="button"
              tabIndex={0}
              onClick={() => onOk()}
              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOk() } }}>
              <span>{t('Cart.Summary.Warning.ConfirmMessage')}</span>
            </div>
          </div>
        </div>
      )
    }
  </div>
) : null

export default CartSummaryTooltip
