import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright (c) 2020-present SMC Treviso s.r.l. All rights reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
import React from "react";
import { css } from "styled-components";
import "overlayscrollbars/css/OverlayScrollbars.css";
import { ModalDetail } from "./ModalDetail";
import { DeleteLogo } from "./DeleteLogo";
import { DateRangePicker } from "react-dates";
import { CalendarMobileSvg } from "../svgElement/CalendarMobileSvg";
import { AddFiltersSvg } from "../svgElement/AddFiltersSvg";
import { TrashSvg } from "../svgElement/TrashSvg";
import moment from "moment";
import "moment/locale/it";
import "moment/locale/es";
import "moment/locale/fr";
import { useTranslation } from "react-i18next";
import "moment/locale/de";
import "moment/locale/it";
import "moment/locale/es";
export function CalendarMobile({ onChange, calendarDate, isVisibleCalendar, setIsVisibleCalendar, startDate, endDate, focusedInput, setStartDate, setEndDate, setFocusedInput, activeLanguage, isCLickReset, setIsCLickReset, language, }) {
    const handleDatesChange = ({ startDate, endDate, }) => {
        setStartDate(startDate || undefined);
        setEndDate(endDate || undefined);
    };
    const handleFocusChange = (focusedInput) => {
        setFocusedInput(focusedInput);
    };
    const { t } = useTranslation();
    React.useEffect(() => {
        onChange({
            startDate: undefined,
            endDate: undefined,
            keywordKey: undefined,
        });
        if (setIsCLickReset)
            setIsCLickReset(false);
    }, [isCLickReset]);
    const languageCalendar = mappingNameLanguage(language);
    moment.locale(languageCalendar);
    const componet = (_jsxs(React.Fragment, { children: [_jsxs("div", { css: css `
          display: flex;
          justify-content: space-beetween;
          background: white;
          padding-inline: 8px;
          align-items: center;
        `, children: [_jsx("div", { className: "openk9-filter-list-container-title box-title", css: css `
            padding: 0px 16px;
            width: 100%;
            background: white;
            padding-top: 20px;
            padding-bottom: 13px;
            display: flex;
            align-items: center;
          `, children: _jsxs("div", { className: "openk9-filter-list-container-internal-title ", css: css `
              display: flex;
              gap: 5px;
              align-items: center;
            `, children: [_jsx("span", { children: _jsx(CalendarMobileSvg, {}) }), _jsx("span", { className: "openk9-filters-list-title title", children: _jsx("h2", { css: css `
                  font-style: normal;
                  font-weight: 700;
                  font-size: 18px;
                  height: 18px;
                  line-height: 22px;
                  display: flex;
                  align-items: center;
                  color: #3f3f46;
                  margin: 0;
                `, children: t("filter-for-data") }) })] }) }), _jsxs("button", { className: "openk9-calendar-modal-button-close", css: css `
            color: var(--openk9-grey-stone-600);
            font-size: 16px;
            font-family: Nunito Sans;
            font-weight: 700;
            line-height: 15px;
            display: flex;
            align-items: center;
            gap: 9px;
            margin-right: 21px;
            align-items: baseline;
            background-color: white;
            border: none;
          `, onClick: () => {
                            if (setIsVisibleCalendar)
                                setIsVisibleCalendar(false);
                            onChange({
                                startDate: undefined,
                                endDate: undefined,
                                keywordKey: undefined,
                            });
                            setStartDate(null);
                            setEndDate(null);
                        }, children: [t("close"), " ", _jsx(DeleteLogo, { heightParam: 8, widthParam: 8 })] })] }), _jsxs("div", { className: "openk9-button-for-search", css: css `
          display: flex;
          gap: 5px;
          overflow: scroll;
          margin-top: 10px;
          padding-inline: 25px;
          ::-webkit-scrollbar {
            display: none;
          }
        `, children: [_jsx("button", { css: css `
            background: white;
            padding: 8px 16px;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
            border: none;
            white-space: nowrap;
          `, onClick: () => {
                            setStartDate(moment());
                            setEndDate(moment());
                        }, children: t("today") }), _jsx("button", { css: css `
            background: white;
            padding: 8px 16px;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
            border: none;
            white-space: nowrap;
          `, onClick: () => {
                            setStartDate(moment().startOf("week"));
                            setEndDate(moment().endOf("week"));
                        }, children: t("this-week") }), _jsx("button", { css: css `
            background: white;
            padding: 8px 16px;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
            border: none;
            white-space: nowrap;
          `, onClick: () => {
                            setStartDate(moment().startOf("month"));
                            setEndDate(moment().endOf("month"));
                        }, children: t("this-month") }), _jsx("button", { css: css `
            background: white;
            padding: 8px 16px;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
            border: none;
            white-space: nowrap;
          `, onClick: () => {
                            setStartDate(moment().startOf("year"));
                            setEndDate(moment().endOf("year"));
                        }, children: t("this-year") })] }), _jsx("div", { css: css `
          width: 100%;
          margin-top: 360px;
        `, children: _jsx(DateRangePicker, { startDate: startDate, endDate: endDate, onDatesChange: handleDatesChange, focusedInput: focusedInput || "startDate", onFocusChange: handleFocusChange, keepOpenOnDateSelect: true, startDateId: "startDate", hideKeyboardShortcutsPanel: true, numberOfMonths: 1, isOutsideRange: () => false, endDateId: "endDate", openDirection: "up", noBorder: true, verticalHeight: 32, startDatePlaceholderText: t("start-day") || "Start day", endDatePlaceholderText: t("end-day") || "Start day" }) }), _jsxs("div", { css: css `
          display: flex;
          align-items: center;
          justify-content: center;
          padding-inline: 28px;
          margin-top: -20px;
          gap: 8px;
        `, children: [_jsx("span", { css: css `
            display: inline-flex;
            align-items: center;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            color: ${startDate && moment(startDate).isValid()
                            ? "#c0272b"
                            : "#a1a1aa"};
            background: ${startDate && moment(startDate).isValid()
                            ? "rgba(214, 1, 46, 0.08)"
                            : "#f4f4f5"};
            border: 1px solid
              ${startDate && moment(startDate).isValid()
                            ? "rgba(214, 1, 46, 0.2)"
                            : "#e4e4e7"};
            white-space: nowrap;
          `, children: startDate && moment(startDate).isValid()
                            ? moment(startDate).format(formatterLanguage(language))
                            : t("start-day") || "Start day" }), _jsx("span", { css: css `
            color: #a1a1aa;
            font-size: 13px;
          `, children: "\u2192" }), _jsx("span", { css: css `
            display: inline-flex;
            align-items: center;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            color: ${endDate && moment(endDate).isValid()
                            ? "#c0272b"
                            : "#a1a1aa"};
            background: ${endDate && moment(endDate).isValid()
                            ? "rgba(214, 1, 46, 0.08)"
                            : "#f4f4f5"};
            border: 1px solid
              ${endDate && moment(endDate).isValid()
                            ? "rgba(214, 1, 46, 0.2)"
                            : "#e4e4e7"};
            white-space: nowrap;
          `, children: endDate && moment(endDate).isValid()
                            ? moment(endDate).format(formatterLanguage(language))
                            : t("end-day") || "End day" })] }), _jsx("div", { css: css `
          border: 0.5px solid #d4d4d8;
          margin-top: 20px;
        ` }), _jsxs("div", { className: "openk9-filter-horizontal-container-submit", css: css `
          display: flex;
          justify-content: flex-end;
          @media (max-width: 480px) {
            padding-inline: 20px;
            flex-direction: column;
          }
        `, children: [_jsxs("button", { className: "openk9-filter-horizontal-submit remove-filter remove-filter-data", "aria-label": "rimuovi filtri", css: css `
            font-size: smaller;
            height: 52px;
            padding: 8px 12px;
            white-space: nowrap;
            border: 1px solid #d6012e;
            background-color: #d6012e;
            border-radius: 5px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 3px;
            @media (max-width: 480px) {
              background: white;
              border: 1px solid #d6012e;
              width: 100%;
              height: auto;
              margin-top: 20px;
              color: black;
              border-radius: 50px;
              display: flex;
              justify-content: center;
              color: var(--red-tones-500, #c0272b);
              text-align: center;
              font-size: 16px;
              font-style: normal;
              font-weight: 700;
              line-height: normal;
              align-items: center;
            }
          `, onClick: () => {
                            if (setIsVisibleCalendar)
                                setIsVisibleCalendar(false);
                            onChange({
                                startDate: undefined,
                                endDate: undefined,
                                keywordKey: undefined,
                            });
                            setStartDate(null);
                            setEndDate(null);
                        }, children: [_jsxs("div", { children: [t("don-t-filter-for-date"), " "] }), _jsx("div", { children: _jsx(TrashSvg, { size: "18px" }) })] }), _jsxs("button", { className: "openk9-filter-horizontal-submit filter-for-data", "aria-label": t("filter-for-data") || "filter for data", css: css `
            font-size: smaller;
            height: 52px;
            padding: 8px 12px;
            white-space: nowrap;
            border: 1px solid #d6012e;
            background-color: #d6012e;
            border-radius: 5px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 3px;
            @media (max-width: 480px) {
              background: #d6012e;
              border: 1px solid #d6012e;
              width: 100%;
              height: auto;
              margin-top: 20px;
              color: white;
              border-radius: 50px;
              display: flex;
              justify-content: center;
              text-align: center;
              font-size: 16px;
              font-style: normal;
              font-weight: 700;
              line-height: normal;
            }
          `, onClick: () => {
                            if (setIsVisibleCalendar)
                                setIsVisibleCalendar(false);
                            onChange({
                                startDate: startDate?._d || undefined,
                                endDate: endDate?._d || undefined,
                                keywordKey: undefined,
                            });
                        }, children: [_jsx("div", { children: t("filter-for-data") }), _jsx("div", { children: _jsx(AddFiltersSvg, { size: "21px" }) })] })] }), _jsx("style", { type: "text/css", children: `
        .DateInput {
          position: static !important;
          display: none !important;
        }
    ` })] }));
    if (!isVisibleCalendar)
        return null;
    document.body.style.overflow = "hidden";
    return _jsx(ModalDetail, { padding: "0px", background: "white", content: componet });
}
export function formatterLanguage(language) {
    switch (language) {
        case "it_IT":
            return "DD MMMM YYYY"; // Formato italiano
        case "es_ES":
            return "DD [de] MMMM [de] YYYY"; // Formato spagnolo
        case "fr_FR":
            return "DD MMMM YYYY"; // Formato francese
        case "de_DE":
            return "DD.MMMM.YYYY"; // Formato tedesco
        default:
            return "MMMM DD, YYYY"; // Formato predefinito (inglese)
    }
}
export function mappingNameLanguage(language) {
    switch (language) {
        case "it_IT":
            return "it";
        case "es_ES":
            return "es";
        case "fr_FR":
            return "fr";
        case "de_DE":
            return "de";
        default:
            return "en";
    }
}
export const CalendarMobileMemo = React.memo(CalendarMobile);
