import { Button, ButtonGroup, Stack } from "@mui/material";
import { ConfigProvider, DatePicker } from "antd";
import en_US from "antd/es/locale/en_US";
import kk_KZ from "antd/es/locale/kk_KZ";
import ru_RU from "antd/es/locale/ru_RU";
import dayjs, { Dayjs } from "dayjs";
import isoWeek from "dayjs/plugin/isoWeek";
import { RangeValueType } from "rc-picker/lib/PickerInput/RangePicker";
import { FC, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

import { DateRangeType } from "../../../models/DateRangeType";

dayjs.extend(isoWeek); // Подключите плагин isoWeek
const { RangePicker } = DatePicker;

interface Props {
	name: string;
	onChange: (name: string, value: RangeValueType<Dayjs>) => void;
}

const initialRangeType = DateRangeType.today;

export const DateRange: FC<Props> = ({ name, onChange }) => {
	const [locale, setLocale] = useState(en_US);
	const { i18n, t } = useTranslation();
	const [rangeType, setRangeType] = useState<DateRangeType | undefined>(
		initialRangeType,
	);
	const [value, setValue] = useState<RangeValueType<Dayjs>>([
		dayjs(),
		dayjs(),
	]);

	useEffect(() => {
		const currentLanguage = i18n.language;

		switch (currentLanguage) {
			case "en":
				setLocale(en_US);
				break;
			case "ru":
				setLocale(ru_RU);
				break;
			case "kk":
				setLocale(kk_KZ);
				break;
			default:
				setLocale(en_US);
		}
	}, [i18n.language]);

	useEffect(() => {
		if (rangeType === undefined) {
			return;
		}

		setValue(getDateRange(rangeType));
	}, [rangeType]);

	useEffect(() => {
		onChange(name, value);
	}, [value]);

	const handleToggleRangeType = (rangeType: DateRangeType) => () => {
		setRangeType(rangeType);
	};

	const getVariant = (name: DateRangeType) => {
		return rangeType === name ? "contained" : "outlined";
	};

	return (
		<Stack direction="column" spacing={1}>
			<ConfigProvider locale={locale}>
				<RangePicker
					showTime
					format="DD.MM.YYYY HH:mm"
					getPopupContainer={handleGetParent}
					value={value}
					onChange={(x) => setValue(x || value)}
					dropdownClassName="z-2050"
				/>
			</ConfigProvider>

			<ButtonGroup variant="outlined">
				<Button
					type="button"
					onClick={handleToggleRangeType(DateRangeType.today)}
					variant={getVariant(DateRangeType.today)}
				>
					{t("today")}
				</Button>
				<Button
					type="button"
					onClick={handleToggleRangeType(DateRangeType.yesterday)}
					variant={getVariant(DateRangeType.yesterday)}
				>
					{t("yesterday")}
				</Button>
				<Button
					type="button"
					onClick={handleToggleRangeType(DateRangeType.currentMonth)}
					variant={getVariant(DateRangeType.currentMonth)}
				>
					{t("currentMonth")}
				</Button>
				<Button
					type="button"
					onClick={handleToggleRangeType(DateRangeType.lastMonth)}
					variant={getVariant(DateRangeType.lastMonth)}
				>
					{t("lastMonth")}
				</Button>
			</ButtonGroup>
		</Stack>
	);
};

function getDateRange(rangeType: DateRangeType): [Dayjs, Dayjs] {
	if (rangeType === DateRangeType.today) {
		return [dayjs().startOf("day"), dayjs().endOf("day")];
	}

	if (rangeType === DateRangeType.yesterday) {
		return [
			dayjs().subtract(1, "day").startOf("day"),
			dayjs().subtract(1, "day").endOf("day"),
		];
	}

	if (rangeType === DateRangeType.currentMonth) {
		return [dayjs().startOf("month"), dayjs().endOf("month")];
	}

	if (rangeType === DateRangeType.lastMonth) {
		return [
			dayjs().subtract(1, "month").startOf("month"),
			dayjs().subtract(1, "month").endOf("month"),
		];
	}

	throw new Error("Unknown rangeType");
}

function getParentNode(): HTMLElement {
	return document.getElementsByClassName(
		"MuiDialog-container",
	)[0] as HTMLElement;
}

function handleGetParent(trigger: HTMLElement): HTMLElement {
	if (trigger.parentElement) {
		return getParentNode();
	}

	throw new Error("Parent is not recognized");
}
