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

@Component({
  tag: 'component-picker',
  styleUrl: 'picker.css'
})
export class Picker {
  @Element() el!: HTMLElement;

  defaultColumnOptions = [
    [
    '童装',
    '男装',
    '女装'
   ] 
  ]
  multiColumnOptions = [
    [
      '休闲风',
      '职业风',
      '波西米亚风',
      '性感风',
      '复古风',
      '运动风',
      '街头风'
    ],
    [
      '印花裙',
      '西装',
      '连衣裙',
      '高跟鞋',
      '紧身衣'
    ]
  ]

  dismissOverlay() {
    document.querySelector('ion-modal').dismiss();
  }

  render() {
    const description = '“为您的店面挑选最合适的<b>标签</b>.，让每一位顾客都能轻松找到心仪的商品！”';
    const url = '';

    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-breadcrumbs>
  <ion-breadcrumb href="#home">
    Bussiness
    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#electronics">
  User Experience
    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
  </ion-breadcrumb>
  <ion-breadcrumb href="#film">
    Label
    <ion-icon slot="separator" name="arrow-forward-circle"></ion-icon>
  </ion-breadcrumb>
</ion-breadcrumbs>
      </ion-header>,

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

        <div class="ion-padding-start ion-padding-end">

          <ion-picker>
            { this.defaultColumnOptions.map((c) => {
              return (
                <ion-picker-column value={c[0]}>
                  { c.map((o) => {
                    return (
                      <ion-picker-column-option value={o}>{o}</ion-picker-column-option>
                    )
                  })}
                </ion-picker-column>
              )
            })}
          </ion-picker>

          <ion-button id="open-picker" class="ion-text-wrap" expand="block">选择标签</ion-button>

          <ion-modal trigger="open-picker">
            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-button onClick={() => this.dismissOverlay()}>Cancel</ion-button>
              </ion-buttons>
              <ion-buttons slot="end">
                <ion-button onClick={() => this.dismissOverlay()}>Done</ion-button>
              </ion-buttons>
            </ion-toolbar>
            <ion-picker>
              { this.multiColumnOptions.map((c) => {
                return (
                  <ion-picker-column value={c[0]}>
                    { c.map((o) => {
                      return (
                        <ion-picker-column-option value={o}>{o}</ion-picker-column-option>
                      )
                    })}
                  </ion-picker-column>
                )
              })}
            </ion-picker>
          </ion-modal>
        </div>
      </ion-content>
    ];
  }
}
