/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, a as getElement } from './index-211ca8fb.js';
import { j as ellipsisVertical } from './index-69a9be18.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 = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    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 }))));
  }
};
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" })));
GascoTable.style = gascoTableCss;

const gascoTableColCss = ".sc-gasco-table-col-h{display:block;padding:16px}.table-col.sc-gasco-table-col{position:relative;display:inline-block;font-weight:400;font-size:14px;line-height:20px;color:#072531}.table-col-header.sc-gasco-table-col{font-weight:600;font-size:16px;line-height:inherit}button.sc-gasco-table-col{background-color:transparent;max-width:60px;width:100%;border:none;cursor:pointer}ion-icon.sc-gasco-table-col{font-size:26px;text-align:center;color:#4D4D4D}gasco-checkbox.sc-gasco-table-col{border:1px solid #999999}gasco-list.sc-gasco-table-col{position:absolute;z-index:10;right:1rem;width:max-content}gasco-list.sc-gasco-table-col gasco-item.sc-gasco-table-col{text-align:center}@media only screen and (max-width: 768px){.sc-gasco-table-col-h:not([action]){padding:8px 21px}.table-col-small.sc-gasco-table-col-h .table-col.sc-gasco-table-col{display:flex;align-items:center;justify-content:space-between}[action].sc-gasco-table-col-h{padding:0}button.sc-gasco-table-col{max-width:20px}gasco-list.sc-gasco-table-col{top:0;right:0.5rem}}";

const GascoTableCol = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.gascoTableTypeAction = createEvent(this, "gascoTableTypeAction", 7);
    this.showList = false;
  }
  componentWillLoad() {
    this.getRowHeader();
  }
  getRowHeader() {
    const parent = this.el.parentElement.className;
    this.isColHeader = parent.includes('table-row-header');
  }
  render() {
    const { action, typeAction } = this;
    return (h("span", { part: "native", class: {
        'table-col': true,
        [`table-col-header`]: this.isColHeader
      } }, h("slot", null), action && (h("button", { onFocus: () => this.showList = true, onBlur: () => setTimeout(() => this.showList = false, 200) }, h("ion-icon", { icon: ellipsisVertical, lazy: false }))), this.showList && (h("gasco-list", null, h("gasco-item", { class: "table-action", onClick: () => this.gascoTableTypeAction.emit({ action: 'edit', data: typeAction }) }, "Editar"), h("gasco-item", { class: "table-action", onClick: () => this.gascoTableTypeAction.emit({ action: 'delete', data: typeAction }) }, "Eliminar")))));
  }
  get el() { return getElement(this); }
};
GascoTableCol.style = gascoTableColCss;

const gascoTableRowCss = ".table-row.sc-gasco-table-row-h{display:grid;grid-template-columns:max-content 200px repeat(6, 1fr);align-items:center;box-shadow:inset 0px -1px 0px #E4E4EF;transition:300ms}.table-row.sc-gasco-table-row-h:hover:not(.table-row-header){background:#F2FCFF}.table-row.table-row-small.sc-gasco-table-row-h{grid-template-columns:1fr;grid-template-rows:1fr}@media screen and (max-width: 768px){.table-row-header.sc-gasco-table-row-h{display:flex;justify-content:space-between;padding:0.5rem 1.2rem 0.5rem 0}}";

const GascoTableRow = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.header = false;
  }
  render() {
    return (h(Host, { role: "row", class: {
        'table-row': true,
        [`table-row-header`]: this.header
      } }, h("slot", null)));
  }
};
GascoTableRow.style = gascoTableRowCss;

export { GascoTable as gasco_table, GascoTableCol as gasco_table_col, GascoTableRow as gasco_table_row };
