import React from 'react';
import { DatePicker } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { tCal } from "../calendarI18n";
var RangePicker = DatePicker.RangePicker;
/**
 * 内置锁台 / 屏蔽时间表单（宿主未传 `onBlockedTimePanelRequest` 时使用）。
 */
export function BookingCalendarBlockPanel(_ref) {
  var blockPanelRef = _ref.blockPanelRef,
    isLight = _ref.isLight,
    blockFormName = _ref.blockFormName,
    setBlockFormName = _ref.setBlockFormName,
    blockModalNote = _ref.blockModalNote,
    setBlockModalNote = _ref.setBlockModalNote,
    blockResourceId = _ref.blockResourceId,
    setBlockResourceId = _ref.setBlockResourceId,
    blockTimeRange = _ref.blockTimeRange,
    setBlockTimeRange = _ref.setBlockTimeRange,
    resolvedSlotMinutes = _ref.resolvedSlotMinutes,
    visibleCourts = _ref.visibleCourts,
    blockSaving = _ref.blockSaving,
    onClose = _ref.onClose,
    onSave = _ref.onSave;
  return /*#__PURE__*/React.createElement("div", {
    className: "fixed inset-0 z-50 bg-black/55 backdrop-blur-sm flex items-end md:items-center justify-center p-2 md:p-4"
  }, /*#__PURE__*/React.createElement("div", {
    ref: blockPanelRef,
    className: "w-full max-w-[720px] max-h-[92vh] overflow-y-auto rounded-t-3xl md:rounded-3xl border p-4 md:p-6 shadow-2xl ".concat(isLight ? 'theme-panel theme-border soft-shadow' : 'border-zinc-700 bg-[#121217]')
  }, /*#__PURE__*/React.createElement("div", {
    className: "mb-4 flex items-center justify-between gap-3"
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-xl font-semibold"
  }, tCal('pisell2.recordBoard.calendar.block.panelTitle')), /*#__PURE__*/React.createElement("button", {
    type: "button",
    "aria-label": tCal('pisell2.recordBoard.calendar.block.closeAria'),
    onClick: onClose,
    className: "rounded-xl p-2 ".concat(isLight ? 'btn-neutral' : 'border border-zinc-700 text-zinc-300')
  }, /*#__PURE__*/React.createElement(CloseOutlined, {
    style: {
      fontSize: 20
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: "space-y-4 rounded-2xl border p-4 ".concat(isLight ? 'theme-panel-alt theme-border' : 'border-zinc-700 bg-[#171820]')
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
    className: "mb-2 block text-sm ".concat(isLight ? 'theme-text-muted' : 'text-zinc-400')
  }, tCal('pisell2.recordBoard.calendar.block.fieldTitle')), /*#__PURE__*/React.createElement("input", {
    value: blockFormName,
    onChange: function onChange(e) {
      return setBlockFormName(e.target.value);
    },
    placeholder: tCal('pisell2.recordBoard.calendar.block.placeholderTitle'),
    className: "w-full rounded-xl px-3 py-2 outline-none ".concat(isLight ? 'theme-input theme-text' : 'border border-zinc-700 bg-[#111218] text-white')
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
    className: "mb-2 block text-sm ".concat(isLight ? 'theme-text-muted' : 'text-zinc-400')
  }, "\u5907\u6CE8"), /*#__PURE__*/React.createElement("input", {
    value: blockModalNote,
    onChange: function onChange(e) {
      return setBlockModalNote(e.target.value);
    },
    placeholder: "\u9009\u586B",
    className: "w-full rounded-xl px-3 py-2 outline-none ".concat(isLight ? 'theme-input theme-text' : 'border border-zinc-700 bg-[#111218] text-white')
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
    className: "mb-2 block text-sm ".concat(isLight ? 'theme-text-muted' : 'text-zinc-400')
  }, tCal('pisell2.recordBoard.calendar.block.fieldResource')), /*#__PURE__*/React.createElement("select", {
    value: blockResourceId,
    onChange: function onChange(e) {
      return setBlockResourceId(e.target.value);
    },
    className: "w-full rounded-xl px-3 py-2 outline-none ".concat(isLight ? 'theme-input theme-text' : 'border border-zinc-700 bg-[#111218] text-white')
  }, /*#__PURE__*/React.createElement("option", {
    value: ""
  }, tCal('pisell2.recordBoard.calendar.block.noResource')), visibleCourts.map(function (c) {
    return /*#__PURE__*/React.createElement("option", {
      key: c.id,
      value: String(c.id)
    }, c.name);
  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
    className: "mb-2 block text-sm ".concat(isLight ? 'theme-text-muted' : 'text-zinc-400')
  }, tCal('pisell2.recordBoard.calendar.block.fieldTimeRange')), /*#__PURE__*/React.createElement(RangePicker, {
    style: {
      width: '100%'
    },
    showTime: {
      format: 'HH:mm',
      minuteStep: resolvedSlotMinutes >= 60 ? 60 : Math.max(1, resolvedSlotMinutes)
    },
    format: 'YYYY-MM-DD HH:mm',
    value: blockTimeRange !== null && blockTimeRange !== void 0 ? blockTimeRange : undefined,
    onChange: function onChange(v) {
      var _ref2;
      return setBlockTimeRange((_ref2 = v) !== null && _ref2 !== void 0 ? _ref2 : null);
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: "mt-6 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3"
  }, /*#__PURE__*/React.createElement("button", {
    type: "button",
    disabled: blockSaving,
    onClick: onClose,
    className: "rounded-xl px-4 py-2 ".concat(isLight ? 'btn-neutral' : 'border border-zinc-700 text-zinc-300')
  }, tCal('pisell2.recordBoard.calendar.common.cancel')), /*#__PURE__*/React.createElement("button", {
    type: "button",
    disabled: blockSaving,
    onClick: function onClick() {
      return void onSave();
    },
    className: "rounded-xl px-5 py-3 text-sm font-semibold disabled:opacity-50 ".concat(isLight ? 'btn-brand' : 'bg-violet-600 text-white')
  }, blockSaving ? tCal('pisell2.recordBoard.calendar.common.saving') : tCal('pisell2.recordBoard.calendar.common.save')))));
}