import { r as registerInstance, h, H as Host, g as getElement } from './index-ecdfb761.js';
import { R as ResponsiveSize, a as ResponsiveUIHelper } from './ui-0156b0ee.js';
import { z as zoneConfig } from './time-zones-cf1e6113.js';
import { C as CalendarUtils } from './calendar-470c802a.js';
import { t as takvimCreateCustomAvailabilityFormI18nI18nDefault } from './i18n-b5ed6bd9.js';
import { m as momentTimezone } from './index-a3ca021c.js';
import './i18n-27a6b633.js';
import './_commonjsHelpers-27f122dd.js';
import './moment-65eca6b3.js';

const cvnAppViewTakvimAvailabilitySettingsViewI18nDefault = Object.assign(Object.assign({}, takvimCreateCustomAvailabilityFormI18nI18nDefault), { oneTimeAvailabilities: 'ONE TIME AVAILABILITIES', recurringAvailabilities: 'RECURRING AVAILABILITIES' });

const dvnAppViewTakvimAvailabilitySettingsViewCss = "dvn-app-view-takvim-availability-settings-view{display:-ms-flexbox;display:flex;overflow:auto;}dvn-app-view-takvim-availability-settings-view .week-view .day-headers{display:-ms-flexbox;display:flex}dvn-app-view-takvim-availability-settings-view .week-view .day-headers .week-day-name{-ms-flex:1;flex:1;text-align:center}dvn-app-view-takvim-availability-settings-view .week-view .day-columns{display:-ms-flexbox;display:flex}dvn-app-view-takvim-availability-settings-view .week-view .day-columns .day-column{-ms-flex:1;flex:1;padding:0.5rem}dvn-app-view-takvim-availability-settings-view .week-view .day-columns .day-column dvn-card{margin-bottom:0.5rem;text-align:center;font-size:0.9em}dvn-app-view-takvim-availability-settings-view .week-view .day-columns .day-column dvn-button{width:100%}dvn-app-view-takvim-availability-settings-view .week-view-mobile .day-row{display:-ms-flexbox;display:flex;border-bottom:1px solid var(--color-border);padding:0.5rem 0}dvn-app-view-takvim-availability-settings-view .week-view-mobile .day-row .week-day-name{-ms-flex:0 0 100px;flex:0 0 100px}dvn-app-view-takvim-availability-settings-view .week-view-mobile .day-row .day-availabilities{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}dvn-app-view-takvim-availability-settings-view .week-view-mobile .day-row .day-availabilities dvn-card{margin-bottom:0.5rem !important;text-align:center;font-size:0.9em}dvn-app-view-takvim-availability-settings-view .custom-date-selection-container{display:-ms-flexbox;display:flex}@-webkit-keyframes fadeInOpacity{0%{opacity:0;margin-left:10px}100%{opacity:1;margin-left:0}}@keyframes fadeInOpacity{0%{opacity:0;margin-left:10px}100%{opacity:1;margin-left:0}}dvn-app-view-takvim-availability-settings-view .custom-date-selection-container .day-title{-webkit-animation-name:fadeInOpacity;animation-name:fadeInOpacity;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:0.3s;animation-duration:0.3s}dvn-app-view-takvim-availability-settings-view .custom-date-selection-container dvn-card{text-align:center}dvn-app-view-takvim-availability-settings-view .custom-date-selection-container .selected-day-availabilities dvn-card{margin-bottom:0.5rem;text-align:center;font-size:0.9em}dvn-app-view-takvim-availability-settings-view .custom-date-selection-container .selected-day-availabilities dvn-button{width:100%}";

