Mr.X

import { Button, Card, DatePicker, Divider, Dropdown, Flex } from "antd";
import { useEffect, useRef, useState } from "react";
import styles from "./DatePickerCash.module.scss";
import Calendar from "@shared/assets/images/icons/calendar.svg?react";
import Close from "@shared/assets/images/icons/close.svg?react";
import Galochka from "@shared/assets/images/icons/galochka-dropdown.svg?react";

import dayjs, { Dayjs } from "dayjs";
import "dayjs/locale/ru";
import quarterOfYear from "dayjs/plugin/quarterOfYear";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";

dayjs.extend(quarterOfYear);
dayjs.locale("ru");

interface IDatePickerCashProps {
  isClear: boolean;
  onClose: (filters: { payment_date_from: string; payment_date_to: string }) => void;
  onClearFilter: (filterKey: string[]) => void;
  initialFrom?: string;
  initialTo?: string;
  typeDate: string;
  setSelectedDate: any;
  selectedDate: string | undefined;
}

const getQuarterDates = (year: number, quarter: number) => {
  const start = dayjs().year(year).quarter(quarter).startOf("quarter");
  const end = dayjs().year(year).quarter(quarter).endOf("quarter");
  return { start, end };
};

const getMonthDates = (year: number, month: number) => {
  const start = dayjs().year(year).month(month).startOf("month");
  const end = dayjs().year(year).month(month).endOf("month");
  return { start, end };
};

