import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
import { Tabs } from '@pisell/materials';
import { locales } from '@pisell/utils';
import { SyncOutlined } from '@ant-design/icons';
import BookingDashboard from "./bookingDashboard";
import BookingList from "./bookingList";
import { useToast } from '@pisell/materials';
import "./index.less";
var BookingDataPanel = /*#__PURE__*/forwardRef(function (props, ref) {
  var currentDate = props.currentDate,
    onBookingClick = props.onBookingClick,
    bookingId = props.bookingId,
    _props$isVisible = props.isVisible,
    isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
  var Toast = useToast();
  var bookingListRef = useRef(null);
  var bookingDashboardRef = useRef(null);
  var bookingTimeStartBetween = useMemo(function () {
    return ["".concat(currentDate, " 00:00:00"), "".concat(currentDate, " 23:59:59")];
  }, [currentDate]);
  var items = useMemo(function () {
    return [{
      label: locales.getText('pisell2.ticket-booking.dashboard'),
      key: 'data-board',
      children: /*#__PURE__*/React.createElement(BookingDashboard, {
        bookingTimeStartBetween: bookingTimeStartBetween,
        isVisible: isVisible,
        ref: bookingDashboardRef
      })
    }, {
      label: locales.getText('pisell2.ticket-booking.booking-list'),
      key: 'booking-list',
      children: /*#__PURE__*/React.createElement(BookingList, {
        bookingTimeStartBetween: bookingTimeStartBetween,
        onBookingClick: onBookingClick,
        bookingId: bookingId,
        ref: bookingListRef
      })
    }];
  }, [currentDate, bookingId, isVisible]);
  useImperativeHandle(ref, function () {
    return {
      refresh: function refresh() {
        var _bookingListRef$curre, _bookingDashboardRef$;
        (_bookingListRef$curre = bookingListRef.current) === null || _bookingListRef$curre === void 0 || _bookingListRef$curre.refresh();
        (_bookingDashboardRef$ = bookingDashboardRef.current) === null || _bookingDashboardRef$ === void 0 || _bookingDashboardRef$.refresh();
      }
    };
  });
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-ticket-booking-data-panel"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-ticket-booking-data-panel-mask",
    style: {
      display: bookingId ? 'block' : 'none'
    },
    onClick: function onClick() {
      onBookingClick({});
    }
  }), /*#__PURE__*/React.createElement(Tabs, {
    type: "line",
    items: items,
    tabBarExtraContent: /*#__PURE__*/React.createElement("div", {
      className: "pisell-ticket-booking-data-panel-tab-extra",
      onClick: function onClick() {
        var _bookingListRef$curre2, _bookingDashboardRef$2, _Toast$success;
        (_bookingListRef$curre2 = bookingListRef.current) === null || _bookingListRef$curre2 === void 0 || _bookingListRef$curre2.refresh();
        (_bookingDashboardRef$2 = bookingDashboardRef.current) === null || _bookingDashboardRef$2 === void 0 || _bookingDashboardRef$2.refresh();
        Toast === null || Toast === void 0 || (_Toast$success = Toast.success) === null || _Toast$success === void 0 || _Toast$success.call(Toast, locales.getText('pisell2.ticket-booking.refresh-success'));
      }
    }, /*#__PURE__*/React.createElement(SyncOutlined, null)),
    tabBarStyle: {
      margin: '0 0 0 16px',
      height: '40px'
    }
  }));
});
export default BookingDataPanel;