import { Component, h } from '@stencil/core';

@Component({
  tag: 'component-datetime',
  styleUrl: 'datetime.css'
})
export class Datetime {

  render() {
    const description = '<b>Datetime</b> presents a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native input elements of <code>datetime-local</code>, however, Ionic\'s Datetime component makes it easy to display the date and time in the a preferred format, and manage the datetime values.';


    return [
      <ion-header translucent={true}>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-back-button defaultHref="/"></ion-back-button>
          </ion-buttons>
          <ion-title>备忘录</ion-title>
        </ion-toolbar>
      </ion-header>,

      <ion-content fullscreen class="component-content">
        <component-details description={description} ></component-details>

        <ion-list inset={true}>
          <ion-item>
            <ion-input aria-label="Title" placeholder="事件"></ion-input>
          </ion-item>
          <ion-item lines="full">
            <ion-input aria-label="Location" placeholder="地点"></ion-input>
          </ion-item>
        </ion-list>

        <ion-list inset={true}>
          <ion-accordion-group>
            <ion-accordion value="start">
              <ion-item lines="inset" slot="header">
                <ion-label>开始</ion-label>
                <ion-datetime-button slot="end" datetime="start-date"></ion-datetime-button>
              </ion-item>
              <ion-datetime id="start-date" slot="content" presentation="date"></ion-datetime>
            </ion-accordion>
            <ion-accordion value="end">
              <ion-item lines="inset" slot="header">
                <ion-label>结束</ion-label>
                <ion-datetime-button slot="end" datetime="end-date"></ion-datetime-button>
              </ion-item>
              <ion-datetime id="end-date" slot="content" presentation="date"></ion-datetime>
            </ion-accordion>
          </ion-accordion-group>
          <ion-item>
            <ion-label position="stacked">基本信息</ion-label>
              <ion-input aria-label="参与人" placeholder="参与人"></ion-input>             
              <ion-textarea label="具体事件" ></ion-textarea>
              <ion-input label="注意" labelPlacement="floating" placeholder="注意事项"></ion-input>
            </ion-item>
        </ion-list>
        <div class="ion-padding">
            <ion-button expand="block" type="submit"  class="ion-text-wrap ion-no-margin">生成</ion-button>
          </div>
      </ion-content>
    ];
  }
}
