import dayjs from "dayjs";
import React, { useEffect, useMemo, useState } from "react";
import { Button } from "antd";
import { locales } from "@pisell/utils";
import { DatePicker as DatePicker$1, Iconfont, SelectTime } from "@pisell/materials";
import classNames from "classnames";
import { useMemoizedFn } from "ahooks";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import "./index.less";
//#region src/components/ticketBooking/components/timeBar/index.tsx
const TimeBar = (props) => {
	var _state$modalState7;
	const { globalState: state, setGlobalState, locale, onCreateClick, setNowTime } = props;
	const [collapsed, setCollapsed] = useState(true);
	const [scaleCompensation, setScaleCompensation] = useState(1);
	useEffect(() => {
		const getBodyScale = () => {
			const body = document.body;
			const transform = window.getComputedStyle(body).transform;
			if (transform && transform !== "none") {
				const matrix = transform.match(/matrix\(([^)]+)\)/);
				if (matrix) return matrix[1].split(",").map((v) => parseFloat(v.trim()))[0] || 1;
			}
			return 1;
		};
		const updateScale = () => {
			setScaleCompensation(getBodyScale());
		};
		updateScale();
		const observer = new MutationObserver(updateScale);
		observer.observe(document.body, {
			attributes: true,
			attributeFilter: ["style", "class"]
		});
		window.addEventListener("resize", updateScale);
		return () => {
			observer.disconnect();
			window.removeEventListener("resize", updateScale);
		};
	}, []);
	const _onClickNext = useMemoizedFn(() => {
		var _state$modalState, _props$onDateChange, _props$setIntervalTim;
		const newTime = ((_state$modalState = state.modalState) === null || _state$modalState === void 0 || (_state$modalState = _state$modalState.date) === null || _state$modalState === void 0 ? void 0 : _state$modalState.value)["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);
	});
	const _onClickPre = useMemoizedFn(() => {
		var _state$modalState2, _props$onDateChange2, _props$setIntervalTim2;
		const newTime = ((_state$modalState2 = state.modalState) === null || _state$modalState2 === void 0 || (_state$modalState2 = _state$modalState2.date) === null || _state$modalState2 === void 0 ? void 0 : _state$modalState2.value)["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);
	});
	const _onClickToday = useMemoizedFn(() => {
		var _props$setIntervalTim3;
		setNowTime === null || setNowTime === void 0 || setNowTime(dayjs());
		(_props$setIntervalTim3 = props.setIntervalTime) === null || _props$setIntervalTim3 === void 0 || _props$setIntervalTim3.call(props, true);
	});
	const _onClickNow = useMemoizedFn(() => {
		var _props$setIntervalTim4;
		setNowTime === null || setNowTime === void 0 || setNowTime(dayjs());
		(_props$setIntervalTim4 = props.setIntervalTime) === null || _props$setIntervalTim4 === void 0 || _props$setIntervalTim4.call(props, true);
	});
	const _onDateTimeChange = useMemoizedFn((timeString) => {
		var _state$modalState3, _props$onDateTimeChan, _props$setIntervalTim5;
		const 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;
		const [hours, minutes] = timeString.split(":").map(Number);
		const 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"));
	});
	const _onToggleCollapse = useMemoizedFn(() => {
		setCollapsed(!collapsed);
	});
	return useMemo(() => {
		var _state$modalState5, _state$modalState6;
		if (collapsed) {
			var _state$modalState4;
			const currentDate = 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;
			const displayText = currentDate && currentDate.isSame(dayjs(), "day") ? locales.getText("pisell2.ticket-booking.today") : (currentDate === null || currentDate === void 0 ? void 0 : currentDate.format("YYYY-MM-DD")) || "";
			const compensatedHeight = 40 / scaleCompensation;
			return /* @__PURE__ */ React.createElement("div", {
				className: classNames("pisell-ticket-booking-time-bar", "collapsed"),
				style: {
					height: `${compensatedHeight}px`,
					minHeight: `${compensatedHeight}px`,
					maxHeight: `${compensatedHeight}px`
				}
			}, /* @__PURE__ */ React.createElement("div", {
				className: "pisell-ticket-booking-time-bar-collapsed-content",
				style: { height: `${compensatedHeight}px` }
			}, /* @__PURE__ */ React.createElement("span", {
				className: "pisell-ticket-booking-time-bar-collapsed-today",
				style: { lineHeight: `${compensatedHeight}px` }
			}, displayText), /* @__PURE__ */ React.createElement(Button, {
				type: "link",
				size: "small",
				className: "pisell-ticket-booking-time-bar-collapsed-expand",
				onClick: _onToggleCollapse,
				style: { lineHeight: `${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"
			} : void 0
		}, 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$1, {
			inputReadOnly: true,
			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: 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$modalState6 = state.modalState) === null || _state$modalState6 === void 0 || (_state$modalState6 = _state$modalState6.date) === null || _state$modalState6 === void 0 ? void 0 : _state$modalState6.value.format("HH:mm"),
			onChange: _onDateTimeChange,
			popoverProps: { style: { zoom: .8 } },
			timePickerProps: {},
			timeProps: {},
			slice: 5
		})), !state.bookingId && /* @__PURE__ */ React.createElement(Button, {
			onClick: _onClickNow,
			size: "large",
			style: state.intervalSetTime ? {
				background: "#000",
				color: "#fff"
			} : void 0
		}, locales.getText("pisell2.ticket-booking.now")), !!state.bookingId && /* @__PURE__ */ React.createElement(Button, {
			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$modalState7 = state.modalState) === null || _state$modalState7 === void 0 || (_state$modalState7 = _state$modalState7.date) === null || _state$modalState7 === void 0 ? void 0 : _state$modalState7.value,
		state.intervalSetTime,
		state.isTimeChange,
		state.isDateChange,
		locale,
		_onToggleCollapse,
		scaleCompensation
	]);
};
//#endregion
export { TimeBar as default };
