import React, { useMemo } from "react";
import { locales } from "@pisell/utils";
import { Button, Skeleton } from "antd";
import dayjs from "dayjs";
import { isAllDay } from "../../schedules/utils";
import "./index.less";
var formatTimeAmPm = function formatTimeAmPm(str) {
  return dayjs(str).format("hh:mm A");
};
var startEndTime = function startEndTime(start, end) {
  return "".concat(formatTimeAmPm(start), " - ").concat(formatTimeAmPm(end));
};
var formatDateTimeAmPm = function formatDateTimeAmPm(str) {
  return dayjs(str).format("YYYY-MM-DD hh:mm A");
};
var startEndDateTime = function startEndDateTime(start, end) {
  return "".concat(formatDateTimeAmPm(start), " - ").concat(formatDateTimeAmPm(end));
};
var ScheduleTimeItem = function ScheduleTimeItem(props) {
  var _scheduleMap$item$id;
  var item = props.item,
    scheduleMap = props.scheduleMap;
  var renderFormat = ((_scheduleMap$item$id = scheduleMap[item.id]) === null || _scheduleMap$item$id === void 0 ? void 0 : _scheduleMap$item$id.dateRangeFormat) || [];
  if (!renderFormat.length || renderFormat.some(function (item) {
    return isAllDay({
      start_time: item.start,
      end_time: item.end
    });
  })) {
    return /*#__PURE__*/React.createElement("div", {
      className: "pisell-lowcode__schedule-detail-item-time-item"
    }, locales.getText("pisell2.text.schedules.all-day"));
  }
  return renderFormat.map(function (item) {
    return /*#__PURE__*/React.createElement("div", {
      className: "pisell-lowcode__schedule-detail-item-time-item",
      key: item.start + item.end
    }, isAllDay({
      start_time: item.start,
      end_time: item.end
    }) ? locales.getText("pisell2.text.schedules.all-day") : startEndTime(item.start, item.end));
  });
};

/**
 * 日程列表 展示日程中详细时间段信息
 * @param props
 * @constructor
 */
var ScheduleDetailList = function ScheduleDetailList(props) {
  var dataSource = props.dataSource,
    onOpenDetail = props.onOpenDetail,
    loading = props.loading,
    scheduleMap = props.scheduleMap;
  var content = useMemo(function () {
    return dataSource.map(function (item) {
      return /*#__PURE__*/React.createElement("div", {
        className: "pisell-lowcode__schedule-detail-item",
        key: item.id
      }, /*#__PURE__*/React.createElement("div", {
        className: "pisell-lowcode__schedule-detail-item-title"
      }, /*#__PURE__*/React.createElement("div", {
        className: "pisell-lowcode__schedule-detail-item-title-color",
        style: {
          backgroundColor: item.color
        }
      }), /*#__PURE__*/React.createElement("div", {
        className: "pisell-lowcode__schedule-detail-item-title-name"
      }, item.name)), /*#__PURE__*/React.createElement(ScheduleTimeItem, {
        item: item,
        scheduleMap: scheduleMap
      }), /*#__PURE__*/React.createElement(Button, {
        className: "pisell-lowcode__schedule-detail-item-button",
        onClick: function onClick() {
          return onOpenDetail === null || onOpenDetail === void 0 ? void 0 : onOpenDetail(item.id);
        },
        size: "large"
      }, locales.getText("pisell2.text.schedules.edit-schedule")));
    });
  }, [dataSource, scheduleMap]);
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__schedule-detail-list"
  }, loading ? /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__schedule-detail-item"
  }, /*#__PURE__*/React.createElement(Skeleton, null)) : content);
};
export default ScheduleDetailList;