const renderRecurringAvailabilityCard = (a, onClick, vertical = true) => (h("dvn-card", { class: "recurring-availability-card", leaned: true, elevation: 0, selectable: true, onClick: onClick }, CalendarUtils.format(new Date(a.startDate), 'HH:mm'), vertical ? h("br", null) : ' - ', CalendarUtils.format(new Date(a.endDate), 'HH:mm')));
const DvnAppViewTakvimAvailabilitySettingsView = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.weeklyAvailabilities = [];
    this.customAvailabilities = [];
    this.showCustomAvailabilityForm = false;
    this.onCreateAvailability = () => {
      this.showCustomAvailabilityForm = false;
      this.weeklyAvailabilityAddIndex = undefined;
      this.fetchAvailabilities();
    };
    this.onUpdateAvailability = () => {
      this.availabilityToEdit = undefined;
      this.fetchAvailabilities();
    };
    this.onSizeChange = (size) => {
      this.size = size;
      // this.selectedTime = undefined;
      if (this.isMobileUI()) {
        // reset the date otherwise the selected day dialog will pop up
        this.customAvailabilitySelectedDate = undefined;
      }
      else {
        // set the date otherwise the selected day part will be empty
        this.customAvailabilitySelectedDate = new Date();
      }
    };
    this.isMobileUI = () => this.size < ResponsiveSize.Small;
    this.getCalendarShownMonthCount = () => {
      if (this.size < ResponsiveSize.Medium) {
        return 1;
      }
      if (this.size < ResponsiveSize.Large) {
        return 2;
      }
      return 3;
    };
  }
  componentWillLoad() {
    this.uiHelper = new ResponsiveUIHelper(this.el, this.onSizeChange);
    this.size = ResponsiveUIHelper.getSize(this.el.parentElement.clientWidth);
    if (!this.isMobileUI()) {
      this.customAvailabilitySelectedDate = new Date();
    }
    this.apiSozluk.getContent(this.view.i18nEntryId, cvnAppViewTakvimAvailabilitySettingsViewI18nDefault).then(strings => this.strings = strings);
    this.fetchAvailabilities();
  }
  async fetchAvailabilities() {
    const availabilities = await this.apiTakvim.getAvailabilitiesOfUser(this.user._id).catch(e => {
      this.error = e;
    });
    if (!availabilities)
      return;
    const weeklyAvailabilitiesMap = {};
    const customAvailabilitiesMap = {};
    availabilities.results.forEach(availability => {
      if (availability.recurrence === 'weekly') {
        const date = new Date(availability.startDate);
        let availabilitiesOfTheDay = weeklyAvailabilitiesMap[date.getDay()] || [];
        availabilitiesOfTheDay = [...availabilitiesOfTheDay, availability];
        weeklyAvailabilitiesMap[date.getDay()] = availabilitiesOfTheDay;
      }
      else {
        const dateString = formatDateByDayOnly(new Date(availability.startDate));
        let availabilitiesOfTheDay = customAvailabilitiesMap[dateString] || [];
        availabilitiesOfTheDay = [...availabilitiesOfTheDay, availability];
        customAvailabilitiesMap[dateString] = availabilitiesOfTheDay;
      }
    });
    let customAvailabilities = [];
    const customAvailabilityDateStrings = Object.keys(customAvailabilitiesMap);
    for (let i = 0; i < customAvailabilityDateStrings.length; i++) {
      const dateString = customAvailabilityDateStrings[i];
      const date = new Date(dateString);
      const availabilitiesOfTheDay = customAvailabilitiesMap[dateString];
      customAvailabilities = [
        ...customAvailabilities,
        {
          date,
          availabilities: availabilitiesOfTheDay,
        }
      ];
    }
    let weeklyAvailabilities = [[], [], [], [], [], [], []];
    const weeklyAvailabilityDateStrings = Object.keys(weeklyAvailabilitiesMap);
    for (let i = 0; i < weeklyAvailabilityDateStrings.length; i++) {
      weeklyAvailabilities[weeklyAvailabilityDateStrings[i]] = weeklyAvailabilitiesMap[weeklyAvailabilityDateStrings[i]];
    }
    this.weeklyAvailabilities = weeklyAvailabilities;
    this.customAvailabilities = customAvailabilities;
    this.availabilities = availabilities.results;
  }
  render() {
    const { availabilities, customAvailabilities, customAvailabilitySelectedDate, weeklyAvailabilities, weeklyAvailabilityAddIndex, user, userSettings, strings, } = this;
    if (!availabilities || !strings) {
      return (h("div", { class: "d-flex flex-grow-1 justify-content-center pt-3" }, h("dvn-progress", { indefinite: true })));
    }
    let customDateAvailabilities = {
      date: customAvailabilitySelectedDate,
      availabilities: [],
    };
    if (customAvailabilitySelectedDate) {
      customDateAvailabilities = customAvailabilities.find(ca => ca.date.toISOString() === formatDateByDayOnly(customAvailabilitySelectedDate)) || customDateAvailabilities;
    }
    const cardHeader = CalendarUtils.format(customDateAvailabilities.date, 'DD MMMM');
    let zoneName = '';
    zoneConfig.forEach(group => {
      group.zones.forEach(zone => {
        if (userSettings.timeZone === zone.value) {
          zoneName = `${zone.name} (${CalendarUtils.getZoneAbbr(zone.value)})`;
          // zoneName = zone.name;
        }
      });
    });
    // shift week the day columns based on the week start day
    let startDayIndex = 0;
    if (userSettings.weekStartDay === 'monday') {
      startDayIndex = 1;
    }
    else if (userSettings.weekStartDay === 'saturday') {
      startDayIndex = 6;
    }
    if (this.isMobileUI()) {
      const customAvailabilityDialogTitle = `${momentTimezone(customAvailabilitySelectedDate).tz(userSettings.timeZone).format('DD MMMM')}`;
      const dayNames = [
        strings.sunday, strings.monday, strings.tuesday, strings.wednesday,
        strings.thursday, strings.friday, strings.saturday
      ];
      return (h(Host, { class: "d-block flex-grow-1 pl-2 pr-2" }, h("section", { class: "pb-3" }, h("div", { class: "ml-2 mb-2" }, h("small", null, h("b", null, strings.oneTimeAvailabilities.toLocaleUpperCase()))), h("div", { class: "custom-date-selection-container" }, h("dvn-card", { class: "date-picker-container", bodyLeaned: true, leaned: true, elevation: 0, width: "100%" }, h("div", { class: "d-flex justify-content-center" }, h("dvn-date-picker", { embedded: true, leaned: true, multiple: true, shownMonthCount: 1, value: customAvailabilities.map(ca => ca.date), strings: strings, onChange: (v) => {
          var _a;
          const value = v.detail;
          if (customAvailabilities.length < value.length) {
            // find the date that is not already in custom availabilities
            this.customAvailabilitySelectedDate = value.find(d => !customAvailabilities.find(ca => ca.date.toISOString() === d.toISOString()));
          }
          else {
            // find the date that's in custom availabilities but not in the new dates
            this.customAvailabilitySelectedDate = (_a = customAvailabilities.find(ca => !value.find(d => ca.date.toISOString() === d.toISOString()))) === null || _a === void 0 ? void 0 : _a.date;
          }
        } }))), customAvailabilitySelectedDate &&
        h("dvn-dialog", { class: "confirmation-dialog", shown: !!customAvailabilitySelectedDate, onDismiss: (e) => {
            e.preventDefault();
            e.stopImmediatePropagation();
            this.customAvailabilitySelectedDate = undefined;
          }, raw: true, title: customAvailabilityDialogTitle }, h("dvn-card", { key: "available-time-picker-for-mobile", elevation: 0, leaned: true }, h("div", { slot: "header", class: "available-time-picker-date-header pl-3 pr-3 pt-3 d-flex justify-content-between align-content-center" }, h("h4", { key: cardHeader, class: "mt-0 mb-0 day-title" }, cardHeader), h("span", { class: "text-neutral" }, h("i", { class: 'uil uil-clock' }), " ", zoneName)), h("div", { class: "selected-day-availabilities" }, customDateAvailabilities.availabilities.map(a => (h("dvn-card", { leaned: true, elevation: 0, outlined: true, selectable: true, onClick: () => this.availabilityToEdit = a }, CalendarUtils.format(a.startDate, 'HH:mm'), "-", CalendarUtils.format(a.endDate, 'HH:mm')))), h("dvn-button", { fill: true, leaned: true, tint: "primary", onClick: () => this.showCustomAvailabilityForm = true, view: "ghost" }, h("dvn-icon", { iconName: "uil uil-plus", scale: "large" })))))), this.showCustomAvailabilityForm &&
        h("takvim-create-custom-availability-form", { strings: strings, user: user, userSettings: userSettings, apiTakvim: this.apiTakvim, onCreateAvailability: this.onCreateAvailability, isRecurring: false, date: customAvailabilitySelectedDate, onDismiss: () => this.showCustomAvailabilityForm = false })), h("section", null, h("div", { class: "ml-2 mb-2" }, h("small", null, h("b", null, strings.recurringAvailabilities.toLocaleUpperCase()))), h("div", { class: "week-view-mobile" }, Array.apply(null, Array(7)).map((_, i) => (h("div", { class: "day-row" }, h("div", { class: "week-day-name" }, dayNames[(i + startDayIndex) % 7]), h("div", { class: "day-availabilities", key: `day-row-${(i + startDayIndex) % 7}` }, weeklyAvailabilities[(i + startDayIndex) % 7].map((a) => {
        return renderRecurringAvailabilityCard(a, () => this.availabilityToEdit = a, false);
      }), h("dvn-button", { leaned: true, scale: "small", tint: "primary", onClick: () => this.weeklyAvailabilityAddIndex = (i + startDayIndex) % 7 }, h("dvn-icon", { iconName: "uil uil-plus", scale: "large" }))))))), weeklyAvailabilityAddIndex !== undefined &&
        h("takvim-create-custom-availability-form", { strings: strings, user: user, userSettings: userSettings, apiTakvim: this.apiTakvim, onCreateAvailability: this.onCreateAvailability, isRecurring: true, date: new Date(), recurrenceDayIndex: this.weeklyAvailabilityAddIndex, onDismiss: () => this.weeklyAvailabilityAddIndex = undefined })), this.availabilityToEdit &&
        h("takvim-create-custom-availability-form", { strings: strings, user: user, userSettings: userSettings, apiTakvim: this.apiTakvim, availability: this.availabilityToEdit, onDismiss: () => this.availabilityToEdit = undefined, onUpdateAvailability: this.onUpdateAvailability })));
    }
    const dayNames = [
      strings.sunday3, strings.monday3, strings.tuesday3, strings.wednesday3,
      strings.thursday3, strings.friday3, strings.saturday3
    ];
    return (h(Host, { class: "d-block flex-grow-1" }, h("section", { class: "pb-3" }, h("div", { class: "ml-2 mb-2" }, h("small", null, h("b", null, strings.oneTimeAvailabilities.toLocaleUpperCase()))), h("div", { class: "custom-date-selection-container" }, h("dvn-date-picker", { embedded: true, leaned: true, multiple: true, shownMonthCount: this.getCalendarShownMonthCount(), value: customAvailabilities.map(ca => ca.date), strings: strings, onChange: (v) => {
        var _a;
        const value = v.detail;
        if (customAvailabilities.length < value.length) {
          // find the date that is not already in custom availabilities
          this.customAvailabilitySelectedDate = value.find(d => !customAvailabilities.find(ca => ca.date.toISOString() === d.toISOString()));
        }
        else {
          // find the date that's in custom availabilities but not in the new dates
          this.customAvailabilitySelectedDate = (_a = customAvailabilities.find(ca => !value.find(d => ca.date.toISOString() === d.toISOString()))) === null || _a === void 0 ? void 0 : _a.date;
        }
      } }), customAvailabilitySelectedDate &&
      h("dvn-card", { key: "available-time-picker-for-desktop", elevation: 0, leaned: true, overrideStyle: { flex: 1, marginLeft: '1rem' } }, h("div", { slot: "header", class: "available-time-picker-date-header pl-3 pr-3 pt-3 d-flex justify-content-between align-content-center" }, h("h4", { key: cardHeader, class: "mt-0 mb-0 day-title" }, cardHeader), h("span", { class: "text-neutral" }, h("i", { class: 'uil uil-clock' }), " ", zoneName)), h("div", { class: "selected-day-availabilities" }, customDateAvailabilities.availabilities.map(a => (h("dvn-card", { leaned: true, elevation: 0, outlined: true, selectable: true, onClick: () => this.availabilityToEdit = a }, CalendarUtils.format(a.startDate, 'HH:mm'), "-", CalendarUtils.format(a.endDate, 'HH:mm')))), h("dvn-button", { fill: true, leaned: true, tint: "primary", onClick: () => this.showCustomAvailabilityForm = true, view: "ghost" }, h("dvn-icon", { iconName: "uil uil-plus", scale: "large" })))))), h("section", null, h("div", { class: "ml-2 mb-2" }, h("small", null, h("b", null, strings.recurringAvailabilities.toLocaleUpperCase()))), h("div", { class: "week-view" }, h("div", { class: "day-headers" }, Array.apply(null, Array(7)).map((_, i) => (h("div", { class: "week-day-name" }, dayNames[(i + startDayIndex) % 7])))), h("div", { class: "day-columns" }, Array.apply(null, Array(7)).map((_, i) => (h("div", { class: "day-column", key: `day-column-${(i + startDayIndex) % 7}` }, weeklyAvailabilities[(i + startDayIndex) % 7].map((a) => {
      return renderRecurringAvailabilityCard(a, () => this.availabilityToEdit = a);
    }), h("dvn-button", { fill: true, leaned: true, tint: "primary", onClick: () => this.weeklyAvailabilityAddIndex = (i + startDayIndex) % 7 }, h("dvn-icon", { iconName: "uil uil-plus", scale: "large" })))))))), weeklyAvailabilityAddIndex !== undefined &&
      h("takvim-create-custom-availability-form", { strings: strings, user: user, userSettings: userSettings, apiTakvim: this.apiTakvim, onCreateAvailability: this.onCreateAvailability, isRecurring: true, date: new Date(), recurrenceDayIndex: this.weeklyAvailabilityAddIndex, onDismiss: () => this.weeklyAvailabilityAddIndex = undefined }), this.showCustomAvailabilityForm &&
      h("takvim-create-custom-availability-form", { strings: strings, user: user, userSettings: userSettings, apiTakvim: this.apiTakvim, onCreateAvailability: this.onCreateAvailability, isRecurring: false, date: customAvailabilitySelectedDate, onDismiss: () => this.showCustomAvailabilityForm = false }), this.availabilityToEdit &&
      h("takvim-create-custom-availability-form", { strings: strings, user: user, userSettings: userSettings, apiTakvim: this.apiTakvim, availability: this.availabilityToEdit, onDismiss: () => this.availabilityToEdit = undefined, onUpdateAvailability: this.onUpdateAvailability })));
  }
  get el() { return getElement(this); }
};
function formatDateByDayOnly(date) {
  const d = new Date(date);
  d.setHours(0, 0, 0, 0);
  return d.toISOString();
}
DvnAppViewTakvimAvailabilitySettingsView.style = dvnAppViewTakvimAvailabilitySettingsViewCss;

export { DvnAppViewTakvimAvailabilitySettingsView as dvn_app_view_takvim_availability_settings_view };
