import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import dayjs from "dayjs";
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import { Select, Space } from "antd";
import { getUniqueId, locales } from "@pisell/utils";
import debounce from "lodash/debounce";
//#region src/components/pisellSelectCustomerModal/RightPanel/Add/BirthdayField/index.tsx
const { Option } = Select;
const getSelectInput = (id) => {
	const input = document.getElementById(id);
	if (input) return input;
};
const setSelectInputType = ({ input, type }) => {
	if (input) input.type = type;
};
const DateSectionCom = ({ value, onChange, showTime, className = "", style = {}, useSpace = true, format, itemStyle = { width: 100 } }) => {
	const currentYear = dayjs().year();
	const locale = locales.locale;
	const dayRef = useRef(null);
	const monthRef = useRef(null);
	const yearRef = useRef(null);
	const [date, setDate] = useState({
		year: value ? dayjs(value).year() : null,
		month: value ? dayjs(value).month() + 1 : null,
		day: value ? dayjs(value).date() : null
	});
	const [dayOptions, setDayOptions] = useState([]);
	const [monthOptions, setMonthOptions] = useState([]);
	const [yearOptions, setYearOptions] = useState([]);
	const localeMap = {
		year: locales.getText("pisell2.text.date-year-text"),
		month: locales.getText("pisell2.text.date-month-text"),
		day: locales.getText("pisell2.text.date-day-text")
	};
	useEffect(() => {
		setDate({
			year: value ? dayjs(value).year() : null,
			month: value ? dayjs(value).month() + 1 : null,
			day: value ? dayjs(value).date() : null
		});
	}, [value]);
	useEffect(() => {
		setMonthOptions(renderOptions("month", 1, 12));
		setYearOptions(renderOptions("year", currentYear - 100, currentYear + 50));
	}, []);
	useEffect(() => {
		setDayOptions(renderOptions("day", 1, date.month ? getDaysInMonth(date.year || currentYear, date.month) : 31));
	}, [date.month, date.year]);
	/**
	* @title: 下拉框变化
	* @description:
	* @param {any} field
	* @param {any} value
	* @return {*}
	* @Author: chensheng.gu
	* @Date: 2024-03-22 17:49
	*/
	const handleDateChange = (field, value) => {
		if (!value) return;
		let newDate = {
			year: date.year,
			month: date.month,
			day: date.day,
			[field]: value
		};
		const foucsList = {
			day: monthRef,
			month: yearRef
		};
		if (field === "month" || field === "year") {
			const daysInMonth = getDaysInMonth((newDate === null || newDate === void 0 ? void 0 : newDate.year) || currentYear, newDate === null || newDate === void 0 ? void 0 : newDate.month);
			const newDay = (newDate === null || newDate === void 0 ? void 0 : newDate.day) > daysInMonth ? daysInMonth : newDate.day;
			newDate = _objectSpread2(_objectSpread2({}, newDate), {}, { day: newDay });
		}
		setDate(newDate);
		if (foucsList[field]) foucsList[field].current.focus();
		else yearRef.current.blur();
		const _format = format || "YYYY-MM-DD";
		if (newDate.year && newDate.month && newDate.day) onChange(dayjs(`${newDate.year}-${newDate.month.toString().padStart(2, "0")}-${newDate.day.toString().padStart(2, "0")}`).format(_format));
	};
	/**
	* @title: 获取日期
	* @description:
	* @param {any} year
	* @param {any} month
	* @return {*}
	* @Author: chensheng.gu
	* @Date: 2024-03-22 17:49
	*/
	const getDaysInMonth = (year, month) => {
		return dayjs(`${year}-${month}`, "YYYY-MM").daysInMonth();
	};
	/**
	* @title: 渲染下拉框列表
	* @description:
	* @param {any} field
	* @param {any} start
	* @param {any} end
	* @return {*}
	* @Author: chensheng.gu
	* @Date: 2024-03-22 17:50
	*/
	const renderOptions = (field, start, end) => {
		const options = [];
		const _text = locale !== "en-US" && locale !== "en" ? localeMap[field] : "";
		for (let i = start; i <= end; i++) options.push({
			label: `${i}${_text}`,
			value: i
		});
		return options;
	};
	const selectId = useMemo(() => {
		return {
			dayId: getUniqueId("day"),
			monthId: getUniqueId("month"),
			yearId: getUniqueId("year")
		};
	}, []);
	useLayoutEffect(() => {
		setSelectInputType({
			input: getSelectInput(selectId.dayId),
			type: "number"
		});
		setSelectInputType({
			input: getSelectInput(selectId.monthId),
			type: "number"
		});
		setSelectInputType({
			input: getSelectInput(selectId.yearId),
			type: "number"
		});
	}, [selectId]);
	const handleDateSearch = useCallback(debounce((field, value) => {
		const dateOption = {
			day: dayOptions,
			month: monthOptions,
			year: yearOptions
		};
		const _value = Number(value);
		if (dateOption[field].findIndex((item) => {
			return item.value === _value;
		}) !== -1) handleDateChange(field, _value);
		else handleDateChange(field, null);
	}, 300), [
		dayOptions,
		monthOptions,
		yearOptions,
		date
	]);
	const content = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Select, {
		id: selectId.dayId,
		value: date.day,
		placeholder: locales.getText("pisell2.text.date-day-text"),
		onChange: (value) => handleDateChange("day", value),
		style: itemStyle,
		showSearch: true,
		onSearch: (value) => {
			handleDateSearch("day", value);
		},
		ref: dayRef,
		size: "large"
	}, dayOptions.map((item) => {
		return /* @__PURE__ */ React.createElement(Option, {
			key: item.value,
			value: item.value
		}, item.label);
	})), /* @__PURE__ */ React.createElement(Select, {
		id: selectId.monthId,
		value: date.month,
		placeholder: locales.getText("pisell2.text.date-month-text"),
		onChange: (value) => handleDateChange("month", value),
		style: itemStyle,
		showSearch: true,
		onSearch: (value) => {
			handleDateSearch("month", value);
		},
		ref: monthRef,
		size: "large"
	}, monthOptions.map((item) => {
		return /* @__PURE__ */ React.createElement(Option, {
			key: item.value,
			value: item.value
		}, item.label);
	})), /* @__PURE__ */ React.createElement(Select, {
		id: selectId.yearId,
		value: date.year,
		placeholder: locales.getText("pisell2.text.date-year-text"),
		onChange: (value) => handleDateChange("year", value),
		style: itemStyle,
		showSearch: true,
		onSearch: (value) => {
			handleDateSearch("year", value);
		},
		ref: yearRef,
		size: "large"
	}, yearOptions.map((item) => {
		return /* @__PURE__ */ React.createElement(Option, {
			key: item.value,
			value: item.value
		}, item.label);
	})));
	if (useSpace) return /* @__PURE__ */ React.createElement(Space, {
		className: className || "",
		style: style || {}
	}, content);
	return /* @__PURE__ */ React.createElement("div", {
		className: className || "",
		style: style || {}
	}, content);
};
//#endregion
export { DateSectionCom as default };
