import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ecdfb761.js';
import { a as ResponsiveUIHelper } from './ui-0156b0ee.js';
import { t as takvimDailyCalendarI18nDefault } from './i18n-a73eeab0.js';
import { C as CalendarUtils } from './calendar-470c802a.js';
import './i18n-745d0676.js';
import './i18n-27a6b633.js';
import './i18n-02d8c6e2.js';
import './index-a3ca021c.js';
import './_commonjsHelpers-27f122dd.js';
import './moment-65eca6b3.js';

const takvimDailyCalendarCss = "takvim-daily-calendar{--top-spacing:40px;--horizontal-spacing:24px;--right-column-background:var(--color-background-secondary);-ms-flex:1;flex:1;overflow:hidden;display:-ms-flexbox;display:flex;padding:calc(4 * var(--spacing-unit));background:var(--color-background-primary)}takvim-daily-calendar .left-column{-ms-flex:0 0 240px;flex:0 0 240px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}takvim-daily-calendar .left-column dvn-date-picker dvn-input{--width:160px;--min-width:160px}takvim-daily-calendar .left-column .user-card-list-container{overflow:hidden;padding-bottom:32px;-ms-overflow-style:none;scrollbar-width:none;}takvim-daily-calendar .left-column .user-card-list-container::-webkit-scrollbar{display:none}takvim-daily-calendar .left-column .user-card-list-container .user-card{height:48px;width:224px;margin-top:calc(4 * var(--spacing-unit));margin-bottom:calc(4 * var(--spacing-unit));background:var(--color-elevated-item-background);border-radius:var(--corner-radius);overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}takvim-daily-calendar .left-column .user-card-list-container .user-card dvn-info-summary{overflow:hidden}takvim-daily-calendar .right-column{-ms-flex:1;flex:1;border-radius:var(--corner-radius);background:var(--right-column-background);overflow:auto;display:-ms-flexbox;display:flex}takvim-daily-calendar .right-column .meetings-container{-ms-flex:1;flex:1;padding:var(--top-spacing) var(--horizontal-spacing)}takvim-daily-calendar .right-column .meetings-container .time-indicators-container{position:absolute;top:calc(-1 * var(--top-spacing));left:calc(-1 * var(--horizontal-spacing));right:calc(-1 * var(--horizontal-spacing));bottom:calc(-1 * var(--top-spacing))}takvim-daily-calendar .right-column .meetings-container .time-indicators-container .time-indicator-line{position:absolute;width:1px;background:var(--color-background-primary);bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start}takvim-daily-calendar .right-column .meetings-container .time-indicators-container .time-indicator-line.current-time{background:var(--color-danger)}takvim-daily-calendar .right-column .meetings-container .time-indicators-container .time-indicator-line .time{padding:8px;display:inline-block;font-size:var(--font-size-small);color:var(--color-text-secondary);background:var(--color-background-secondary)}takvim-daily-calendar .right-column .meetings-container .meetings-row-container{position:relative}takvim-daily-calendar .right-column .meetings-container .meetings-row-container .meetings-row{height:64px;position:relative;padding-top:calc(2 * var(--spacing-unit));-webkit-transition:background-color 0.2s linear;transition:background-color 0.2s linear}takvim-daily-calendar .right-column .meetings-container .meetings-row-container .meetings-row:hover{background-color:var(--color-background-primary)}takvim-daily-calendar .right-column .meetings-container .meetings-row-container .meetings-row .meeting-card{height:48px;position:absolute;background:var(--color-elevated-item-background);border-radius:var(--corner-radius);overflow:hidden;cursor:pointer;-webkit-box-shadow:0 0 0 1px var(--color-neutral) inset;box-shadow:0 0 0 1px var(--color-neutral) inset;-webkit-transition:-webkit-box-shadow 0.3s;transition:-webkit-box-shadow 0.3s;transition:box-shadow 0.3s;transition:box-shadow 0.3s, -webkit-box-shadow 0.3s;white-space:nowrap}takvim-daily-calendar .right-column .meetings-container .meetings-row-container .meetings-row .meeting-card:hover{width:auto !important;z-index:2;-webkit-box-shadow:0 0 0 2px var(--color-primary) inset;box-shadow:0 0 0 2px var(--color-primary) inset}";

