import { r as registerInstance, h, H as Host } from './index-102043e0.js';
import { h as hooks } from './moment-6f6ab70c.js';

const dvnAppViewTakvimAvailabilitySettingsViewCss = "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 .custom-date-selection-container{display:-ms-flexbox;display:flex}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%}";

function formatTwoDigits(value) {
  return value < 10 ? '0' + value : '' + value;
}
const formatHour = (date) => {
  return `${formatTwoDigits(new Date(date).getHours())}:${formatTwoDigits(new Date(date).getMinutes())}`;
};
// const formatAvailabilityStartEnd = (a: Availability): string => {
//   return `${formatHour(new Date(a.startDate))} - ${formatHour(new Date(a.endDate))}`;
// };
const renderRecurringAvailabilityCard = (a) => (h("dvn-card", { class: "recurring-availability-card", leaned: true, elevation: 0, selectable: true }, formatHour(new Date(a.startDate)), h("br", null), formatHour(new Date(a.endDate))));
let DvnAppViewTakvimAvailabilitySettingsView = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.weeklyAvailabilities = [];
    this.customAvailabilities = [];
    this.showCustomAvailabilityForm = false;
    this.onConfirmWeeklyAvailabilityCreation = () => {
      const index = this.weeklyAvailabilityAddIndex;
      const weeklyAvailabilities = JSON.parse(JSON.stringify(this.weeklyAvailabilities));
      weeklyAvailabilities[index] = [...weeklyAvailabilities[index], { start: '9:00 AM', end: '6:00 PM' }];
      this.weeklyAvailabilities = weeklyAvailabilities;
      this.weeklyAvailabilityAddIndex = undefined;
    };
    this.onConfirmCustomAvailabilityCreation = () => {
      // const { customAvailabilitySelectedDate } = this;
      // let customAvailabilities = [...this.customAvailabilities];
      // const cda = customAvailabilities.find(ca => ca.date.toISOString() === customAvailabilitySelectedDate?.toISOString());
      // if (!cda) {
      //   customAvailabilities = [
      //     ...customAvailabilities,
      //     {
      //       date: customAvailabilitySelectedDate,
      //       availabilities: [{ start: '9:00 AM', end: '6:00 PM' }],
      //     }
      //   ];
      // } else {
      //   cda.availabilities = [...cda.availabilities, { start: '9:00 AM', end: '6:00 PM' }];
      // }
      //
      // this.customAvailabilities = customAvailabilities;
      this.showCustomAvailabilityForm = false;
    };
  }
  async componentWillLoad() {
    const availabilities = await this.apiTakvim.getAvailabilities(this.view.table._id).catch(e => {
      this.error = e;
    });
    if (!availabilities)
      return;
    const weeklyAvailabilitiesMap = {};
    const customAvailabilitiesMap = {};
    availabilities.results.forEach(availability => {
      if (availability.isRecurring) {
        const date = new Date(availability.startDate);
        let availabilitiesOfTheDay = weeklyAvailabilitiesMap[date.getDay()] || [];
        availabilitiesOfTheDay = [...availabilitiesOfTheDay, availability];
        weeklyAvailabilitiesMap[date.getDay()] = availabilitiesOfTheDay;
      }
      else {
        const dateString = 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;
  }
  render() {
    const { customAvailabilities, customAvailabilitySelectedDate, weeklyAvailabilities, weeklyAvailabilityAddIndex, } = this;
    const cda = customAvailabilities.find(ca => ca.date.toISOString() === (customAvailabilitySelectedDate === null || customAvailabilitySelectedDate === void 0 ? void 0 : customAvailabilitySelectedDate.toISOString()))
      || {
        date: customAvailabilitySelectedDate,
        availabilities: [],
      };
    return (h(Host, null, h("section", null, h("h2", null, "Weekly Availabilities"), h("div", { class: "week-view" }, h("div", { class: "day-headers" }, h("div", { class: "week-day-name" }, "Sun"), h("div", { class: "week-day-name" }, "Mon"), h("div", { class: "week-day-name" }, "Tue"), h("div", { class: "week-day-name" }, "Wed"), h("div", { class: "week-day-name" }, "Thu"), h("div", { class: "week-day-name" }, "Fri"), h("div", { class: "week-day-name" }, "Sat")), h("div", { class: "day-columns" }, Array.apply(null, Array(7)).map((_, i) => (h("div", { class: "day-column", key: `day-column-${i}` }, weeklyAvailabilities[i].map(renderRecurringAvailabilityCard), h("dvn-button", { fill: true, leaned: true, tint: "primary", onClick: () => this.weeklyAvailabilityAddIndex = i }, h("dvn-icon", { iconName: "uil uil-plus", scale: "large" })))))))), h("section", null, h("h2", null, "Custom Availabilities"), h("div", { class: "custom-date-selection-container" }, h("dvn-date-picker", { embedded: true, leaned: true, multiple: true, shownMonthCount: 2, value: customAvailabilities.map(ca => ca.date), 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", { elevation: 0, leaned: true, overrideStyle: { flex: 1, marginLeft: '1rem' } }, h("dvn-card-header", { title: hooks(cda.date).format('DD MMMM YYYY'), slot: "header", separated: false }), h("div", { class: "selected-day-availabilities" }, cda.availabilities.map(a => (h("dvn-card", { leaned: true, elevation: 0, outlined: true, selectable: true }, `${formatTwoDigits(new Date(a.startDate).getHours())}:${formatTwoDigits(new Date(a.startDate).getMinutes())}`, "-", `${formatTwoDigits(new Date(a.endDate).getHours())}:${formatTwoDigits(new Date(a.endDate).getMinutes())}`))), h("dvn-button", { fill: true, leaned: true, tint: "primary", onClick: () => this.showCustomAvailabilityForm = true }, h("dvn-icon", { iconName: "uil uil-plus", scale: "large" })))))), h("dvn-dialog", { title: "Add weekly availability", shown: weeklyAvailabilityAddIndex !== undefined, onDismiss: () => this.weeklyAvailabilityAddIndex = undefined }, "takvim-create-custom-availability-form", h("div", { slot: "actions" }, h("dvn-button", { view: "flat", onClick: () => this.weeklyAvailabilityAddIndex = undefined }, "Cancel"), h("dvn-button", { tint: "primary", onClick: this.onConfirmWeeklyAvailabilityCreation }, "Create Availability"))), h("dvn-dialog", { title: "Add custom availability", shown: this.showCustomAvailabilityForm, onDismiss: () => this.showCustomAvailabilityForm = false }, h("takvim-create-custom-availability-form", null), h("div", { slot: "actions" }, h("dvn-button", { view: "flat", onClick: () => this.showCustomAvailabilityForm = false }, "Cancel"), h("dvn-button", { tint: "primary", onClick: this.onConfirmCustomAvailabilityCreation }, "Create Availability")))));
  }
};
DvnAppViewTakvimAvailabilitySettingsView.style = dvnAppViewTakvimAvailabilitySettingsViewCss;

export { DvnAppViewTakvimAvailabilitySettingsView as dvn_app_view_takvim_availability_settings_view };
