import { Component, h, Host, Prop } from '@stencil/core';
const card1 = `<dvn-card leaned width="280px">
  <dvn-card-header title="Kapadokya" slot="header">
    <div slot="action">
      <dvn-icon-button icon-name="uil uil-favorite" tint="secondary" view="flat" leaned>
      </dvn-icon-button>
    </div>
  </dvn-card-header>

  <div>
    Cappadocia is a historical region in Central Anatolia.
    According to Herodotus, in the time of the Ionian Revolt (499 BC),
    the Cappadocians were reported as occupying a region from Mount
    Taurus to the vicinity of the Euxine (Black Sea).
  </div>

  <dvn-card-footer slot="footer" align-right>
    <dvn-button leaned tint="secondary" view="flat">
      Add to Favourites
    </dvn-button>
  </dvn-card-footer>
</dvn-card>`;
const card3 = `<dvn-card leaned width="280px">
  <dvn-card-header
    title="Kapadokya"
    cover-src="https://media.tacdn.com/media/attractions-splice-spp-674x446/06/6f/1f/d7.jpg"
    slot="header"
    show-cover
  >
    <div slot="action">
      <dvn-icon-button icon-name="uil uil-cloud-download" leaned>
      </dvn-icon-button>
      <dvn-icon-button icon-name="uil uil-favorite" tint="secondary" leaned >
      </dvn-icon-button>
    </div>
  </dvn-card-header>

  <div>
    Cappadocia is a historical region in Central Anatolia.
    According to Herodotus, in the time of the Ionian Revolt (499 BC),
    the Cappadocians were reported as occupying a region from Mount
    Taurus to the vicinity of the Euxine (Black Sea).
  </div>
</dvn-card>`;
const card2 = `<dvn-card leaned width="280px">
  <dvn-card-header title="Kapadokya" slot="header" separated>
    <div slot="action">
      <dvn-icon-button icon-name="uil uil-favorite" tint="secondary" view="flat" leaned >
      </dvn-icon-button>
      <dvn-icon-button icon-name="uil uil-cloud-download" view="flat" leaned >
      </dvn-icon-button>
    </div>
  </dvn-card-header>

  <div>
    Cappadocia is a historical region in Central Anatolia.
    According to Herodotus, in the time of the Ionian Revolt (499 BC),
    the Cappadocians were reported as occupying a region from Mount
    Taurus to the vicinity of the Euxine (Black Sea).
  </div>

  <dvn-card-footer slot="footer" align-right separated>
    <dvn-button leaned tint="primary" view="flat">
      Add to Favourites
    </dvn-button>
  </dvn-card-footer>
</dvn-card>`;
const card4 = `<dvn-card leaned width="280px">
  <dvn-card-header
    image-src="https://bit.ly/2Tg0THm"
    slot="header"
    show-image
    title="Nykyta Korotkevych"
  ></dvn-card-header>

  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>

  <dvn-card-footer align-right slot="footer">
    <dvn-button leaned tint="primary" view="flat">
      Follow
    </dvn-button>
  </dvn-card-footer>
</dvn-card>`;
const card5 = `<dvn-card leaned width="280px">
  <dvn-card-header
    title="Nykyta Korotkevych"
    slot="header"
    show-cover
    cover-src="https://bit.ly/36goixD"
    show-image
    image-src="https://bit.ly/2Tg0THm"
    image-position="bottom-left"
  >
    <div slot="action">
      <dvn-icon-button icon-name="uil uil-envelope" tint="primary">
      </dvn-icon-button>
    </div>
  </dvn-card-header>

  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>

  <dvn-card-footer align-right slot="footer">
    <dvn-button leaned tint="secondary" view="flat">
      Follow
    </dvn-button>
  </dvn-card-footer>
</dvn-card>`;
const card6 = `<dvn-card leaned width="280px">
  <dvn-card-header
    title="Nykyta Korotkevych"
    slot="header"
    show-cover
    cover-src="https://bit.ly/36goixD"
    cover-size="120"
    show-image
    image-src="https://bit.ly/2Tg0THm"
  ></dvn-card-header>

  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>

  <dvn-card-footer align-right slot="footer">
    <dvn-button leaned tint="secondary" view="flat">
      Follow
    </dvn-button>
  </dvn-card-footer>
</dvn-card>`;
const card7 = `<dvn-card leaned width="280px">
  <dvn-card-header
    title="Nykyta Korotkevych"
    slot="header"
    show-cover
    cover-src="https://bit.ly/36goixD"
    cover-size="120"
    show-image
    image-src="https://bit.ly/2Tg0THm"
    image-size="48"
    title-position="right-of-image"
    image-position="bottom-left"
  ></dvn-card-header>

  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>

  <dvn-card-footer align-right slot="footer">
    <dvn-button leaned tint="secondary" view="flat">
      Follow
    </dvn-button>
  </dvn-card-footer>
</dvn-card>`;
const card8 = `<dvn-card leaned width="280px">
  <dvn-card-header
    title="Nykyta Korotkevych"
    slot="header"
    show-cover
    cover-src="https://bit.ly/36goixD"
    cover-size="120"
    show-image
    image-src="https://bit.ly/2Tg0THm"
    image-size="48"
    title-position="below-cover"
    image-position="below-cover"
  ></dvn-card-header>

  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>

  <dvn-card-footer align-right slot="footer">
    <dvn-button leaned tint="secondary" view="flat">
      Follow
    </dvn-button>
  </dvn-card-footer>
</dvn-card>`;
const card11 = `<dvn-card
  elevation="0"
  leaned
  height="60px"
  width="60px"
></dvn-card>`;
const card12 = `<dvn-card
  leaned
  height="60px"
  width="60px"
></dvn-card>`;
const card13 = `<dvn-card
  elevation="2"
  leaned
  height="60px"
  width="60px"
></dvn-card>`;
const card14 = `<dvn-card
  elevation="3"
  leaned
  height="60px"
  width="60px"
></dvn-card>`;
const card15 = `<dvn-card
  leaned
  outlined
  height="60px"
  width="60px"
></dvn-card>`;
const card16 = `<dvn-card
  selectable
  leaned
  outlined
>Selectable</dvn-card>`;
const renderSample = (name, show, showCode = false, layout = 'horizontal') => {
  if (show && show !== name) {
    return null;
  }
  return (h("div", { style: { padding: 'calc(4 * var(--spacing-unit))' } }, showCode
    ? h("dvn-component-demo", { domString: samples[name], layout: layout })
    : h("div", { innerHTML: samples[name] })));
};
const samples = {
  card1,
  card2,
  card3,
  card4,
  card5,
  card6,
  card7,
  card8,
  card11,
  card12,
  card13,
  card14,
  card15,
  card16,
};
export class ShowcaseCard {
  constructor() {
    this.showCode = true;
  }
  render() {
    const { show } = this;
    return (h(Host, { class: "row" },
      h("div", { class: "d-flex mb-4" },
        renderSample('card11', show, this.showCode, 'vertical'),
        renderSample('card12', show, this.showCode, 'vertical'),
        renderSample('card13', show, this.showCode, 'vertical'),
        renderSample('card14', show, this.showCode, 'vertical'),
        renderSample('card15', show, this.showCode, 'vertical')),
      renderSample('card1', show, this.showCode),
      renderSample('card2', show, this.showCode),
      renderSample('card3', show, this.showCode),
      renderSample('card4', show, this.showCode),
      renderSample('card5', show, this.showCode),
      renderSample('card6', show, this.showCode),
      renderSample('card7', show, this.showCode),
      renderSample('card8', show, this.showCode),
      renderSample('card16', show, this.showCode)));
  }
  static get is() { return "showcase-card"; }
  static get properties() { return {
    "show": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show",
      "reflect": false
    },
    "showCode": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show-code",
      "reflect": false,
      "defaultValue": "true"
    }
  }; }
}
