import React from 'react';
import { Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { Iconfont } from '@pisell/materials';
import { DEFAULT_STATUS_COLOR, PREFIX } from "../constants";
import { stopPropagation } from "../utils/render";
var getStatusOption = function getStatusOption(status) {
  var statusOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  return statusOptions.find(function (option) {
    return option.key === status;
  }) || statusOptions[0] || {
    key: status || '',
    label: status || '-',
    color: DEFAULT_STATUS_COLOR
  };
};
var getReadableTextColor = function getReadableTextColor(color) {
  if (!color) return undefined;
  var normalizedColor = color.trim();
  var hex = normalizedColor.length === 4 ? normalizedColor.replace(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i, '#$1$1$2$2$3$3') : normalizedColor;
  var match = /^#([0-9a-f]{6})$/i.exec(hex);
  if (!match) return undefined;
  var red = Number.parseInt(match[1].slice(0, 2), 16);
  var green = Number.parseInt(match[1].slice(2, 4), 16);
  var blue = Number.parseInt(match[1].slice(4, 6), 16);
  var luminance = (red * 299 + green * 587 + blue * 114) / 1000;
  return luminance > 150 ? '#101828' : '#ffffff';
};
var BookingHeader = function BookingHeader(_ref) {
  var booking = _ref.booking,
    source = _ref.source,
    _ref$statusOptions = _ref.statusOptions,
    statusOptions = _ref$statusOptions === void 0 ? [] : _ref$statusOptions,
    statusLoading = _ref.statusLoading,
    statusDisabled = _ref.statusDisabled,
    isShowDelete = _ref.isShowDelete,
    onBookingStatusChange = _ref.onBookingStatusChange,
    onDelete = _ref.onDelete;
  var currentStatus = getStatusOption(booking.status, statusOptions);
  var headerTextColor = getReadableTextColor(currentStatus.color);
  var statusMenuItems = statusOptions.filter(function (option) {
    return option.key !== currentStatus.key;
  }).map(function (option) {
    return {
      key: option.key,
      label: option.label,
      danger: option.danger
    };
  });
  var canChangeStatus = Boolean(onBookingStatusChange && !statusDisabled && !statusLoading && (statusMenuItems === null || statusMenuItems === void 0 ? void 0 : statusMenuItems.length));
  var statusButton = /*#__PURE__*/React.createElement("button", {
    className: "".concat(PREFIX, "__status"),
    type: "button",
    disabled: !canChangeStatus,
    onClick: stopPropagation
  }, /*#__PURE__*/React.createElement("span", null, currentStatus.label), canChangeStatus ? /*#__PURE__*/React.createElement(DownOutlined, null) : null);
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "__booking-header"),
    style: {
      '--pisell-line-item-booking-accent': currentStatus.color || DEFAULT_STATUS_COLOR,
      '--pisell-line-item-booking-bg': currentStatus.color || DEFAULT_STATUS_COLOR,
      '--pisell-line-item-booking-text': headerTextColor || 'var(--pisell-line-item-header-text)',
      '--pisell-line-item-booking-sub-text': headerTextColor ? "".concat(headerTextColor, "cc") : 'var(--pisell-line-item-header-sub-text)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "__booking-header-main")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "__booking-headline")
  }, booking.bookingId ? /*#__PURE__*/React.createElement("span", {
    className: "".concat(PREFIX, "__booking-id")
  }, booking.bookingId) : null, booking.timeText ? /*#__PURE__*/React.createElement("span", {
    className: "".concat(PREFIX, "__booking-time")
  }, booking.timeText) : null), /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "__booking-header-actions")
  }, canChangeStatus ? /*#__PURE__*/React.createElement(Dropdown, {
    menu: {
      items: statusMenuItems,
      onClick: function onClick(_ref2) {
        var key = _ref2.key;
        return onBookingStatusChange === null || onBookingStatusChange === void 0 ? void 0 : onBookingStatusChange(String(key), source);
      }
    },
    trigger: ['click']
  }, statusButton) : statusButton, isShowDelete ? /*#__PURE__*/React.createElement("button", {
    className: "".concat(PREFIX, "__header-delete"),
    type: "button",
    onClick: function onClick(event) {
      stopPropagation(event);
      onDelete === null || onDelete === void 0 || onDelete(source);
    }
  }, /*#__PURE__*/React.createElement(Iconfont, {
    type: "pisell2-trash-01"
  })) : null)), booking.title ? /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "__booking-title")
  }, booking.title) : null);
};
export default BookingHeader;