const horizontalPadding = 24;
const indicatorMinutes = 15;
const TakvimDailyCalendar = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.action = createEvent(this, "action", 7);
    this.viewMeeting = createEvent(this, "viewMeeting", 7);
    this.calendarData = [];
    this.meetings = [];
    this.everyPixelsForMinute = 5;
    this.selectedDay = new Date();
    this.currentTimeIndicatorLeftPosition = 0;
    this.isProgressing = true;
    this.strings = takvimDailyCalendarI18nDefault;
    this.onSizeChange = (size) => {
      this.size = size;
    };
    this.onDateChange = (date) => {
      this.setSelectedDay(date);
      this.fetchMeetings();
    };
    this.iterateDay = (amount) => {
      const day = new Date(this.selectedDay);
      day.setDate(this.selectedDay.getDate() + amount);
      this.setSelectedDay(day);
      this.fetchMeetings();
    };
    this.setSelectedDay = (date) => {
      const day = new Date(date);
      day.setHours(0, 0, 0, 0);
      this.selectedDay = day;
    };
    this.getCurrentTimeIndicatorLeftPosition = () => {
      const { earliestStartTime, latestEndTime, everyPixelsForMinute } = this;
      let currentTimeIndicatorLeft = 0;
      const currentSeconds = new Date().getTime() / 1000;
      if (earliestStartTime && latestEndTime && earliestStartTime < currentSeconds && currentSeconds < latestEndTime) {
        const currentSecondsDistanceInSeconds = currentSeconds - earliestStartTime;
        if (currentSecondsDistanceInSeconds > 0) {
          const currentSecondsDistanceInMinutes = currentSecondsDistanceInSeconds / 60;
          currentTimeIndicatorLeft = (currentSecondsDistanceInMinutes * everyPixelsForMinute) + horizontalPadding;
        }
      }
      return currentTimeIndicatorLeft;
    };
    this.generateTimeIntervalIndicatorPositions = () => {
      const { earliestStartTime, latestEndTime } = this;
      if (!earliestStartTime) {
        return [];
      }
      const lines = [];
      for (let i = 0; i < 24 * 60; i += indicatorMinutes) {
        if ((i - indicatorMinutes) > ((latestEndTime - earliestStartTime) / 60)) {
          break;
        }
        lines.push(i);
      }
      return lines;
    };
  }
  componentWillLoad() {
    this.uiHelper = new ResponsiveUIHelper(this.el, this.onSizeChange);
    this.size = ResponsiveUIHelper.getSize(this.el.parentElement.clientWidth);
    this.setSelectedDay(new Date());
    // update the current time indicator position ever minute
    this.currentTimePositionUpdater = setInterval(() => this.currentTimeIndicatorLeftPosition = this.getCurrentTimeIndicatorLeftPosition(), 60 * 1000);
  }
  componentDidLoad() {
    this.fetchMeetings();
  }
  disconnectedCallback() {
    clearInterval(this.currentTimePositionUpdater);
  }
  async invalidate(_event) {
    this.meetings = undefined;
    this.error = undefined;
    this.fetchMeetings();
  }
  ;
  async fetchMeetings() {
    const { calendarConfigId } = this;
    this.isProgressing = true;
    const secondsInOneDay = 24 * 60 * 60;
    const startTime = Math.floor(this.selectedDay.getTime() / 1000);
    const endTime = startTime + secondsInOneDay;
    const calendarDataResponse = await this.apiTakvim.getMeetingsForCalendar(calendarConfigId, startTime, endTime)
      .catch(e => {
      this.error = e;
    }).finally(() => this.isProgressing = false);
    if (!calendarDataResponse)
      return;
    this.meetings = calendarDataResponse.results;
    const calendarDataMap = {};
    this.meetings.forEach(meeting => {
      const guestToGroupBy = findTheGuestByMembershipConfigId(this.membershipConfigIdToGroupMeetings, meeting);
      if (calendarDataMap[guestToGroupBy._id]) {
        calendarDataMap[guestToGroupBy._id] = Object.assign(Object.assign({}, calendarDataMap[guestToGroupBy._id]), { meetings: [...calendarDataMap[guestToGroupBy._id].meetings, meeting] });
      }
      else {
        calendarDataMap[guestToGroupBy._id] = {
          user: guestToGroupBy,
          meetings: [meeting]
        };
      }
    });
    this.calendarData = Object.values(calendarDataMap)
      .sort((a, b) => a.user.name.localeCompare(b.user.name));
    if (this.meetings.length > 0) {
      this.earliestStartTime = Math.floor(new Date(this.meetings[0].startDate).getTime() / 1000);
      this.latestEndTime = Math.floor(new Date(this.meetings[this.meetings.length - 1].endDate).getTime() / 1000);
    }
    else {
      this.earliestStartTime = 0;
      this.latestEndTime = 0;
    }
  }
  render() {
    const { calendarConfigId, calendarData, meetings, earliestStartTime, isProgressing, everyPixelsForMinute, membershipConfigId, selectedUser, strings, user, userSettings, membershipConfigIdToViewOnMeetings } = this;
    const currentTimeIndicatorLeftPosition = this.getCurrentTimeIndicatorLeftPosition();
    const timeIntervalIndicatorPositions = this.generateTimeIntervalIndicatorPositions();
    const rowWidth = timeIntervalIndicatorPositions.length * indicatorMinutes * everyPixelsForMinute;
    return (h(Host, { style: { '--horizontal-spacing': `${horizontalPadding}px` } }, h("div", { class: "left-column" }, h("dvn-input-group", { leaned: true }, h("dvn-icon-button", { leaned: true, disabled: isProgressing, progressing: isProgressing, "icon-name": "uil uil-angle-left-b", onClick: () => this.iterateDay(-1) }), h("dvn-date-picker", { leaned: true, disabled: isProgressing, value: this.selectedDay, dateFormat: "DD MMMM, dddd", onChange: (e) => this.onDateChange(e.detail) }), h("dvn-icon-button", { leaned: true, disabled: isProgressing, "icon-name": "uil uil-angle-right-b", onClick: () => this.iterateDay(1) })), !this.isProgressing && !this.error && meetings.length === 0 &&
      h("p", { class: "text-centered p-3" }, strings.noItemInList), h("div", { class: "user-card-list-container", ref: el => this.userListRef = el }, calendarData.map(userData => (h("div", { class: "user-card" }, h("dvn-info-summary", { extraClass: "flex-grow-1", title: userData.user.name }, h("dvn-image", { slot: "media", bordered: true, leaned: true, shape: "circle", src: userData.user.imageUrl, text: userData.user.initials })), h("dvn-icon-button", { view: "flat", tint: "primary", iconName: "uil uil-calendar-alt", onClick: () => this.selectedUser = userData.user })))))), h("div", { class: "right-column", ref: el => this.meetingListRef = el, onScroll: () => this.userListRef.scrollTop = this.meetingListRef.scrollTop }, h("div", { class: "meetings-container" }, h("div", { class: "meetings-row-container" }, h("div", { class: "time-indicators-container" }, currentTimeIndicatorLeftPosition !== 0 &&
      h("div", { class: "time-indicator-line current-time", style: { left: `${currentTimeIndicatorLeftPosition}px` } }), timeIntervalIndicatorPositions.map(indicatorPosition => {
      // indicator position is in minutes. convert it to px
      const left = (indicatorPosition * everyPixelsForMinute) + horizontalPadding;
      if (indicatorPosition % 30 !== 0) {
        // show the time every half hour
        return (h("div", { class: "time-indicator-line", style: { left: `${left}px` } }));
      }
      const time = earliestStartTime + (indicatorPosition * 60);
      const timeString = CalendarUtils.format(new Date((time * 1000) - 1), 'HH:mm');
      return (h("div", { class: "time-indicator-line", style: { left: `${left}px` } }, h("div", { class: "time" }, timeString)));
    })), calendarData.map(userData => {
      return (h("div", { class: "meetings-row", style: { width: `${rowWidth}px`, margin: `0 ${-horizontalPadding}px` } }, userData.meetings.map(meeting => {
        const { endDate, startDate } = meeting;
        const startDateInSeconds = new Date(startDate).getTime() / 1000;
        const endDateInSeconds = new Date(endDate).getTime() / 1000;
        const durationInMinutes = (endDateInSeconds - startDateInSeconds) / 60;
        const distanceToStartTimeInMinutes = (startDateInSeconds - earliestStartTime) / 60;
        const width = durationInMinutes * everyPixelsForMinute;
        const left = distanceToStartTimeInMinutes * everyPixelsForMinute + horizontalPadding;
        const start = new Date(startDate);
        const end = new Date(endDate);
        const startEnd = `${CalendarUtils.format(start, 'HH:mm')} - ${CalendarUtils.format(end, 'HH:mm')}`;
        const guest = findTheGuestByMembershipConfigId(membershipConfigIdToViewOnMeetings, meeting);
        return (h("div", { class: "meeting-card", style: { left: `${left}px`, width: `${width}px`, minWidth: `${width}px` }, onClick: () => this.viewMeeting.emit(meeting) }, h("dvn-info-summary", { title: guest.name, subTitle: startEnd }, h("dvn-image", { slot: "media", bordered: true, leaned: true, src: guest.imageUrl, text: guest.initials }))));
      })));
    })))), selectedUser &&
      h("dvn-dialog", { title: selectedUser.name, shown: true, onDismiss: () => {
          console.log('DISMISS USER');
          this.selectedUser = undefined;
        } }, h("takvim-available-time-picker", { apiData: this.apiData, apiTakvim: this.apiTakvim, userId: user._id, membershipConfigId: membershipConfigId, userSettings: userSettings, guests: [selectedUser], guestMetadata: [{
            membershipConfigId: this.membershipConfigIdToGroupMeetings,
          }], viewedUserId: selectedUser._id, viewedUserMembershipConfigId: membershipConfigIdToViewOnMeetings, calendarConfigId: calendarConfigId, onCreateMeeting: (_e) => {
          this.selectedUser = undefined;
          this.fetchMeetings();
        }, strings: strings.availableTimePicker, weekStartDay: userSettings.weekStartDay }))));
  }
  get el() { return getElement(this); }
};
const findTheGuestByMembershipConfigId = (membershipConfigId, meeting) => {
  const guestIndex = meeting.guestMetadata.findIndex(guestMetadata => (guestMetadata.membershipConfigId === membershipConfigId));
  return meeting.guests[guestIndex];
};
TakvimDailyCalendar.style = takvimDailyCalendarCss;

export { TakvimDailyCalendar as takvim_daily_calendar };
