/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
import { d as defineCustomElement$a } from './gasco-avatar2.js';
import { d as defineCustomElement$9 } from './gasco-checkbox2.js';
import { d as defineCustomElement$8 } from './gasco-item2.js';
import { d as defineCustomElement$7 } from './gasco-label2.js';
import { d as defineCustomElement$6 } from './gasco-list2.js';
import { d as defineCustomElement$5 } from './gasco-paginator2.js';
import { d as defineCustomElement$4 } from './gasco-table-col2.js';
import { d as defineCustomElement$3 } from './gasco-table-row2.js';
import { d as defineCustomElement$2 } from './icon.js';

const gascoTableCss = ":host{display:block;border:1px solid #CCCCCC}.table-native{width:100%;max-width:100%}.table-thead{position:relative}.table-thead::before{content:\"\";position:absolute;inset:0 0 0 0;z-index:1}.table-thead .table-col{display:flex !important;align-items:center;justify-content:space-between}gasco-paginator{width:auto;border:none}.table-status{text-align:center}.table-status-active .table-col,.table-status-inactive .table-col{text-align:center;width:82px;padding:4px 0;font-size:12px !important;border-radius:20px}.table-status-active .table-col{background:#F2FFFB !important;color:#339900 !important}.table-status-inactive .table-col{background:#F7DFE0 !important;color:#EF3340 !important}.avatar-label:nth-child(2){font-size:12px;line-height:16px;color:#999999;width:100px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.wrapper-table-small{padding-left:21px;font-weight:400;font-size:14px;line-height:20px}.wrapper-table-small .table-small{display:flex;align-items:center;justify-content:space-between}.wrapper-table-small .table-small>span{color:#999999}";

