import { Component, h, Host, Prop } from '@stencil/core';
import { getInitials } from '../../utils/utils';
const users = [
  {
    email: 'loren@devingen.com',
    firstName: 'Loren',
    lastName: 'Spears',
    imageUrl: 'https://images.unsplash.com/photo-1476493279419-b785d41e38d8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=61eaea85f1aa3d065400179c78163f15',
  },
  {
    email: 'nykyta@devingen.com',
    firstName: 'Nykyta',
    lastName: 'Korotkevych',
    imageUrl: 'https://pbs.twimg.com/profile_images/974603248119222272/N5PLzyan.jpg',
    bio: 'Design Director at Collegium Red',
  },
  {
    email: 'sasha@devingen.com',
    firstName: 'Sasha',
    lastName: 'Ho',
    imageUrl: 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?h=350&auto=compress&cs=tinysrgb',
    bio: 'Product Manager'
  },
  {
    email: 'erwan@devingen.com',
    firstName: 'Erwan',
    lastName: 'Gauthier',
    imageUrl: 'https://randomuser.me/api/portraits/men/1.jpg',
  },
  {
    email: 'eliana@devingen.com',
    firstName: 'Eliana',
    lastName: 'Stout',
    imageUrl: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=046c29138c1335ef8edee7daf521ba50',
    bio: 'Marketing Intern'
  },
  {
    email: 'ghost@devingen.com',
    firstName: 'Kevin',
    lastName: 'Ghost',
    imageUrl: '',
  },
  {
    email: 'kayley@devingen.com',
    firstName: 'Kayley',
    lastName: 'Dwyer',
    imageUrl: 'https://images.unsplash.com/photo-1503467913725-8484b65b0715?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=cf7f82093012c4789841f570933f88e3',
  },
  {
    email: 'krunal@devingen.com',
    firstName: 'Krunal',
    lastName: 'Sojitra',
    imageUrl: 'https://pbs.twimg.com/profile_images/702865642295152641/tXpSCC2T.jpg',
  },
  {
    email: 'casper@devingen.com',
    firstName: 'Casper',
    lastName: 'White',
    imageUrl: '',
  },
];
const demo1 = `<dvn-image
  leaned
  bordered
  size="64"
  src="https://bit.ly/2Tg0THm"
/>`;
const demo2 = `<dvn-image
  leaned
  scale="large"
  src="https://bit.ly/2Tg0THm"
/>`;
const demo3 = `<dvn-image
  leaned
  bordered
  shape="circle"
  text="AB"
/>`;
export class ShowcaseImage {
  render() {
    return (h(Host, null,
      this.show === 'table' &&
        h("table", null,
          h("thead", null,
            h("tr", null,
              h("th", null,
                h("b", null, "Image")),
              h("th", null, "S"),
              h("th", null, "M"),
              h("th", null, "L"),
              h("th", null, "48px"),
              h("th", null, "56px"))),
          h("tbody", null,
            h("tr", null,
              h("td", null, "Square"),
              h("td", null,
                h("dvn-image", { src: users[0].imageUrl, scale: "small" })),
              h("td", null,
                h("dvn-image", { src: users[1].imageUrl })),
              h("td", null,
                h("dvn-image", { src: users[2].imageUrl, scale: "large" })),
              h("td", null,
                h("dvn-image", { src: users[3].imageUrl, size: 48 })),
              h("td", null,
                h("dvn-image", { src: users[4].imageUrl, size: 56 }))),
            h("tr", null,
              h("td", null, "Circle"),
              h("td", null,
                h("dvn-image", { src: users[0].imageUrl, shape: "circle", scale: "small" })),
              h("td", null,
                h("dvn-image", { src: users[1].imageUrl, shape: "circle" })),
              h("td", null,
                h("dvn-image", { src: users[2].imageUrl, shape: "circle", scale: "large" })),
              h("td", null,
                h("dvn-image", { src: users[3].imageUrl, shape: "circle", size: 48 })),
              h("td", null,
                h("dvn-image", { src: users[4].imageUrl, shape: "circle", size: 56 }))),
            h("tr", null,
              h("td", null, "Bordered"),
              h("td", null,
                h("dvn-image", { bordered: true, src: users[0].imageUrl, shape: "circle", scale: "small" })),
              h("td", null,
                h("dvn-image", { bordered: true, src: users[1].imageUrl, shape: "circle" })),
              h("td", null,
                h("dvn-image", { bordered: true, src: users[2].imageUrl, shape: "circle", scale: "large" })),
              h("td", null,
                h("dvn-image", { bordered: true, src: users[3].imageUrl, shape: "circle", size: 48 })),
              h("td", null,
                h("dvn-image", { bordered: true, src: users[4].imageUrl, shape: "circle", size: 56 }))),
            h("tr", null,
              h("td", null, "Letters WB"),
              h("td", null,
                h("dvn-image", { shape: "circle", text: getInitials(users[0]), bordered: true, scale: "small" })),
              h("td", null,
                h("dvn-image", { shape: "circle", text: getInitials(users[1]), bordered: true })),
              h("td", null,
                h("dvn-image", { shape: "circle", text: getInitials(users[2]), bordered: true, scale: "large" })),
              h("td", null,
                h("dvn-image", { shape: "circle", text: getInitials(users[3]), bordered: true, size: 48 })),
              h("td", null,
                h("dvn-image", { shape: "circle", text: getInitials(users[4]), bordered: true, size: 56 }))),
            h("tr", null,
              h("td", null, "Letters WOB"),
              h("td", null,
                h("dvn-image", { shape: "circle", text: getInitials(users[0]), scale: "small" })),
              h("td", null,
                h("dvn-image", { shape: "circle", text: getInitials(users[1]) })),
              h("td", null,
                h("dvn-image", { shape: "circle", text: getInitials(users[2]), scale: "large" })),
              h("td", null,
                h("dvn-image", { shape: "circle", text: getInitials(users[3]), size: 48 })),
              h("td", null,
                h("dvn-image", { shape: "circle", text: getInitials(users[4]), size: 56 }))))),
      this.show !== 'table' &&
        h("dvn-card", { leaned: true },
          h("div", { class: "d-flex" },
            h("dvn-component-demo", { domString: demo2 }),
            h("dvn-component-demo", { domString: demo3 }),
            h("dvn-component-demo", { domString: demo1 })))));
  }
  static get is() { return "showcase-image"; }
  static get properties() { return {
    "show": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show",
      "reflect": false
    }
  }; }
}
