function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useMemo, useState, useEffect } from 'react';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { DatePicker, SelectTime, Iconfont } from '@pisell/materials';
import { useMemoizedFn } from 'ahooks';
import { Button } from 'antd';
import dayjs from 'dayjs';
import classNames from 'classnames';
import { locales } from '@pisell/utils';
import { withResponsive } from "../../../../responsive";
import CompensatedPisellContainer from "../../../../pro/compensatedPisellContainer";
import "./index.less";
var TimeBar = function TimeBar(props) {
  var _state$modalState9;
  var state = props.globalState,
    setGlobalState = props.setGlobalState,
    locale = props.locale,
    onCreateClick = props.onCreateClick,
    setNowTime = props.setNowTime,
    variant = props.variant,
    _props$mobileDrawerOp = props.mobileDrawerOpen,
    mobileDrawerOpen = _props$mobileDrawerOp === void 0 ? false : _props$mobileDrawerOp,
    onMobileDrawerClose = props.onMobileDrawerClose;
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    collapsed = _useState2[0],
    setCollapsed = _useState2[1];
  var _useState3 = useState(1),
    _useState4 = _slicedToArray(_useState3, 2),
    scaleCompensation = _useState4[0],
    setScaleCompensation = _useState4[1];

  // 获取 body 的 scale 值并计算补偿
  useEffect(function () {
    var getBodyScale = function getBodyScale() {
      var body = document.body;
      var computedStyle = window.getComputedStyle(body);
      var transform = computedStyle.transform;
      if (transform && transform !== 'none') {
        // 解析 transform matrix 获取 scale 值
        // matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)
        var matrix = transform.match(/matrix\(([^)]+)\)/);
        if (matrix) {
          var values = matrix[1].split(',').map(function (v) {
            return parseFloat(v.trim());
          });
          // scaleX 通常是 matrix 的第一个值
          var scale = values[0] || 1;
          return scale;
        }
      }
      return 1;
    };
    var updateScale = function updateScale() {
      var scale = getBodyScale();
      // 目标高度是 40px，需要补偿 scale 的影响
      // 实际设置高度 = 目标高度 / scale
      setScaleCompensation(scale);
    };
    updateScale();

    // 监听 body 的 transform 变化（使用 MutationObserver）
    var observer = new MutationObserver(updateScale);
    observer.observe(document.body, {
      attributes: true,
      attributeFilter: ['style', 'class']
    });

    // 也监听窗口大小变化（某些情况下 scale 可能随窗口变化）
    window.addEventListener('resize', updateScale);
    return function () {
      observer.disconnect();
      window.removeEventListener('resize', updateScale);
    };
  }, []);
  var _onClickNext = useMemoizedFn(function () {
    var _state$modalState, _props$onDateChange, _props$setIntervalTim;
    var currentTime = (_state$modalState = state.modalState) === null || _state$modalState === void 0 || (_state$modalState = _state$modalState.date) === null || _state$modalState === void 0 ? void 0 : _state$modalState.value;
    var newTime = currentTime['add'](1, 'day');
    (_props$onDateChange = props.onDateChange) === null || _props$onDateChange === void 0 || _props$onDateChange.call(props, newTime, newTime.format('YYYY-MM-DD HH:mm:ss'));
    (_props$setIntervalTim = props.setIntervalTime) === null || _props$setIntervalTim === void 0 || _props$setIntervalTim.call(props, false);
  });
  var _onClickPre = useMemoizedFn(function () {
    var _state$modalState2, _props$onDateChange2, _props$setIntervalTim2;
    var currentTime = (_state$modalState2 = state.modalState) === null || _state$modalState2 === void 0 || (_state$modalState2 = _state$modalState2.date) === null || _state$modalState2 === void 0 ? void 0 : _state$modalState2.value;
    var newTime = currentTime['subtract'](1, 'day');
    (_props$onDateChange2 = props.onDateChange) === null || _props$onDateChange2 === void 0 || _props$onDateChange2.call(props, newTime, newTime.format('YYYY-MM-DD HH:mm:ss'));
    (_props$setIntervalTim2 = props.setIntervalTime) === null || _props$setIntervalTim2 === void 0 || _props$setIntervalTim2.call(props, false);
  });
  var _onClickToday = useMemoizedFn(function () {
    var _props$setIntervalTim3;
    setNowTime === null || setNowTime === void 0 || setNowTime(dayjs());
    (_props$setIntervalTim3 = props.setIntervalTime) === null || _props$setIntervalTim3 === void 0 || _props$setIntervalTim3.call(props, true);
  });
  var _onClickNow = useMemoizedFn(function () {
    var _props$setIntervalTim4;
    setNowTime === null || setNowTime === void 0 || setNowTime(dayjs());
    (_props$setIntervalTim4 = props.setIntervalTime) === null || _props$setIntervalTim4 === void 0 || _props$setIntervalTim4.call(props, true);
  });

  // 时间选择变更事件
  var _onDateTimeChange = useMemoizedFn(function (timeString) {
    var _state$modalState3, _props$onDateTimeChan, _props$setIntervalTim5;
    var currentTime = (_state$modalState3 = state.modalState) === null || _state$modalState3 === void 0 || (_state$modalState3 = _state$modalState3.date) === null || _state$modalState3 === void 0 ? void 0 : _state$modalState3.value;
    var _timeString$split$map = timeString.split(':').map(Number),
      _timeString$split$map2 = _slicedToArray(_timeString$split$map, 2),
      hours = _timeString$split$map2[0],
      minutes = _timeString$split$map2[1];
    var newTime = currentTime.hour(hours).minute(minutes).second(0);
    (_props$onDateTimeChan = props.onDateTimeChange) === null || _props$onDateTimeChan === void 0 || _props$onDateTimeChan.call(props, newTime, newTime.format('YYYY-MM-DD HH:mm:ss'));
    setGlobalState({
      isTimeChange: true
    });
    (_props$setIntervalTim5 = props.setIntervalTime) === null || _props$setIntervalTim5 === void 0 || _props$setIntervalTim5.call(props, timeString === dayjs().format('HH:mm'));
  });
  var _onToggleCollapse = useMemoizedFn(function () {
    setCollapsed(!collapsed);
  });
  return useMemo(function () {
    var _state$modalState7, _state$modalState8;
    if (variant === 'phone') {
      var _state$modalState4, _state$modalState5;
      return /*#__PURE__*/React.createElement(CompensatedPisellContainer, {
        renderType: "drawer",
        showHandlerBar: true,
        onHandlerBarClick: onMobileDrawerClose,
        props: {
          open: mobileDrawerOpen,
          onClose: onMobileDrawerClose,
          placement: 'bottom',
          header: false,
          footer: false,
          closable: false,
          destroyOnClose: false,
          className: 'pisell-ticket-booking-time-bar-drawer-phone',
          contentWrapperStyle: {
            maxWidth: 'none',
            height: 'auto'
          },
          styles: {
            body: {
              padding: 0
            }
          }
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: "pisell-ticket-booking-time-bar-phone",
        style: {
          backgroundColor: state.isDateChange ? '#F79009' : ''
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: "pisell-ticket-booking-time-bar-phone-nav"
      }, /*#__PURE__*/React.createElement(Button, {
        icon: /*#__PURE__*/React.createElement(LeftOutlined, null),
        onClick: _onClickPre,
        size: "large"
      }), /*#__PURE__*/React.createElement("div", {
        className: classNames('pisell-ticket-booking-time-bar-phone-field', {
          'booking-page-date-picker-select': state.isDateChange
        })
      }, /*#__PURE__*/React.createElement(DatePicker, {
        inputReadOnly: true,
        value: state === null || state === void 0 || (_state$modalState4 = state.modalState) === null || _state$modalState4 === void 0 || (_state$modalState4 = _state$modalState4.date) === null || _state$modalState4 === void 0 ? void 0 : _state$modalState4.value,
        format: locale === 'en' ? 'DD MMM YYYY' : 'YYYY年MM月DD日',
        onChange: props === null || props === void 0 ? void 0 : props.onDateChange,
        size: "large",
        style: {
          width: '100%'
        }
      })), /*#__PURE__*/React.createElement(Button, {
        icon: /*#__PURE__*/React.createElement(RightOutlined, null),
        onClick: _onClickNext,
        size: "large"
      })), /*#__PURE__*/React.createElement("div", {
        className: "pisell-ticket-booking-time-bar-phone-today"
      }, /*#__PURE__*/React.createElement(Button, {
        block: true,
        onClick: _onClickToday,
        size: "large",
        style: state.intervalSetTime ? {
          background: '#000',
          color: '#fff'
        } : undefined
      }, locales.getText('pisell2.ticket-booking.today'))), /*#__PURE__*/React.createElement("div", {
        className: classNames('pisell-ticket-booking-time-bar-phone-field', {
          'booking-page-date-picker-select': state.isTimeChange
        })
      }, /*#__PURE__*/React.createElement(SelectTime, {
        value: state === null || state === void 0 || (_state$modalState5 = state.modalState) === null || _state$modalState5 === void 0 || (_state$modalState5 = _state$modalState5.date) === null || _state$modalState5 === void 0 ? void 0 : _state$modalState5.value.format('HH:mm'),
        onChange: _onDateTimeChange,
        popoverProps: {
          style: {
            zoom: 0.8
          }
        },
        timePickerProps: {},
        timeProps: {},
        slice: 5
      })), !state.bookingId && /*#__PURE__*/React.createElement(Button, {
        block: true,
        onClick: _onClickNow,
        size: "large",
        style: state.intervalSetTime ? {
          background: '#000',
          color: '#fff'
        } : undefined
      }, locales.getText('pisell2.ticket-booking.now')), !!state.bookingId && /*#__PURE__*/React.createElement(Button, {
        block: true,
        onClick: function onClick() {
          onCreateClick();
          onMobileDrawerClose === null || onMobileDrawerClose === void 0 || onMobileDrawerClose();
        },
        size: "large",
        type: "primary"
      }, locales.getText('pisell2.ticket-booking.create-new'))));
    }

    // 收起状态
    if (collapsed) {
      var _state$modalState6;
      var currentDate = state === null || state === void 0 || (_state$modalState6 = state.modalState) === null || _state$modalState6 === void 0 || (_state$modalState6 = _state$modalState6.date) === null || _state$modalState6 === void 0 ? void 0 : _state$modalState6.value;
      var isToday = currentDate && currentDate.isSame(dayjs(), 'day');
      var displayText = isToday ? locales.getText('pisell2.ticket-booking.today') : (currentDate === null || currentDate === void 0 ? void 0 : currentDate.format('YYYY-MM-DD')) || '';

      // 计算补偿后的高度：目标高度 / scale
      var targetHeight = 40;
      var compensatedHeight = targetHeight / scaleCompensation;
      return /*#__PURE__*/React.createElement("div", {
        className: classNames('pisell-ticket-booking-time-bar', 'collapsed'),
        style: {
          height: "".concat(compensatedHeight, "px"),
          minHeight: "".concat(compensatedHeight, "px"),
          maxHeight: "".concat(compensatedHeight, "px")
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: "pisell-ticket-booking-time-bar-collapsed-content",
        style: {
          height: "".concat(compensatedHeight, "px")
        }
      }, /*#__PURE__*/React.createElement("span", {
        className: "pisell-ticket-booking-time-bar-collapsed-today",
        style: {
          lineHeight: "".concat(compensatedHeight, "px")
        }
      }, displayText), /*#__PURE__*/React.createElement(Button, {
        type: "link",
        size: "small",
        className: "pisell-ticket-booking-time-bar-collapsed-expand",
        onClick: _onToggleCollapse,
        style: {
          lineHeight: "".concat(compensatedHeight, "px")
        }
      }, /*#__PURE__*/React.createElement("span", null, locales.getText('pisell2.ticket-booking.expand')), /*#__PURE__*/React.createElement(Iconfont, {
        type: "pisell2-chevron-right-double"
      }))));
    }

    // 展开状态
    return /*#__PURE__*/React.createElement("div", {
      className: "pisell-ticket-booking-time-bar",
      style: {
        backgroundColor: state.isDateChange ? '#F79009' : ''
      }
    }, /*#__PURE__*/React.createElement(Button, {
      icon: /*#__PURE__*/React.createElement(LeftOutlined, null),
      onClick: _onClickPre,
      size: "large"
    }), /*#__PURE__*/React.createElement(Button, {
      onClick: _onClickToday,
      size: "large",
      style: state.intervalSetTime ? {
        background: '#000',
        color: '#fff'
      } : undefined
    }, locales.getText('pisell2.ticket-booking.today')), /*#__PURE__*/React.createElement("div", {
      className: classNames({
        'booking-page-date-picker-select': state.isDateChange
      }),
      style: {
        width: 200,
        flexShrink: 0
      }
    }, /*#__PURE__*/React.createElement(DatePicker, {
      inputReadOnly: true,
      value: state === null || state === void 0 || (_state$modalState7 = state.modalState) === null || _state$modalState7 === void 0 || (_state$modalState7 = _state$modalState7.date) === null || _state$modalState7 === void 0 ? void 0 : _state$modalState7.value,
      format: locale === 'en' ? 'dddd, DD MMM YYYY' : 'YYYY年MM月DD日',
      onChange: props === null || props === void 0 ? void 0 : props.onDateChange,
      size: "large",
      style: {
        width: '100%'
      }
    })), /*#__PURE__*/React.createElement(Button, {
      icon: /*#__PURE__*/React.createElement(RightOutlined, null),
      onClick: _onClickNext,
      size: "large"
    }), /*#__PURE__*/React.createElement("div", {
      className: classNames({
        'booking-page-date-picker-select': state.isTimeChange
      })
    }, /*#__PURE__*/React.createElement(SelectTime, {
      value: state === null || state === void 0 || (_state$modalState8 = state.modalState) === null || _state$modalState8 === void 0 || (_state$modalState8 = _state$modalState8.date) === null || _state$modalState8 === void 0 ? void 0 : _state$modalState8.value.format('HH:mm'),
      onChange: _onDateTimeChange,
      popoverProps: {
        style: {
          zoom: 0.8
        }
      },
      timePickerProps: {},
      timeProps: {},
      slice: 5
    })), !state.bookingId && /*#__PURE__*/React.createElement(Button, {
      onClick: _onClickNow,
      size: "large",
      style: state.intervalSetTime ? {
        background: '#000',
        color: '#fff'
      } : undefined
    }, locales.getText('pisell2.ticket-booking.now')), !!state.bookingId && /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        onCreateClick();
      },
      size: "large",
      type: "primary"
    }, locales.getText('pisell2.ticket-booking.create-new')), /*#__PURE__*/React.createElement(Button, {
      type: "link",
      style: {
        marginLeft: 'auto'
      },
      onClick: _onToggleCollapse
    }, /*#__PURE__*/React.createElement("span", null, locales.getText('pisell2.ticket-booking.collapse')), /*#__PURE__*/React.createElement(Iconfont, {
      type: "pisell2-chevron-left-double"
    })));
  }, [collapsed, (_state$modalState9 = state.modalState) === null || _state$modalState9 === void 0 || (_state$modalState9 = _state$modalState9.date) === null || _state$modalState9 === void 0 ? void 0 : _state$modalState9.value, state.intervalSetTime, state.isTimeChange, state.isDateChange, locale, _onToggleCollapse, scaleCompensation, variant, mobileDrawerOpen, onMobileDrawerClose, _onClickPre, _onClickToday, _onClickNext, _onDateTimeChange, _onClickNow, onCreateClick]);
};
TimeBar.displayName = 'TimeBar';
export default withResponsive(TimeBar);