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 ORDER_STATUS_COLOR_MAP = {
  open: {
    borderColor: '#1570EF',
    textColor: '#1570EF'
  },
  completed: {
    borderColor: '#079455',
    textColor: '#079455'
  },
  cancelled: {
    borderColor: '#D92D20',
    textColor: '#D92D20'
  }
};
function getPaymentStatusColor(status) {
  var key = status === null || status === void 0 ? void 0 : status.toLowerCase();
  return key && PAYMENT_STATUS_COLOR_MAP[key] || '#D0D5DD';
}
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 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 dataSource = _ref.dataSource,
    className = _ref.className;
  var saleInfo = useMemo(function () {
    var tempOrder = dataSource.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
    };
  }, [dataSource]);
  var paymentStatusColor = useMemo(function () {
    return getPaymentStatusColor(saleInfo.paymentStatus);
  }, [saleInfo.paymentStatus]);
  var orderStatusColor = useMemo(function () {
    return getOrderStatusColor(saleInfo.status);
  }, [saleInfo.status]);
  var paymentStatusMap = useMemo(function () {
    return {
      authorized: locales.getText('pisell2.sale-detail.paymentStatus.authorized'),
      paid: locales.getText('pisell2.sale-detail.paymentStatus.paid'),
      partially_paid: locales.getText('pisell2.sale-detail.paymentStatus.partially_paid'),
      partially_refunded: locales.getText('pisell2.sale-detail.paymentStatus.partially_refunded'),
      payment_pending: locales.getText('pisell2.sale-detail.paymentStatus.payment_pending'),
      refunded: locales.getText('pisell2.sale-detail.paymentStatus.refunded'),
      unpaid: locales.getText('pisell2.sale-detail.paymentStatus.unpaid'),
      voided: locales.getText('pisell2.sale-detail.paymentStatus.voided'),
      payment_processing: locales.getText('pisell2.sale-detail.paymentStatus.payment_processing')
    };
  }, []);
  var orderStatusMap = useMemo(function () {
    return {
      open: locales.getText('pisell2.sale-detail.orderStatus.open'),
      completed: locales.getText('pisell2.sale-detail.orderStatus.completed'),
      cancelled: locales.getText('pisell2.sale-detail.orderStatus.cancelled')
    };
  }, []);
  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
    }
  }, paymentStatusMap[saleInfo.paymentStatus || ''])));
}