import { Component, h, Host, State } from '@stencil/core';
function getDay(addition = 0) {
  const today = new Date();
  return new Date(today.getFullYear(), today.getMonth(), today.getDate() + addition);
}
const demo1 = `<dvn-date-picker
  leaned
  placeholder="Select any date"
/>`;
const demo2 = `<dvn-date-picker
  leaned
  date-format="DD MMM YYYY"
  placeholder="Specific date format"
/>`;
const demo3 = `<dvn-date-picker
  leaned
  placeholder="Multiple months"
  multiple
  shown-month-count="2"
/>`;
const demo4 = `<dvn-date-picker
  leaned
  embedded
/>`;
const demo5 = `<dvn-date-picker
  leaned
  embedded
  multiple
  shown-month-count="2"
/>`;
const demo6 = `<dvn-date-picker
  leaned
  placeholder="Multiple value"
  multiple
  shown-month-count="2"
/>`;
export class ShowcaseDatePicker {
  constructor() {
    this.series = ['himym', 'black-mirror'];
  }
  render() {
    return (h(Host, null,
      h("dvn-card", { leaned: true, clip: false },
        h("div", { class: "d-flex" },
          h("dvn-component-demo", { domString: demo1 }),
          h("dvn-component-demo", { domString: demo2 }),
          h("dvn-component-demo", { domString: demo3 })),
        h("div", { class: "mb-3 mt-4" },
          "These examples contain non-plain JavaScript, they cannot be wrapped with the code snippet.",
          h("br", null),
          h("br", null),
          h("dvn-date-picker", { leaned: true, placeholder: "Select only this week", minDate: getDay(0), maxDate: getDay(7) }),
          "\u00A0",
          h("dvn-date-picker", { leaned: true, placeholder: "Pre-selected date", value: getDay(3) }))),
      h("br", null),
      h("br", null),
      h("dvn-card", { leaned: true, clip: false },
        h("dvn-component-demo", { domString: demo4 }),
        h("dvn-component-demo", { domString: demo5 }),
        h("dvn-component-demo", { domString: demo6 }))));
  }
  static get is() { return "showcase-date-picker"; }
  static get states() { return {
    "series": {}
  }; }
}