export const DatePickerCash = ({
  isClear,
  onClose,
  onClearFilter,
  initialFrom,
  initialTo,
  typeDate,
  setSelectedDate,
  selectedDate,
}: IDatePickerCashProps) => {
  // Общие состояния
  const [visible, setVisible] = useState(false);
  const [isClose, setIsClose] = useState(false);
  const [selectedLabel, setSelectedLabel] = useState<string | null>(null);
  const dateContainerRef = useRef<HTMLDivElement>(null);

  // Основные состояния дат - храним независимо от типа отображения
  const [dateRange, setDateRange] = useState<{ start: Dayjs | null; end: Dayjs | null }>({
    start: null,
    end: null,
  });

  // Состояния для режима дней
  const [value, setValue] = useState<[Dayjs | null, Dayjs | null]>([null, null]);

  // Состояния для режима кварталов
  const [displayedYears, setDisplayedYears] = useState<[number, number]>([
    dayjs().year(),
    dayjs().year() + 1,
  ]);
  const [selectedQuarters, setSelectedQuarters] = useState<
    [{ year: number; quarter: number } | null, { year: number; quarter: number } | null]
  >([null, null]);

  // Состояния для режима месяцев
  const [displayedYearSecond, setDisplayedYearSecond] = useState<number>(dayjs().year());
  const [selectedMonths, setSelectedMonths] = useState<
    [{ year: number; month: number } | null, { year: number; month: number } | null]
  >([null, null]);

  const displayedYearFirst = displayedYearSecond - 1;

  // Синхронизация состояний при изменении typeDate
  useEffect(() => {
    if (dateRange.start && dateRange.end) {
      updateStatesFromDateRange(dateRange.start, dateRange.end);
    }
  }, [typeDate]);

  // Функция для обновления всех состояний из основного диапазона дат
  const updateStatesFromDateRange = (start: Dayjs, end: Dayjs) => {
    if (typeDate === "period" || typeDate === "days") {
      setValue([start, end]);
      setSelectedLabel(`${start.format("DD.MM.YYYY")} - ${end.format("DD.MM.YYYY")}`);
    } else if (typeDate === "quarter") {
      const quarterStart = start.quarter();
      const quarterEnd = end.quarter();
      setSelectedQuarters([
        { year: start.year(), quarter: quarterStart },
        { year: end.year(), quarter: quarterEnd },
      ]);
      setSelectedLabel(`${quarterStart} кв. ${start.year()} - ${quarterEnd} кв. ${end.year()}`);
    } else if (typeDate === "month") {
      setSelectedMonths([
        { year: start.year(), month: start.month() + 1 },
        { year: end.year(), month: end.month() + 1 },
      ]);
      // Устанавливаем второй календарь на год конечной даты
      setDisplayedYearSecond(end.year());
      setSelectedLabel(`${start.format("MMMM YYYY")} - ${end.format("MMMM YYYY")}`);
    }
  };

  // Функция для преобразования текущего состояния в диапазон дат
  const getDateRangeFromCurrentState = (): { start: Dayjs | null; end: Dayjs | null } => {
    if (typeDate === "period" || typeDate === "days") {
      if (value[0] && value[1]) {
        return { start: value[0], end: value[1] };
      }
    } else if (typeDate === "quarter") {
      if (selectedQuarters[0] && selectedQuarters[1]) {
        const start = getQuarterDates(selectedQuarters[0].year, selectedQuarters[0].quarter).start;
        const end = getQuarterDates(selectedQuarters[1].year, selectedQuarters[1].quarter).end;
        return { start, end };
      }
    } else if (typeDate === "month") {
      if (selectedMonths[0] && selectedMonths[1]) {
        const start = getMonthDates(selectedMonths[0].year, selectedMonths[0].month - 1).start;
        const end = getMonthDates(selectedMonths[1].year, selectedMonths[1].month - 1).end;
        return { start, end };
      }
    }
    return { start: null, end: null };
  };


  // Быстрые периоды для дней/периода
  const quickPeriodsDays = [
    {
      name: "Сегодня",
      key: "today",
      onClick: () => {
        const today = dayjs();
        applyDateFilter(today, today, `${today.format("DD.MM.YYYY")}`);
      },
    },
    {
      name: "Вчера",
      key: "yesterday",
      onClick: () => {
        const yesterday = dayjs().add(-1, "day");
        applyDateFilter(yesterday, yesterday, `${yesterday.format("DD.MM.YYYY")}`);
      },
    },
    {
      name: "Текущий месяц",
      key: "current_month",
      onClick: () => {
        const start = dayjs().startOf("month");
        const end = dayjs().endOf("month");
        applyDateFilter(start, end, `${start.format("DD.MM")}-${end.format("DD.MM.YYYY")}`);
      },
    },
    {
      name: "Прошлый месяц",
      key: "last_month",
      onClick: () => {
        const start = dayjs().subtract(1, "month").startOf("month");
        const end = dayjs().subtract(1, "month").endOf("month");
        applyDateFilter(start, end, `${start.format("DD.MM")}-${end.format("DD.MM.YYYY")}`);
      },
    },
    {
      name: "Текущий квартал",
      key: "current_quarter",
      onClick: () => {
        const start = dayjs().startOf("quarter");
        const end = dayjs().endOf("quarter");
        applyDateFilter(start, end, `${start.format("DD.MM")}-${end.format("DD.MM.YYYY")}`);
      },
    },
    {
      name: "Прошлый квартал",
      key: "last_quarter",
      onClick: () => {
        const start = dayjs().subtract(1, "quarter").startOf("quarter");
        const end = dayjs().subtract(1, "quarter").endOf("quarter");
        applyDateFilter(start, end, `${start.format("DD.MM")}-${end.format("DD.MM.YYYY")}`);
      },
    },
    {
      name: "Текущий год",
      key: "current_year",
      onClick: () => {
        const start = dayjs().startOf("year");
        const end = dayjs().endOf("year");
        applyDateFilter(start, end, `${start.format("YYYY")}`);
      },
    },
    {
      name: "Прошлый год",
      key: "last_year",
      onClick: () => {
        const start = dayjs().subtract(1, "year").startOf("year");
        const end = dayjs().subtract(1, "year").endOf("year");
        applyDateFilter(start, end, `${start.format("YYYY")}`);
      },
    },
    {
      name: "За все время",
      key: "all_time",
      onClick: () => {
        setSelectedLabel(null);
        setValue([null, null]);
        setSelectedQuarters([null, null]);
        setSelectedMonths([null, null]);
        setDateRange({ start: null, end: null });
        setVisible(false);
        setIsClose(true);
        onClearFilter(["payment_date_from", "payment_date_to"]);
      },
    },
  ];

  // Быстрые периоды для кварталов
  const quickPeriodsQuartals = [
    {
      name: "Этот год",
      key: "current_year_quartals",
      onClick: () => {
        const year = dayjs().year();
        const start = dayjs().year(year).startOf("year");
        const end = dayjs().year(year).endOf("year");
        applyDateFilter(start, end, `${year}`);
      },
    },
    {
      name: "Прошлый год",
      key: "last_year_quartals",
      onClick: () => {
        const year = dayjs().year() - 1;
        const start = dayjs().year(year).startOf("year");
        const end = dayjs().year(year).endOf("year");
        applyDateFilter(start, end, `${year}`);
      },
    },
    {
      name: "За все время",
      key: "all_time_quartals",
      onClick: () => {
        setSelectedLabel(null);
        setValue([null, null]);
        setSelectedQuarters([null, null]);
        setSelectedMonths([null, null]);
        setDateRange({ start: null, end: null });
        setVisible(false);
        setIsClose(true);
        onClearFilter(["payment_date_from", "payment_date_to"]);
      },
    },
  ];

   // Быстрые периоды для месяцев
  const quickPeriodsMonths = [
    {
      name: "Этот месяц",
      key: "current_month",
      onClick: () => {
        const start = dayjs().startOf("month");
        const end = dayjs().endOf("month");
        applyDateFilter(start, end, `${start.format("MMMM YYYY")}`);
      },
    },
    {
      name: "Прошлый месяц",
      key: "last_month",
      onClick: () => {
        const start = dayjs().subtract(1, "month").startOf("month");
        const end = dayjs().subtract(1, "month").endOf("month");
        applyDateFilter(start, end, `${start.format("MMMM YYYY")}`);
      },
    },
    {
      name: "Этот квартал",
      key: "current_quarter",
      onClick: () => {
        const start = dayjs().startOf("quarter");
        const end = dayjs().endOf("quarter");
        const quarter = Math.ceil((dayjs().month() + 1) / 3);
        applyDateFilter(start, end, `${quarter} квартал ${dayjs().year()}`);
      },
    },
    {
      name: "Прошлый квартал",
      key: "last_quarter",
      onClick: () => {
        const start = dayjs().subtract(1, "quarter").startOf("quarter");
        const end = dayjs().subtract(1, "quarter").endOf("quarter");
        const quarter = Math.ceil((start.month() + 1) / 3);
        applyDateFilter(start, end, `${quarter} квартал ${start.year()}`);
      },
    },
    {
      name: "Этот год",
      key: "current_year",
      onClick: () => {
        const start = dayjs().startOf("year");
        const end = dayjs().endOf("year");
        applyDateFilter(start, end, `${start.format("YYYY")}`);
      },
    },
    {
      name: "За все время",
      key: "all_time",
      onClick: () => {
        setSelectedLabel(null);
        setValue([null, null]);
        setSelectedQuarters([null, null]);
        setSelectedMonths([null, null]);
        setDateRange({ start: null, end: null });
        setVisible(false);
        setIsClose(true);
        onClearFilter(["payment_date_from", "payment_date_to"]);
      },
    },
  ];

  // Обработчики для кварталов
  const handleQuarterClick = (year: number, quarter: number) => {
    setSelectedQuarters((prev) => {
      if (!prev[0]) {
        return [{ year, quarter }, null];
      } else if (!prev[1]) {
        const start = prev[0];
        const end = { year, quarter };
        if (end.year < start.year || (end.year === start.year && end.quarter < start.quarter)) {
          return [end, start];
        }
        return [start, end];
      } else {
        return [{ year, quarter }, null];
      }
    });
  };

  const isQuarterInRange = (year: number, quarter: number): boolean => {
    if (!selectedQuarters[0] || !selectedQuarters[1]) return false;
    
    const startDate = dayjs()
      .year(selectedQuarters[0].year)
      .quarter(selectedQuarters[0].quarter)
      .startOf('quarter');
      
    const endDate = dayjs()
      .year(selectedQuarters[1].year)
      .quarter(selectedQuarters[1].quarter)
      .endOf('quarter');
      
    const currentQuarter = dayjs()
      .year(year)
      .quarter(quarter)
      .startOf('quarter');
      
    return currentQuarter.isAfter(startDate) && currentQuarter.isBefore(endDate);
  };

  const isQuarterEdge = (year: number, quarter: number): boolean => {
    if (!selectedQuarters[0]) return false;
    
    if (selectedQuarters[0] && !selectedQuarters[1]) {
      return selectedQuarters[0].year === year && selectedQuarters[0].quarter === quarter;
    }
    
    if (selectedQuarters[0] && selectedQuarters[1]) {
      return (
        (selectedQuarters[0].year === year && selectedQuarters[0].quarter === quarter) ||
        (selectedQuarters[1].year === year && selectedQuarters[1].quarter === quarter)
      );
    }
    
    return false;
  };

  const changeYears = (direction: "prev" | "next") => {
    setDisplayedYears(([year1, year2]) => {
      const offset = direction === "prev" ? -2 : 2;
      return [year1 + offset, year2 + offset];
    });
  };

  // Обработчики для месяцев
  const handleMonthClick = (year: number, month: number) => {
    setSelectedMonths((prev) => {
      if (!prev[0]) {
        return [{ year, month }, null];
      } else if (!prev[1]) {
        const start = prev[0];
        const end = { year, month };
        if (end.year < start.year || (end.year === start.year && end.month < start.month)) {
          return [end, start];
        }
        return [start, end];
      } else {
        return [{ year, month }, null];
      }
    });
  };

  const changeYearMonths = (direction: "prev" | "next") => {
    setDisplayedYearSecond((prev) => prev + (direction === "prev" ? -1 : 1));
  };

  // Общая функция применения фильтра дат
  const applyDateFilter = (start: Dayjs, end: Dayjs, label: string) => {

   
    setSelectedLabel(label);
    setDateRange({ start, end });
    setVisible(false);
    setIsClose(true);
    
    const dateFilter = {
      payment_date_from: start.format("YYYY-MM-DD"),
      payment_date_to: end.format("YYYY-MM-DD"),
    };
    
    onClose(dateFilter);
  };
  const [resetKey, setResetKey] = useState(0);

  // Обработчик применения фильтра
  const onSubmit = (event: React.MouseEvent) => {
    event.stopPropagation();
    
    const dateRange = getDateRangeFromCurrentState();
    if (dateRange.start && dateRange.end) {
      let label = "";
      
      if (typeDate === "period" || typeDate === "days") {
        label = `${dateRange.start.format("DD.MM.YYYY")} - ${dateRange.end.format("DD.MM.YYYY")}`;
      } else if (typeDate === "quarter") {
        const quarterStart = dateRange.start.quarter();
        const quarterEnd = dateRange.end.quarter();
        label = `${quarterStart} кв. ${dateRange.start.year()} - ${quarterEnd} кв. ${dateRange.end.year()}`;
      } else if (typeDate === "month") {
        label = `${dateRange.start.format("MMMM YYYY")} - ${dateRange.end.format("MMMM YYYY")}`;
      }
      
      applyDateFilter(dateRange.start, dateRange.end, label);
    }
  };

  const onCancel = () => {
    setIsClose(false);
    setVisible(false);
  };

  const handleButtonClick = () => {
    setIsClose((prev) => !prev);
  };

  const resetAllState = () => {
    setSelectedLabel(null);
    setIsClose(false);
    setDateRange({ start: null, end: null });
    setValue([null, null]);
    setSelectedQuarters([null, null]);
    setSelectedMonths([null, null]);
  }

  const handleClear = (event: React.MouseEvent) => {
    event.stopPropagation();
    onClearFilter(["payment_date_from", "payment_date_to"]);
    resetAllState();
  };

  // очистка
  useEffect(() => {
    resetAllState();
  }, [isClear]);

  // Инициализация значений
  useEffect(() => {
    if (initialFrom && initialTo) {
      const start = dayjs(initialFrom);
      const end = dayjs(initialTo);
      setDateRange({ start, end });
      updateStatesFromDateRange(start, end);
    } else {
      setValue([null, null]);
      setSelectedQuarters([null, null]);
      setSelectedMonths([null, null]);
      setSelectedLabel(null);
      setDateRange({ start: null, end: null });
    }
  }, [initialFrom, initialTo]);

    useEffect(() => {
    setSelectedDate(selectedLabel)
  }, [selectedLabel]);

  const handleDropdownVisibleChange = (visible: boolean) => {
    setVisible(visible);
    if (visible) {
      setResetKey((k) => k + 1);
    }
  };

  // Рендер блока кварталов
  const renderQuartersBlock = () => {
    return (
    <div className={styles.quartersBlock}>
      <Flex justify="space-between" align="center" className={styles.yearsHeader}>
        <Button 
          type="text" 
          icon={<LeftOutlined />} 
          onClick={() => changeYears("prev")} 
        />
        <div className={styles.yearsContainer}>
          <div className={styles.year}>{displayedYears[0]}</div>
          <div className={styles.year}>{displayedYears[1]}</div>
        </div>
        <Button 
          type="text" 
          icon={<RightOutlined />} 
          onClick={() => changeYears("next")} 
        />
      </Flex>

      <Flex justify="space-between" className={styles.quartersContainer}>
        <div className={styles.quarterColumn}>
          {[1, 2, 3, 4].map((quarter) => {
            const isSelected = isQuarterEdge(displayedYears[0], quarter);
            const isInRange = isQuarterInRange(displayedYears[0], quarter);
            
            return (
              <Button
                key={`q${displayedYears[0]}-${quarter}`}
                type="text"
                className={`${styles.quarterButton} ${
                  isSelected
                    ? styles.quarterSelected
                    : isInRange
                    ? styles.quarterInRange
                    : ""
                }`}
                onClick={() => handleQuarterClick(displayedYears[0], quarter)}
              >
                {quarter} квартал
              </Button>
            );
          })}
        </div>
        <div className={styles.quarterColumn}>
          {[1, 2, 3, 4].map((quarter) => {
            const isSelected = isQuarterEdge(displayedYears[1], quarter);
            const isInRange = isQuarterInRange(displayedYears[1], quarter);
            
            return (
              <Button
                key={`q${displayedYears[1]}-${quarter}`}
                type="text"
                className={`${styles.quarterButton} ${
                  isSelected
                    ? styles.quarterSelected
                    : isInRange
                    ? styles.quarterInRange
                    : ""
                }`}
                onClick={() => handleQuarterClick(displayedYears[1], quarter)}
              >
                {quarter} квартал
              </Button>
            );
          })}
        </div>
      </Flex>
    </div>
  );
};

  // Рендер блока месяцев
  const renderMonthsBlock = () => (
    <div className={styles.monthsBlock}>
      <Flex justify="space-between" className={styles.monthsContainer}>
        {/* Первый календарь - предыдущий год */}
        <div className={styles.monthCalendar}>
          <Flex justify="space-between" align="center" className={styles.yearHeader}>
            <Button 
              type="text" 
              icon={<LeftOutlined />} 
              onClick={() => changeYearMonths("prev")} 
            />
            <div className={styles.currentYear}>{displayedYearFirst}</div>
            <div style={{ width: 32 }} /> 
          </Flex>

          <div className={styles.monthsGrid}>
            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((monthIndex) => {
              const isSelected = selectedMonths.some(
                (m) => m?.year === displayedYearFirst && m?.month === monthIndex + 1
              );
              const isInRange = isMonthInRange(displayedYearFirst, monthIndex + 1);
              
              return (
                <Button
                  key={`m${displayedYearFirst}-${monthIndex}`}
                  type="text"
                  className={`${styles.monthButton} ${
                    isSelected
                      ? styles.monthSelected
                      : isInRange
                      ? styles.monthInRange
                      : ""
                  }`}
                  onClick={() => handleMonthClick(displayedYearFirst, monthIndex + 1)}
                >
                  {dayjs().month(monthIndex).format("MMM")}
                </Button>
              );
            })}
          </div>
        </div>

        {/* Второй календарь */}
        <div className={styles.monthCalendar}>
          <Flex justify="space-between" align="center" className={styles.yearHeader}>
            <div style={{ width: 32 }} />
            <div className={styles.currentYear}>{displayedYearSecond}</div>
            <Button 
              type="text" 
              icon={<RightOutlined />} 
              onClick={() => changeYearMonths("next")} 
            />
          </Flex>

          <div className={styles.monthsGrid}>
            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((monthIndex) => {
              const isSelected = selectedMonths.some(
                (m) => m?.year === displayedYearSecond && m?.month === monthIndex + 1
              );
              const isInRange = isMonthInRange(displayedYearSecond, monthIndex + 1);
              
              return (
                <Button
                  key={`m${displayedYearSecond}-${monthIndex}`}
                  type="text"
                  className={`${styles.monthButton} ${
                    isSelected
                      ? styles.monthSelected
                      : isInRange
                      ? styles.monthInRange
                      : ""
                  }`}
                  onClick={() => handleMonthClick(displayedYearSecond, monthIndex + 1)}
                >
                  {dayjs().month(monthIndex).format("MMM")}
                </Button>
              );
            })}
          </div>
        </div>
      </Flex>
    </div>
  );

    // Проверка находится ли месяц в выбранном диапазоне
  const isMonthInRange = (year: number, month: number): boolean => {
    if (!selectedMonths[0] || !selectedMonths[1]) return false;
    
    const startDate = dayjs()
      .year(selectedMonths[0].year)
      .month(selectedMonths[0].month - 1)
      .startOf('month');
      
    const endDate = dayjs()
      .year(selectedMonths[1].year)
      .month(selectedMonths[1].month - 1)
      .endOf('month');
      
    const currentMonth = dayjs()
      .year(year)
      .month(month - 1)
      .startOf('month');
      
    return currentMonth.isAfter(startDate) && currentMonth.isBefore(endDate);
  };

  // Рендер полей ввода для кварталов/месяцев
  const renderCustomInputs = () => {
    let startValue = "";
    let endValue = "";

    if (typeDate === "quarter") {
      if (selectedQuarters[0]) {
        startValue = `${selectedQuarters[0].quarter}й кв ${selectedQuarters[0].year}`;
      }
      if (selectedQuarters[1]) {
        endValue = `${selectedQuarters[1].quarter}й кв ${selectedQuarters[1].year}`;
      }
    } else if (typeDate === "month") {
      if (selectedMonths[0]) {
        startValue = dayjs()
          .month(selectedMonths[0].month - 1)
          .year(selectedMonths[0].year)
          .format("MMMM YYYY");
      }
      if (selectedMonths[1]) {
        endValue = dayjs()
          .month(selectedMonths[1].month - 1)
          .year(selectedMonths[1].year)
          .format("MMMM YYYY");
      }
    }

    return (
      <div className={styles.customInputs}>
        <input
          readOnly
          value={startValue}
          className={styles.customInput}
        />
        <Flex align="center">-</Flex>
        <input
          readOnly
          value={endValue}
          className={styles.customInput}
        />
      </div>
    );
  };

  return (
    <div>
      <Dropdown
        open={visible}
        onOpenChange={handleDropdownVisibleChange}
        transitionName=""
        dropdownRender={() => (
          <Card className={`${styles.card} ${typeDate === "month" ? styles.cardFull : ""}`} onClick={(e) => e.stopPropagation()}>
            {/* Левое меню */}
            {(typeDate === "period" || typeDate === "days") && (
              <div className={styles.menu}>
                {quickPeriodsDays.map((item) => (
                  <Button
                    type="text"
                    size="large"
                    key={item.key}
                    className={styles.menuButton}
                    onClick={item.onClick}
                  >
                    {item.name}
                  </Button>
                ))}
              </div>
            )}

            {typeDate === "quarter" && (
              <div className={styles.menu}>
                {quickPeriodsQuartals.map((item) => (
                  <Button
                    type="text"
                    size="large"
                    key={item.key}
                    className={styles.menuButton}
                    onClick={item.onClick}
                  >
                    {item.name}
                  </Button>
                ))}
              </div>
            )}

            {typeDate === "month" && (
              <div className={styles.menu}>
                {quickPeriodsMonths.map((item) => (
                  <Button
                    type="text"
                    size="large"
                    key={item.key}
                    className={styles.menuButton}
                    onClick={item.onClick}
                  >
                    {item.name}
                  </Button>
                ))}
              </div>
            )}

            <Divider style={{ margin: 0 }} />
            {/* Правый блок */}
            <div ref={dateContainerRef} className={styles.calendar}>
              {typeDate === "quarter" && renderQuartersBlock()}
              {typeDate === "month" && renderMonthsBlock()}
            </div>
          <div className={`${styles.bottom} ${typeDate === 'month' && styles.bottomPosition}`}>
            {(typeDate === "period" || typeDate === "days") && (
                <DatePicker.RangePicker
                  key={resetKey}
                  className={styles.range}
                  getPopupContainer={() =>
                    dateContainerRef.current ? dateContainerRef.current : document.body
                  }
                  open={true}
                  onChange={(dates) => {
                    if (dates && dates[0] && dates[1]) {
                      setValue([dates[0], dates[1]]);
                    } else {
                      setValue([null, null]);
                    }
                  }}
                  value={value}
                  format="DD.MM.YYYY"
                  placeholder={["Начало", "Конец"]}
                />
            )}
              {(typeDate === "quarter" || typeDate === "month") && renderCustomInputs()}
              <Flex gap={8} justify="flex-end">
                <Button onClick={onCancel}>Отменить</Button>
                <Button onClick={onSubmit} type="primary">
                  Применить
                </Button>
              </Flex>
            </div>
          </Card>
        )}
        trigger={["click"]}
      >
        <Button
          size="large"
          iconPosition="end"
          onClick={handleButtonClick}
          className={selectedLabel ? styles.blah : ""}
          style={{padding: '0px 10px 0 0'}}
        >
          {selectedLabel ? (
            <Flex className={styles.closeIcon} onClick={handleClear}>
              <Close className={styles.dateClose_btn} width={16} height={16} />
            </Flex>
          ) : (
            <Galochka width={16} height={16} style={{marginLeft: '-12px'}}/>
          )}

          <Flex gap={8} className={`${styles.buttonContent} ${selectedLabel && styles.buttonContent_selectedLabel}`} style={{ fontSize: "14px" }}>
            <Calendar />
              {selectedLabel ? selectedLabel : "За все время"}
          </Flex>
        </Button>
      </Dropdown>
    </div>
  );
};
Name	Type	Size	Permission
DeleteArticleGroupModal	Folder		0755
DeleteArticleModal	Folder		0755
DatePickerCash.module.scss	File	5.88 KB	0644
DatePickerCash.tsx	File	28.25 KB	0644
Upload:

Command:

Filemanager

Server Info

System Info

User Info
