import React, { useMemo } from 'react';
import classNames from 'classnames';
import { locales } from '@pisell/utils';
import { formatLocalizedDateTime } from "../../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 || '';
}
export function SaleOverview(_ref) {
  var _sales$tempOrder;
  var context = _ref.context,
    className = _ref.className;
  var sales = context.sales;
  var saleInfo = useMemo(function () {
    var tempOrder = 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
    };
  }, [sales]);
  var paymentStatusColor = useMemo(function () {
    return getPaymentStatusColor(saleInfo.paymentStatus);
  }, [saleInfo.paymentStatus]);
  var orderStatusColor = useMemo(function () {
    return getOrderStatusColor(saleInfo.status);
  }, [saleInfo.status]);
  if (!saleInfo.orderNumber) {
    return /*#__PURE__*/React.createElement("header", {
      className: classNames('pisell-sale-detail-sale-overview', 'pisell-sale-detail-sale-overview--skeleton', className)
    }, /*#__PURE__*/React.createElement("div", {
      className: "pisell-sale-detail-sale-overview__main"
    }, /*#__PURE__*/React.createElement("div", {
      className: "pisell-sale-detail-sale-overview__skeleton pisell-sale-detail-sale-overview__skeleton--title"
    }), /*#__PURE__*/React.createElement("div", {
      className: "pisell-sale-detail-sale-overview__meta"
    }, /*#__PURE__*/React.createElement("span", {
      className: "pisell-sale-detail-sale-overview__skeleton pisell-sale-detail-sale-overview__skeleton--meta"
    }), /*#__PURE__*/React.createElement("span", {
      className: "pisell-sale-detail-sale-overview__skeleton pisell-sale-detail-sale-overview__skeleton--meta pisell-sale-detail-sale-overview__skeleton--meta-secondary"
    }))), /*#__PURE__*/React.createElement("div", {
      className: "pisell-sale-detail-sale-overview__status"
    }, /*#__PURE__*/React.createElement("span", {
      className: "pisell-sale-detail-sale-overview__skeleton pisell-sale-detail-sale-overview__skeleton--badge"
    })));
  }
  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"
  }, /*#__PURE__*/React.createElement("span", null, sales.shop_full_order_number), (_sales$tempOrder = sales.tempOrder) !== null && _sales$tempOrder !== void 0 && _sales$tempOrder.shop_order_number ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: "pisell-sale-detail-sale-overview__order-number-separator"
  }, "/"), /*#__PURE__*/React.createElement("span", {
    className: "pisell-sale-detail-sale-overview__shop-order-number"
  }, sales.tempOrder.shop_order_number)) : null), /*#__PURE__*/React.createElement("div", {
    className: "pisell-sale-detail-sale-overview__meta"
  }, /*#__PURE__*/React.createElement("span", null, locales.getText('pisell2.sale-detail.placed-at'), " \xB7", ' ', formatLocalizedDateTime(saleInfo.createdAt)), saleInfo.updatedAt && saleInfo.updatedAt !== saleInfo.createdAt ? /*#__PURE__*/React.createElement("span", null, locales.getText('pisell2.sale-detail.updated-at'), " \xB7", ' ', formatLocalizedDateTime(saleInfo.updatedAt)) : null)), /*#__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))));
}