import { r as registerInstance } from './index-3d16dafa.js';
import { a as api } from './api-0c31171f.js';
import { s as serializeForm } from './serializeForm-a39bb4a7.js';
import { w as waitForHydrated } from './waitForHydrated-24c52eea.js';
import { P as ProductionStatus } from './production-status-enum-11b4c4d0.js';
import './_commonjsHelpers-5e4b1d1a.js';

const row = ({ number, name, isFav, toggleFavUrl, constructionYear, subEquipments, location, serviceAgreement, detailLink, inProduction, }) => {
  return `
        <tr>
            <td><ux-toggle-button
                sync-id="${number}"
                icon-on="fav-filled"
                icon-off="fav"
                toggle-url="${toggleFavUrl}"
                ${isFav ? "on" : ""}
            ></ux-toggle-button></td>
            <td>${name}</td>
            <td>${number}</td>
            <td>${!inProduction
    ? constructionYear
    : renderProductionStatusLabel(inProduction)}</td>
            <td>${subEquipments}</td>
            <td>${location}</td>
            ${typeof serviceAgreement !== "undefined"
    ? `<td>${serviceAgreement}</td>`
    : ""}
            <td><a class="ux-button ux-button--icon-only" href="${detailLink}"><ux-icon name="arrow-right"></ux-icon></a></td>
        </tr>
    `;
};
const renderProductionStatusLabel = (labelText) => {
  return `<ux-iws-production-status type=${ProductionStatus.IN_PRODUCTION}>${labelText}</ux-iws-production-status>`;
};

var ShopType;
(function (ShopType) {
  ShopType["BENDING"] = "bending";
  ShopType["PUNCHING"] = "punching";
  ShopType["SPAREPARTS"] = "spareparts";
})(ShopType || (ShopType = {}));

const tile = (chooseShopMessage) => ({ number, name, isFav, toggleFavUrl, shopLinks = [], inProduction, image, detailLink, }) => {
  return `
        <ux-iws-tile
            machine-name="${name}"
            machine-id="${number}"
            machine-image-url="${image}"
            detail-link="${detailLink}"
            ${inProduction ? `in-production="${inProduction}"` : ""}
            ${shopLinks && shopLinks.length > 0
    ? `
                shop-link="${shopLinks[0].link}"
                shop-link-title="${shopLinks[0].linkText}"
                shop-link-icon="${getShopIcon(shopLinks[0].shopType)}"
            `
    : ""}
            ${shopLinks && shopLinks.length > 1
    ? `
                shop-link-2="${shopLinks[1].link}"
                shop-link-2-title="${shopLinks[1].linkText}"
                shop-link-2-icon="${getShopIcon(shopLinks[1].shopType)}"
            `
    : ""}
            choose-shop-title="${chooseShopMessage}"
            sync-id="${number}"
            toggle-fav-url="${toggleFavUrl}"
            is-fav="${isFav}"
        >
        </ux-iws-tile>
    `;
};
const getShopIcon = (type) => {
  switch (type) {
    case ShopType.BENDING:
      return "cart-bending-tools";
    case ShopType.PUNCHING:
      return "cart-punching-tools";
    case ShopType.SPAREPARTS:
      return "cart-genuine-parts";
    default:
      return "cart";
  }
};

const dataControllerMymachineCss = ".mymachine-overview__cta-buttons-container{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column;margin-bottom:10px}@media only screen and (min-width: 768px){.mymachine-overview__cta-buttons-container{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}}@media only screen and (min-width: 1024px){.mymachine-overview__cta-buttons-container{margin-top:10px}}.mymachine-overview__cta-buttons-container>*{min-width:100%;margin-bottom:15px}@media only screen and (min-width: 768px){.mymachine-overview__cta-buttons-container>*{min-width:auto;margin-right:20px}}.mymachine-overview__cta-buttons-container>*:nth-child(3){margin-left:auto;display:none}@media only screen and (min-width: 1024px){.mymachine-overview__cta-buttons-container>*:nth-child(3){display:block}}.mymachine-overview .mymachine-overview__direct-search-element{-ms-flex-order:-1;order:-1;margin-bottom:20px;border-bottom:1px solid #e2e2e2}@media only screen and (min-width: 768px){.mymachine-overview .mymachine-overview__direct-search-element{min-width:100%}}@media only screen and (min-width: 1024px){.mymachine-overview .mymachine-overview__direct-search-element{display:none;-ms-flex-order:1;order:1}}.mymachine-overview__filter-container::before,.mymachine-overview__filter-container::after{content:\" \";display:table}.mymachine-overview__filter-container::after{clear:both}.mymachine-overview__filter-container .ux-tag{background-color:#285172}.mymachine-overview__filter-container .ux-label{min-width:auto;padding-right:20px}.mymachine-overview__filter-dropdown{min-width:250px;position:relative;margin-bottom:20px}@media only screen and (min-width: 768px){.mymachine-overview__filter-dropdown{max-width:300px;display:inline-block;margin-right:18px}}.mymachine-overview__filter-checkboxes{display:inline-block}@media only screen and (max-width: 1070px){.mymachine-overview__filter-checkboxes{display:block;margin:10px 0 20px}}.mymachine-overview__filter-checkbox:not(:last-child){margin-right:15px}@media (min-width: 1025px){.mymachine-overview .ux-button-group{position:absolute;right:0;top:0}}@media (max-width: 1024px){.mymachine-overview .ux-button-group{float:right;margin-left:25px}}.mymachine-overview__result-set{position:relative}@media (min-width: 1440px){.mymachine-overview__result-set{text-align:center}}@media (max-width: 1439px){.mymachine-overview__result-set{text-align:left}}.mymachine-overview__sort{font-size:16px;background-color:#fff}@media (min-width: 1025px){.mymachine-overview__sort{position:absolute;right:115px;top:0}}@media (max-width: 1024px){.mymachine-overview__sort{float:right;margin-bottom:0;margin-left:25px}}@media (max-width: 567px){.mymachine-overview__sort{margin-top:30px}}.mymachine-overview__tiles-container{max-width:1140px;margin:0 auto}.mymachine-overview__tiles-container .ux-tile{max-width:none;margin-bottom:30px}.mymachine-overview__tiles-container .ux-tile-body{overflow:hidden}.mymachine-overview__table-container .ux-toggle-button{font-size:21px}";

