import { getTheClickedDate } from '@dvn/alaca/components/dvn-date-picker/date-picker-utils';
import { Component, h, Host, State } from '@stencil/core';
import moment from 'moment';
const generateSlotsForAvailability = (_availability) => {
  return [
    { start: '9:00 AM', end: '10:00 AM' },
    { start: '12:00 AM', end: '13:00 PM' },
    { start: '13:00 PM', end: '14:00 PM' },
    { start: '14:00 PM', end: '15:00 PM' },
  ];
};
export class TakvimAvailableTimePicker {
  constructor() {
    this.availabilitiesForTheSelectedDate = [];
    this.availabilities = [
      { duration: 30, date: new Date(), availabilities: [{ start: '9:00 AM', end: '6:00 PM' }] },
      { duration: 30, date: new Date(2020, 10, 27), availabilities: [{ start: '9:00 AM', end: '6:00 PM' }] },
      { duration: 30, date: new Date(2020, 11, 23), availabilities: [{ start: '10:00 AM', end: '6:00 PM' }] },
      { duration: 60, date: new Date(2020, 11, 23), availabilities: [{ start: '11:00 AM', end: '6:00 PM' }] },
      { duration: 30, date: new Date(2020, 11, 11), availabilities: [{ start: '12:00 AM', end: '6:00 PM' }] },
    ];
    this.onSelectDate = (event) => {
      const value = event.detail;
      const { availabilities } = this;
      const existingDates = availabilities.map(ca => ca.date);
      this.selectedDate = getTheClickedDate(existingDates, value);
      this.availabilitiesForTheSelectedDate = availabilities
        .filter(ca => { var _a; return ca.date.toISOString() === ((_a = this.selectedDate) === null || _a === void 0 ? void 0 : _a.toISOString()); });
      if (this.availabilitiesForTheSelectedDate.length === 0) {
        this.selectedDate = undefined;
        this.selectedAvailability = undefined;
      }
      else if (this.availabilitiesForTheSelectedDate.length === 1) {
        // select the first available date
        this.selectedAvailability = this.availabilitiesForTheSelectedDate[0];
      }
      else {
        this.selectedAvailability = undefined;
      }
    };
  }
  render() {
    const { availabilities, availabilitiesForTheSelectedDate, selectedAvailability, selectedDate } = this;
    return (h(Host, { class: "d-flex" },
      h("dvn-date-picker", { embedded: true, leaned: true, multiple: true, value: availabilities.map(ca => ca.date), onChange: this.onSelectDate }),
      selectedDate &&
        h("dvn-card", { class: "selected-day-container", elevation: 0, leaned: true },
          h("dvn-card-header", { title: moment(selectedDate).format('DD MMMM YYYY'), slot: "header", separated: false }),
          h("div", { class: "selected-day-availabilities" },
            !selectedAvailability && availabilitiesForTheSelectedDate.map(a => (h("dvn-card", { elevation: 0, outlined: true, selectable: true, onClick: () => this.selectedAvailability = a },
              "Book a ",
              a.duration,
              " min call"))),
            selectedAvailability && generateSlotsForAvailability(selectedAvailability).map(slot => (h("dvn-card", { elevation: 0, outlined: true, selectable: true },
              slot.start,
              " - ",
              slot.end)))))));
  }
  static get is() { return "takvim-available-time-picker"; }
  static get originalStyleUrls() { return {
    "$": ["takvim-available-time-picker.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["takvim-available-time-picker.css"]
  }; }
  static get states() { return {
    "availabilitiesForTheSelectedDate": {},
    "availabilities": {},
    "selectedDate": {},
    "selectedAvailability": {}
  }; }
}
