import React, { useMemo } from 'react';
import classNames from 'classnames';
import dayjs from 'dayjs';
import { locales } from '@pisell/utils';
import "./index.less";
var PAYMENT_STATUS_COLOR_MAP = {
  unpaid: '#B2DDFF',
  payment_processing: '#FEDF89',
  payment_pending: '#FEDF89',
  authorized: '#ABEFC6',
  paid: '#ABEFC6',
  refunded: '#FECDCA',
  partially_refunded: '#FCCEEE',
  voided: '#D0D5DD'
};
var PAYMENT_STATUS_TEXT_KEY_MAP = {
  authorized: 'pisell2.sale-detail.paymentStatus.authorized',
  paid: 'pisell2.sale-detail.paymentStatus.paid',
  partially_paid: 'pisell2.sale-detail.paymentStatus.partially_paid',
  partially_refunded: 'pisell2.sale-detail.paymentStatus.partially_refunded',
  payment_pending: 'pisell2.sale-detail.paymentStatus.payment_pending',
  refunded: 'pisell2.sale-detail.paymentStatus.refunded',
  unpaid: 'pisell2.sale-detail.paymentStatus.unpaid',
  voided: 'pisell2.sale-detail.paymentStatus.voided',
  payment_processing: 'pisell2.sale-detail.paymentStatus.payment_processing'
};
var ORDER_STATUS_COLOR_MAP = {
  open: {
    borderColor: '#1570EF',
    textColor: '#1570EF'
  },
  completed: {
    borderColor: '#079455',
    textColor: '#079455'
  },
  cancelled: {
    borderColor: '#D92D20',
    textColor: '#D92D20'
  }
};
var ORDER_STATUS_TEXT_KEY_MAP = {
  open: 'pisell2.sale-detail.orderStatus.open',
  completed: 'pisell2.sale-detail.orderStatus.completed',
  cancelled: 'pisell2.sale-detail.orderStatus.cancelled'
};
function getPaymentStatusColor(status) {
  var key = status === null || status === void 0 ? void 0 : status.toLowerCase();
  return key && PAYMENT_STATUS_COLOR_MAP[key] || '#D0D5DD';
}
function getPaymentStatusText(status) {
  var key = status === null || status === void 0 ? void 0 : status.toLowerCase();
  var textKey = key && PAYMENT_STATUS_TEXT_KEY_MAP[key];
  return textKey ? locales.getText(textKey) : status || '';
}
function getOrderStatusColor(status) {
  var key = status === null || status === void 0 ? void 0 : status.toLowerCase();
  return key && ORDER_STATUS_COLOR_MAP[key] || ORDER_STATUS_COLOR_MAP.open;
}
function getOrderStatusText(status) {
  var key = status === null || status === void 0 ? void 0 : status.toLowerCase();
  var textKey = key && ORDER_STATUS_TEXT_KEY_MAP[key];
  return textKey ? locales.getText(textKey) : status || '';
}
function formatDateTime(value) {
  if (!value) return '-';
  var date = dayjs(value);
  return date.isValid() ? date.format('DD/MM/YYYY HH:mm') : value;
}
export function SaleOverview(_ref) {
  var context = _ref.context,
    className = _ref.className;
  var saleInfo = useMemo(function () {
    var tempOrder = context.sales.tempOrder;
    return {
      orderNumber: tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.shop_full_order_number,
      paymentStatus: (tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.payment_status) || '',
      status: (tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.status) || '',
      createdAt: tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.created_at,
      updatedAt: tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.updated_at
    };
  }, [context]);
  var paymentStatusColor = useMemo(function () {
    return getPaymentStatusColor(saleInfo.paymentStatus);
  }, [saleInfo.paymentStatus]);
  var orderStatusColor = useMemo(function () {
    return getOrderStatusColor(saleInfo.status);
  }, [saleInfo.status]);
  if (!saleInfo.orderNumber) {
    return null;
  }
  return /*#__PURE__*/React.createElement("header", {
    className: classNames('pisell-sale-detail-sale-overview', className)
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-sale-detail-sale-overview__main"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-sale-detail-sale-overview__order-number"
  }, saleInfo.orderNumber), /*#__PURE__*/React.createElement("div", {
    className: "pisell-sale-detail-sale-overview__meta"
  }, /*#__PURE__*/React.createElement("span", null, locales.getText('pisell2.sale-detail.placed-at'), " \xB7", ' ', formatDateTime(saleInfo.createdAt)))), /*#__PURE__*/React.createElement("div", {
    className: "pisell-sale-detail-sale-overview__status"
  }, /*#__PURE__*/React.createElement("span", {
    className: "pisell-sale-detail-sale-overview__status-badge pisell-sale-detail-sale-overview__status-badge--payment",
    style: {
      '--pisell-sale-detail-overview-payment-color': paymentStatusColor
    }
  }, getPaymentStatusText(saleInfo.paymentStatus))));
}