let DataControllerMymachine = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** endpoint where data can be requested */
    this.url = "";
    /** CSS-style selector for the select with all the sorting options */
    this.sortFormSelector = "";
    /** CSS-style selector for the filter */
    this.filterSelector = "";
    /** CSS-style selector for the table */
    this.tableSelector = "";
    /** CSS-style selector for the tiles container element */
    this.tilesContainerSelector = "";
    /** CSS-style selector for the element where the total number of machines should be placed */
    this.totalNumberSelector = "";
    /** CSS-style selector for the element where the number of filtered machines should be placed */
    this.filteredNumberSelector = "";
    /** CSS-style selector for the scroll-sensor */
    this.scrollSensorSelector = "";
    /** Text that should be displayed when multiple shop links are displayed */
    this.chooseShopText = "";
    /** select input for changing the sort-order */
    this.sortForm = null;
    /** element that contains all filters */
    this.filter = null;
    /** form element for filter */
    this.filterForm = null;
    /** table element */
    this.table = null;
    /** table body element where the data should be put */
    this.tableBody = null;
    /** DOM element where all the tiles should be put */
    this.tilesContainer = null;
    /** NodeList of DOM elements where the number of filtered machines should be put */
    this.filteredNumberElements = null;
    /** NodeList of DOM elements where the total number of machines should be put */
    this.totalNumberElements = null;
    /** URL for getting the next page */
    this.nextPage = "";
    /** DOM element where all the tiles should be put */
    this.scrollSensor = null;
    /** element that shows active filters */
    this.activeFiltersContainer = null;
    /** element that shows label for active filters */
    this.activeFiltersLabel = null;
  }
  componentDidLoad() {
    this.setSortForm();
    this.setFilter();
    this.setTilesContainer();
    this.setTable();
    this.setScrollSensor();
    this.setTotalNumberElements();
    this.setFilteredNumberElements();
    this.requestData(this.url);
  }
  /** connect sort select */
  setSortForm() {
    if (this.sortFormSelector === "")
      return;
    this.sortForm = document.querySelector(this.sortFormSelector);
    this.sortForm.addEventListener("submit", (e) => e.preventDefault());
    this.sortForm.addEventListener("change", () => {
      this.requestData(this.url);
      this.syncSortStateToTable();
    });
  }
  syncSortStateToTable() {
    if (this.table === null || this.sortForm === null)
      return;
    const { value } = this.sortForm.querySelector("select");
    const prevSorted = this.table.querySelector(`ux-table-sort[sorted-direction="desc"], ux-table-sort[sorted-direction="asc"]`);
    if (prevSorted !== null) {
      prevSorted.sortedDirection = "";
    }
    const ascSort = this.table.querySelector(`ux-table-sort[asc-name="${value}"]`);
    const descSort = this.table.querySelector(`ux-table-sort[desc-name="${value}"]`);
    if (ascSort !== null) {
      ascSort.sortedDirection = "asc";
    }
    if (descSort !== null) {
      descSort.sortedDirection = "desc";
    }
  }
  /** connect filter */
  setFilter() {
    if (this.filterSelector === "")
      return;
    this.filter = document.querySelector(this.filterSelector);
    if (this.filter === null)
      return;
    waitForHydrated(this.filter, () => this.setFilterForm());
    this.filter.addEventListener("uxFilterChange", () => {
      this.setActiveFilterLabelVisibility();
      this.requestData(this.url);
    });
  }
  /** connect total number */
  setTotalNumberElements() {
    if (this.totalNumberSelector === "")
      return;
    this.totalNumberElements = document.querySelectorAll(this.totalNumberSelector);
  }
  /** connect filtered number */
  setFilteredNumberElements() {
    if (this.filteredNumberSelector === "")
      return;
    this.filteredNumberElements = document.querySelectorAll(this.filteredNumberSelector);
  }
  setFilterForm() {
    var _a;
    this.filterForm = this.filter.querySelector("form");
    (_a = this.filterForm) === null || _a === void 0 ? void 0 : _a.addEventListener("submit", (e) => e.preventDefault());
    this.activeFiltersContainer = this.filter.querySelector(".ux-tag-list");
    if (this.activeFiltersContainer !== null) {
      this.activeFiltersLabel = this.activeFiltersContainer.parentElement.querySelector(".ux-label");
    }
    this.setActiveFilterLabelVisibility();
  }
  setActiveFilterLabelVisibility() {
    if (this.activeFiltersLabel === null ||
      this.activeFiltersContainer === null)
      return;
    if (this.activeFiltersContainer.querySelectorAll("ux-tag").length > 0) {
      this.activeFiltersLabel.style.display = "";
    }
    else {
      this.activeFiltersLabel.style.display = "none";
    }
  }
  updateNumbers(filtered, total) {
    writeToElements(this.filteredNumberElements, filtered.toString());
    writeToElements(this.totalNumberElements, total.toString());
  }
  /** connect table */
  setTable() {
    var _a;
    if (this.tableSelector === "")
      return;
    this.table = document.querySelector(this.tableSelector);
    this.tableBody = (_a = this.table) === null || _a === void 0 ? void 0 : _a.querySelector("tbody");
    if (this.table !== null && this.sortForm !== null) {
      this.table.addEventListener("uxTableSort", (e) => {
        const value = e.detail;
        if (value === "")
          return;
        this.sortForm.querySelector("select").value = value;
        this.requestData(this.url);
      });
      this.syncSortStateToTable();
    }
  }
  /** connect scroll-sensor */
  setScrollSensor() {
    if (this.scrollSensorSelector === "")
      return;
    this.scrollSensor = document.querySelector(this.scrollSensorSelector);
    if (this.scrollSensor !== null) {
      this.scrollSensor.addEventListener("uxInfiniteScrollSensorScrolledIntoView", () => {
        this.requestData(this.nextPage);
      });
    }
  }
  /** connect tileContainer */
  setTilesContainer() {
    if (this.tilesContainerSelector === "")
      return;
    this.tilesContainer = document.querySelector(this.tilesContainerSelector);
  }
  /** post filter and sort settings to get data from the endpoint */
  initialRequest() {
    this.requestData(this.url);
  }
  /** Send the real request and handle response */
  requestData(url) {
    if (url === "")
      return;
    const options = isMockUrl(url)
      ? {}
      : {
        method: "POST",
        body: serializeForm(this.sortForm) +
          "&" +
          serializeForm(this.filterForm),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      };
    api(url, options).then((data) => {
      if (this.url === url) {
        this.clearExistingData();
        this.replaceFilter(data.filterHTML);
      }
      this.appendItemsToTable(data.items);
      this.appendItemsToTiles(data.items);
      this.updateNumbers(data.filteredCount, data.totalCount);
      this.nextPage = data.nextPage || "";
      if (this.nextPage !== "" && this.scrollSensor !== null) {
        this.scrollSensor.hasFired = false;
      }
    });
  }
  replaceFilter(html) {
    if (typeof html === "string" &&
      html.length > 0 &&
      this.filter !== null) {
      const parent = this.filter.parentElement;
      if (parent !== null) {
        parent.style.height = `${parent.offsetHeight}px`;
      }
      this.filter.outerHTML = html;
      this.setFilter();
      setTimeout(() => {
        parent.style.height = "auto";
      }, 200);
    }
  }
  clearExistingData() {
    if (this.tableBody !== null)
      this.tableBody.textContent = "";
    if (this.tilesContainer !== null)
      this.tilesContainer.textContent = "";
  }
  appendItemsToTable(items) {
    if (this.tableBody === null)
      return;
    this.tableBody.insertAdjacentHTML("beforeend", items.map(row).join(""));
  }
  appendItemsToTiles(items) {
    if (this.tilesContainer === null)
      return;
    this.tilesContainer.insertAdjacentHTML("beforeend", items.map(tile(this.chooseShopText)).join(""));
  }
  render() {
    return null;
  }
  static get watchers() { return {
    "sortFormSelector": ["setSortForm"],
    "filterSelector": ["setFilter"],
    "totalNumberSelector": ["setTotalNumberElements"],
    "filteredNumberSelector": ["setFilteredNumberElements"],
    "tableSelector": ["setTable"],
    "scrollSensorSelector": ["setScrollSensor"],
    "tilesContainerSelector": ["setTilesContainer"],
    "url": ["initialRequest"]
  }; }
};
function isMockUrl(url) {
  return url.indexOf("mock-data/") > -1;
}
function writeToElements(nodes, text) {
  if (nodes === null)
    return;
  [].forEach.call(nodes, (element) => (element.textContent = text));
}
DataControllerMymachine.style = dataControllerMymachineCss;

export { DataControllerMymachine as ux_iws_data_controller_mymachine };