import React from 'react';
import { Tooltip } from 'antd';
import classNames from 'classnames';
import { formatDate, formatTime, toDate } from "../utils/time";
import { formatDurationI18n, t } from "../i18n";
var formatMoney = function formatMoney(value, currencySymbol) {
  return "".concat(currencySymbol).concat(Number(value || 0).toFixed(2));
};

// 暂时不展示后端返回的 description，避免 HTML/空内容等数据直接进入 tooltip。
// const getProductDescription = (product: AdjustTimeProduct): string => {
//   const description = product._originalProduct?.description;
//   return typeof description === 'string' ? description.trim() : '';
// };

var fillDuration = function fillDuration(template, minutes) {
  return template.replace('{duration}', formatDurationI18n(Number(minutes || 0)));
};
var getProductHelpText = function getProductHelpText(product) {
  // 暂时跳过后端 description 展示逻辑，后续确认数据格式后再恢复。
  // const description = getProductDescription(product);
  // if (description) return description;
  if (product.unlimited) {
    return t('pisell2.adjust-time.help.product-unlimited-fallback');
  }
  return fillDuration(t('pisell2.adjust-time.help.product-fixed-fallback'), product.minMinutes || product.unitMinutes || product.maxMinutes);
};
var HelpTip = function HelpTip(_ref) {
  var title = _ref.title;
  if (!title) return null;
  return /*#__PURE__*/React.createElement(Tooltip, {
    title: /*#__PURE__*/React.createElement("div", {
      style: {
        whiteSpace: 'pre-wrap'
      }
    }, title)
  }, /*#__PURE__*/React.createElement("span", {
    className: "pisell-adjust-time__help"
  }, "?"));
};
export var AdjustTimeActionList = function AdjustTimeActionList(_ref2) {
  var booking = _ref2.booking,
    products = _ref2.products,
    activeAction = _ref2.activeAction,
    currencySymbol = _ref2.currencySymbol,
    onActionChange = _ref2.onActionChange;
  var start = toDate(booking.start);
  var end = toDate(booking.end);
  return /*#__PURE__*/React.createElement("aside", {
    className: "pisell-adjust-time__rail"
  }, /*#__PURE__*/React.createElement("section", {
    className: "pisell-adjust-time__booking-card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-adjust-time__product-head"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-adjust-time__venue-cover",
    "aria-label": t('pisell2.adjust-time.venue-cover')
  }, booking.cover ? /*#__PURE__*/React.createElement("img", {
    src: booking.cover,
    alt: ""
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
    className: "pisell-adjust-time__title"
  }, booking.title), booking.id != null && /*#__PURE__*/React.createElement("p", {
    className: "pisell-adjust-time__meta"
  }, /*#__PURE__*/React.createElement("span", {
    className: "pisell-adjust-time__meta-label"
  }, t('pisell2.adjust-time.booking-id')), /*#__PURE__*/React.createElement("strong", null, booking.id)))), /*#__PURE__*/React.createElement("div", {
    className: "pisell-adjust-time__was-block"
  }, /*#__PURE__*/React.createElement("span", {
    className: "pisell-adjust-time__was-label"
  }, t('pisell2.adjust-time.was')), /*#__PURE__*/React.createElement("div", {
    className: "pisell-adjust-time__was-time"
  }, /*#__PURE__*/React.createElement("span", null, formatTime(start), "-", formatTime(end)), /*#__PURE__*/React.createElement("span", {
    className: "pisell-adjust-time__pill-ended"
  }, t('pisell2.adjust-time.ended'))), /*#__PURE__*/React.createElement("div", {
    className: "pisell-adjust-time__was-time pisell-adjust-time__was-date"
  }, formatDate(start)))), /*#__PURE__*/React.createElement("nav", {
    className: "pisell-adjust-time__actions",
    "aria-label": t('pisell2.adjust-time.actions-aria')
  }, /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: classNames('pisell-adjust-time__action', {
      'pisell-adjust-time__action--active': activeAction === 'payOvertime'
    }),
    onClick: function onClick() {
      return onActionChange('payOvertime');
    }
  }, /*#__PURE__*/React.createElement("span", {
    className: "pisell-adjust-time__icon pisell-adjust-time__icon--glyph"
  }, "\u25F7"), /*#__PURE__*/React.createElement("span", {
    className: "pisell-adjust-time__action-main"
  }, /*#__PURE__*/React.createElement("span", {
    className: "pisell-adjust-time__action-label"
  }, t('pisell2.adjust-time.pay-overtime'))), /*#__PURE__*/React.createElement(HelpTip, {
    title: t('pisell2.adjust-time.help.pay-overtime')
  })), products.map(function (product, index) {
    return /*#__PURE__*/React.createElement("button", {
      key: product.id,
      type: "button",
      className: classNames('pisell-adjust-time__action', {
        'pisell-adjust-time__action--active': activeAction === "product:".concat(product.id)
      }),
      onClick: function onClick() {
        return onActionChange("product:".concat(product.id));
      }
    }, /*#__PURE__*/React.createElement("span", {
      className: classNames('pisell-adjust-time__icon', "pisell-adjust-time__icon--".concat(index % 4))
    }, product.unlimited ? 'Day' : "".concat(product.minMinutes || 0, "m")), /*#__PURE__*/React.createElement("span", {
      className: "pisell-adjust-time__action-main"
    }, /*#__PURE__*/React.createElement("span", {
      className: "pisell-adjust-time__action-label"
    }, product.title), /*#__PURE__*/React.createElement("span", {
      className: "pisell-adjust-time__action-price"
    }, formatMoney(product.price, currencySymbol))), /*#__PURE__*/React.createElement(HelpTip, {
      title: getProductHelpText(product)
    }));
  }), /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: classNames('pisell-adjust-time__action', {
      'pisell-adjust-time__action--active': activeAction === 'manualDuration'
    }),
    onClick: function onClick() {
      return onActionChange('manualDuration');
    }
  }, /*#__PURE__*/React.createElement("span", {
    className: "pisell-adjust-time__icon pisell-adjust-time__icon--dim pisell-adjust-time__icon--glyph"
  }, "\u2301"), /*#__PURE__*/React.createElement("span", {
    className: "pisell-adjust-time__action-main"
  }, /*#__PURE__*/React.createElement("span", {
    className: "pisell-adjust-time__action-label"
  }, t('pisell2.adjust-time.manual-add-time'))), /*#__PURE__*/React.createElement(HelpTip, {
    title: t('pisell2.adjust-time.help.manual-add-time')
  })), /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: classNames('pisell-adjust-time__action', {
      'pisell-adjust-time__action--active': activeAction === 'restart'
    }),
    onClick: function onClick() {
      return onActionChange('restart');
    }
  }, /*#__PURE__*/React.createElement("span", {
    className: "pisell-adjust-time__icon pisell-adjust-time__icon--dim pisell-adjust-time__icon--glyph"
  }, "\u27F3"), /*#__PURE__*/React.createElement("span", {
    className: "pisell-adjust-time__action-main"
  }, /*#__PURE__*/React.createElement("span", {
    className: "pisell-adjust-time__action-label"
  }, t('pisell2.adjust-time.restart'))), /*#__PURE__*/React.createElement(HelpTip, {
    title: t('pisell2.adjust-time.help.restart')
  }))));
};