import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
import { SyncOutlined } from '@ant-design/icons';
import { Tabs, useToast } from '@pisell/materials';
import { locales } from '@pisell/utils';
import BookingDashboard from "./BookingDashboard";
import BookingList from "./BookingList";
import "./index.less";
var BookingDataPanel = /*#__PURE__*/forwardRef(function (props, ref) {
  var currentDate = props.currentDate,
    onBookingClick = props.onBookingClick,
    onClearActiveBooking = props.onClearActiveBooking,
    bookingId = props.bookingId;
  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 refreshAll = useCallback(function () {
    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();
  }, []);
  var items = useMemo(function () {
    return [{
      label: locales.getText('pisell2.big-sale.dashboard'),
      key: 'data-board',
      children: /*#__PURE__*/React.createElement(BookingDashboard, {
        bookingTimeStartBetween: bookingTimeStartBetween,
        ref: bookingDashboardRef
      })
    }, {
      label: locales.getText('pisell2.big-sale.booking-list'),
      key: 'booking-list',
      children: /*#__PURE__*/React.createElement(BookingList, {
        bookingTimeStartBetween: bookingTimeStartBetween,
        onBookingClick: onBookingClick,
        bookingId: bookingId,
        ref: bookingListRef
      })
    }];
  }, [bookingTimeStartBetween, bookingId, onBookingClick]);
  useImperativeHandle(ref, function () {
    return {
      refresh: refreshAll
    };
  }, [refreshAll]);
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-big-sale-booking-data-panel"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-big-sale-booking-data-panel-mask",
    style: {
      display: bookingId ? 'block' : 'none'
    },
    onClick: onClearActiveBooking
  }), /*#__PURE__*/React.createElement(Tabs, {
    type: "line",
    items: items,
    tabBarExtraContent: /*#__PURE__*/React.createElement("div", {
      className: "pisell-big-sale-booking-data-panel-tab-extra",
      onClick: function onClick() {
        var _Toast$success;
        refreshAll();
        Toast === null || Toast === void 0 || (_Toast$success = Toast.success) === null || _Toast$success === void 0 || _Toast$success.call(Toast, locales.getText('pisell2.big-sale.refresh-success'));
      }
    }, /*#__PURE__*/React.createElement(SyncOutlined, null)),
    tabBarStyle: {
      margin: '0 0 0 16px',
      height: '40px'
    }
  }));
});
BookingDataPanel.displayName = 'BigSaleBookingDataPanel';
export default BookingDataPanel;