const GascoTable$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.gascoTableAction = createEvent(this, "gascoTableAction", 7);
    // This can be improved, so that it can be more dynamic.
    this.tableHeader = [{
        name: 'Nombre',
        phone: 'Telefono',
        address: 'Dirección',
        date: 'Fecha',
        hour: 'Hora',
        state: 'Estado'
      }];
    this.pagination = true;
    /**
     * Number of elements to show this taking into account that it will always be 10 + 10.
     */
    this.pageSize = 10;
    /**
     * If it is `1`, `pageSize` will be shown, which is equivalent to the elements that you want to show.
     */
    this.currentPage = 1;
    /**
     * Amounts of items to display, this may vary depending on the user.
     */
    this.suggestionList = [10, 20, 30];
    this.isResponsive = document.documentElement.clientWidth;
    this.checkboxList = [];
    this.stateUserList = [];
    this.isCheckboxAll = false;
    this.isCheckbox = false;
  }
  // EVENT's
  handleResize() {
    this.isResponsive = document.documentElement.clientWidth;
  }
  handleGetTypeAction(ev) {
    const type = ev.detail;
    if (this.checkboxList.length > 0) {
      this.gascoTableAction.emit({ action: type.action, data: this.checkboxList });
    }
    else {
      this.gascoTableAction.emit({ action: type.action, data: type.data });
    }
  }
  componentWillLoad() {
    this.stateUserList = this.users;
  }
  // METHOD's
  handleSelectUser(userOrAll) {
    // We have all the users we want to either edit, delete or etc.
    if (userOrAll === 'all') {
      this.checkboxList = [];
      if (!this.isCheckboxAll) {
        this.users.forEach(({ id }) => this.checkboxList.push(id));
        this.isCheckboxAll = true;
        return 0;
      }
      this.isCheckboxAll = false;
      return 0;
    }
    // We are looking for an existing user.
    const findUser = this.checkboxList.find(id => id === userOrAll);
    if (findUser) {
      // If the user existes we delete it.
      const removeUser = this.checkboxList.filter(id => id !== userOrAll);
      this.checkboxList = removeUser;
    }
    else {
      // If the user does not exist, we save it
      this.checkboxList.push(userOrAll);
      this.isCheckbox = true;
    }
    if (this.checkboxList.length === 0) {
      this.isCheckbox = false;
    }
  }
  handleTableSortData(e) {
    this.stateUserList = [];
    const thead = e.target;
    if (thead.getAttribute("data-dir") === "desc") {
      this.handleSortData(thead.id, "desc");
      thead.setAttribute("data-dir", "asc");
    }
    else {
      this.handleSortData(thead.id, "asc");
      thead.setAttribute("data-dir", "desc");
    }
  }
  handleSortData(param, direction = "asc") {
    const sortedData = direction === "asc"
      ? this.users.sort((a, b) => {
        if (a[param] < b[param]) {
          return -1;
        }
        if (a[param] > b[param]) {
          return 1;
        }
        return 0;
      })
      : this.users.sort((a, b) => {
        if (b[param] < a[param]) {
          return -1;
        }
        if (b[param] > a[param]) {
          return 1;
        }
        return 0;
      });
    this.stateUserList = sortedData;
    // console.log(this.stateUserList);
  }
  renderThead() {
    return this.tableHeader.map(thead => {
      return Object.values(thead).map((value, y) => {
        const valueForSort = Object.keys(thead)[y];
        return (h("gasco-table-col", { id: valueForSort, class: "table-thead", onClick: (e) => this.handleTableSortData(e) }, value, " ", h(SvgSort, null)));
      });
    });
  }
  renderTbodyLarger() {
    return this.stateUserList.map((data) => (h("gasco-table-row", null, h("gasco-table-col", null, h("gasco-checkbox", { checked: this.isCheckboxAll, onClick: () => this.handleSelectUser(data.id) })), h("gasco-table-col", null, h("gasco-avatar", { src: data.avatar, alt: data.name }, h("gasco-label", { class: "avatar-label" }, data.name), h("gasco-label", { class: "avatar-label" }, data.description))), h("gasco-table-col", null, data.phone), h("gasco-table-col", null, data.address), h("gasco-table-col", null, data.date), h("gasco-table-col", null, data.hour), h("gasco-table-col", { class: `table-status-${data.state ? 'active' : 'inactive'}` }, data.state ? 'Activo' : 'Inactivo'), h("gasco-table-col", { action: true, typeAction: data.id }))));
  }
  renderTbodySmall() {
    return this.stateUserList.map((data) => (h("gasco-table-row", { class: "table-row-small" }, h("gasco-table-col", { class: "table-col-small" }, h("gasco-checkbox", { checked: this.isCheckboxAll, onClick: () => this.handleSelectUser(data.id) }), h("gasco-avatar", { src: data.avatar, alt: data.name }, h("gasco-label", { class: "avatar-label" }, data.name), h("gasco-label", { class: "avatar-label" }, data.description)), h("gasco-table-col", { action: true, typeAction: data.id })), h("div", { class: "wrapper-table-small" }, h("div", { class: "table-small" }, h("span", null, "Status"), h("gasco-table-col", { class: `table-status-${data.state ? 'active' : 'inactive'}` }, data.state ? 'Activo' : 'Inactivo')), h("div", { class: "table-small" }, h("span", null, "Numero"), h("gasco-table-col", null, data.phone)), h("div", { class: "table-small" }, h("span", null, "Fecha"), h("gasco-table-col", null, data.date)), h("div", { class: "table-small" }, h("span", null, "Direcci\u00F3n"), h("gasco-table-col", null, data.address)), h("div", { class: "table-small" }, h("span", null, "Hora"), h("gasco-table-col", null, data.hour))))));
  }
  render() {
    const { pagination, currentPage, pageSize, totalItems, suggestionList } = this;
    return (h(Host, { class: {
        'gasco-table': true,
        'gasco-color-primary': true
      } }, h("div", { role: "table", class: "table-native", part: "native" }, this.isResponsive > 768 ? (h(Fragment, null, h("gasco-table-row", { header: true }, h("gasco-table-col", null, h("gasco-checkbox", { onClick: () => this.handleSelectUser('all') })), this.renderThead(), h("gasco-table-col", { action: this.isCheckboxAll || this.isCheckbox }, !this.isCheckboxAll && !this.isCheckbox && 'Acciones')), this.renderTbodyLarger())) : (h(Fragment, null, h("gasco-table-row", { header: true, class: "table-row-small" }, h("gasco-table-col", { class: "table-col-small" }, h("gasco-checkbox", { onClick: () => this.handleSelectUser('all') })), h("gasco-table-col", { action: !this.isCheckboxAll || !this.isCheckbox })), this.renderTbodySmall()))), pagination && (h("gasco-paginator", { currentPage: currentPage, pageSize: pageSize, totalItems: totalItems, suggestionList: suggestionList }))));
  }
  static get style() { return gascoTableCss; }
}, [1, "gasco-table", {
    "pagination": [4],
    "totalItems": [514, "total-items"],
    "pageSize": [514, "page-size"],
    "currentPage": [514, "current-page"],
    "suggestionList": [16],
    "users": [1040],
    "isResponsive": [32],
    "checkboxList": [32],
    "stateUserList": [32],
    "isCheckboxAll": [32],
    "isCheckbox": [32]
  }, [[9, "resize", "handleResize"], [16, "gascoTableTypeAction", "handleGetTypeAction"]]]);
const SvgSort = () => (h("svg", { width: "8", height: "14", fill: "none", viewBox: "0 0 8 14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.33203 9.50007L3.9987 12.8334L0.665364 9.50007M0.665364 4.50007L3.9987 1.16674L7.33203 4.50007", stroke: "#072531", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" })));
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["gasco-table", "gasco-avatar", "gasco-checkbox", "gasco-item", "gasco-label", "gasco-list", "gasco-paginator", "gasco-table-col", "gasco-table-row", "ion-icon"];
  components.forEach(tagName => { switch (tagName) {
    case "gasco-table":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, GascoTable$1);
      }
      break;
    case "gasco-avatar":
      if (!customElements.get(tagName)) {
        defineCustomElement$a();
      }
      break;
    case "gasco-checkbox":
      if (!customElements.get(tagName)) {
        defineCustomElement$9();
      }
      break;
    case "gasco-item":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "gasco-label":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "gasco-list":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "gasco-paginator":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "gasco-table-col":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "gasco-table-row":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "ion-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const GascoTable = GascoTable$1;
const defineCustomElement = defineCustomElement$1;

export { GascoTable, defineCustomElement };
