import { reactive } from "vue";

const globalLabels = reactive(window.wpAmeliaLabels)

function usePaymentGatewayName (payment) {
  if (payment.gateway === 'onSite') {
    return globalLabels.on_site
  }

  if (payment.gateway === 'wc') {
    return payment.gatewayTitle
  }

  if (payment.gateway) {
    return payment.gateway.charAt(0).toUpperCase() + payment.gateway.slice(1)
  }
}

function usePaymentStatusName (status) {
  switch (status) {
    case ('paid'):
      return globalLabels.paid

    case ('pending'):
      return globalLabels.pending

    case ('partiallyPaid'):
      return globalLabels.partially_paid

    case ('refunded'):
      return globalLabels.refunded
  }
}

function usePaymentStatusIcon (status, amColors) {
  switch (status) {
    case 'paid':
      return {
        icon: 'am-icon-checkmark-circle',
        color: amColors.colorSuccess
      }
    case 'pending':
      return {
        icon: 'am-icon-refresh',
        color: amColors.colorWarning
      }
    case 'partiallyPaid':
      return {
        icon:'am-icon-prepaid',
        color: amColors.colorPrimary
      }
    case 'refunded':
      return {
        icon:'am-icon-refund',
        color: amColors.colorError
      }
  }
}

export {
  usePaymentGatewayName,
  usePaymentStatusName,
  usePaymentStatusIcon,
}