'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-ceb0d0a9.js');
const api = require('./api-54551431.js');
const serializeForm = require('./serializeForm-71d4d470.js');
const waitForHydrated = require('./waitForHydrated-11e4f06c.js');
require('./_commonjsHelpers-bcc1208a.js');

var QuoteStatusTypes;
(function (QuoteStatusTypes) {
  QuoteStatusTypes["APPROVAL"] = "approval";
  QuoteStatusTypes["PENDING"] = "pending";
  QuoteStatusTypes["REJECTED"] = "rejected";
  QuoteStatusTypes["COMPLETED"] = "completed";
})(QuoteStatusTypes || (QuoteStatusTypes = {}));

function resolveStatusColor(type) {
  switch (type) {
    case QuoteStatusTypes.REJECTED:
      return "red";
    case QuoteStatusTypes.PENDING:
      return "dark-blue";
    case QuoteStatusTypes.COMPLETED:
      return "green";
    default:
      return "dark-blue";
  }
}
const getStatusText = ({ type, text }) => {
  const statusColor = resolveStatusColor(type);
  return `<span class="ux-text-status ux-text-status--${statusColor}">${text}</span>`;
};

const row = ({ orderNumber, status, createdAt, positions, orderTotal, machine, detailLink, downloadLink, }) => {
  const statusText = getStatusText(status);
  if (downloadLink) {
    return `
            <tr>
                <td>${orderNumber}</td>
                <td>${statusText}</td>
                <td>${createdAt}</td>
                <td>${positions}</td>
                <td>${orderTotal}</td>
                <td>${machine}</td>
                <td class="ux-iws-quote-table-links">
                    <a class="ux-button ux-button--icon-only" href="${downloadLink}"><ux-icon name="download"></ux-icon></a>
                    <a class="ux-button ux-button--icon-only" href="${detailLink}"><ux-icon name="arrow-right"></ux-icon></a>
                </td>
            </tr>
        `;
  }
  return `
        <tr>
            <td>${orderNumber}</td>
            <td>${statusText}</td>
            <td>${createdAt}</td>
            <td>${positions}</td>
            <td>${orderTotal}</td>
            <td>${machine}</td>
            <td class="ux-iws-quote-table-links">
                <a class="ux-button ux-button--icon-only" href="${detailLink}"><ux-icon name="arrow-right"></ux-icon></a>
            </td>
        </tr>
    `;
};

const dataControllerShopItemCss = ".ux-iws-shop-item-overview__filter-container::before,.ux-iws-shop-item-overview__filter-container::after{content:\" \";display:table}.ux-iws-shop-item-overview__filter-container::after{clear:both}.ux-iws-shop-item-overview__filter-container .ux-tag{background-color:#285172}.ux-iws-shop-item-overview__filter-container .datepicker-range{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.ux-iws-shop-item-overview__filter-container .datepicker-range__divider{-ms-flex:0 0 20px;flex:0 0 20px}.ux-iws-shop-item-overview__filter-container .datepicker{-ms-flex:1 1 auto;flex:1 1 auto}.ux-iws-shop-item-overview__filter-dropdown{min-width:250px;max-width:300px;position:relative;display:inline-block;margin-right:18px;margin-bottom:20px}.ux-iws-shop-item-overview__result-set.result-set{margin-top:0;position:relative;text-align:center}.ux-iws-shop-item-overview__table-container .ux-text-status{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.ux-iws-shop-item-overview__table-container .ux-text-status::before{content:\"\";display:inline-block;background-color:currentColor;width:0.8em;height:0.8em;border-radius:100%;margin-right:0.8em}.ux-iws-shop-item-overview .ux-collapsible-button__container{padding:15px;text-align:center}";

let DataControllerShopItemQuote = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /** endpoint where data can be requested */
    this.url = "";
    /** CSS selector for the filter */
    this.filterSelector = "";
    /** CSS selector for the filter */
    this.dateFormSelector = "";
    /** CSS selector for the sort form */
    this.sortFormSelector = "";
    /** CSS selector for the table */
    this.tableSelector = "";
    /** CSS selector for the ux tab element where the total number found is added as suffix concatenated with the totalNumberPrefix */
    this.uxTabSelector = "";
    /** CSS selector for the element where the number of filtered order should be placed */
    this.filteredNumberSelector = "";
    /** CSS selector for the scroll-sensor */
    this.scrollSensorSelector = "";
    /** Prefix text value on updating uxTab Name */
    this.totalNumberPrefix = "";
    /** element that contains all filters */
    this.filter = null;
    /** form element for filter */
    this.filterForm = null;
    /** form element for date range */
    this.dateForm = null;
    /** form element for sorting */
    this.sortForm = null;
    /** table element */
    this.table = null;
    /** table body element where the data should be put */
    this.tableBody = null;
    /** NodeList of DOM elements where the number of filtered orders should be put */
    this.filteredNumberElements = null;
    /** UX-Tab as HTMLUxTabElement where the updated total number of orders should be put */
    this.uxTabElement = null;
    /** URL for getting the next page */
    this.nextPage = "";
    /** DOM element where all the table rows should be put */
    this.scrollSensor = null;
  }
  componentDidLoad() {
    this.setDateForm();
    this.setSortForm();
    this.setFilter();
    this.setTable();
    this.setScrollSensor();
    this.setUxTabElement();
    this.setFilteredNumberElements();
    this.requestData(this.url);
  }
  /** Connect date form */
  setDateForm() {
    if (this.dateFormSelector === "")
      return;
    this.dateForm = document.querySelector(this.dateFormSelector);
    if (this.dateForm === null)
      return;
    this.dateForm.addEventListener("submit", (e) => {
      e.preventDefault();
      this.requestData(this.url);
      this.syncSortStateToTable();
    });
    this.dateForm.addEventListener("change", () => {
      this.requestData(this.url);
      this.syncSortStateToTable();
    });
  }
  /** Connect filter */
  setFilter() {
    if (this.filterSelector === "")
      return;
    this.filter = document.querySelector(this.filterSelector);
    waitForHydrated.waitForHydrated(this.filter, () => this.setFilterForm());
    this.filter.addEventListener("uxFilterChange", () => this.requestData(this.url));
  }
  /** Connect sort form */
  setSortForm() {
    if (this.sortFormSelector === "")
      return;
    this.sortForm = document.querySelector(this.sortFormSelector);
    if (this.sortForm === null)
      return;
    this.sortForm.addEventListener("submit", preventDefaultEvent);
  }
  /** Connect total number */
  setUxTabElement() {
    if (this.uxTabSelector === "")
      return;
    this.uxTabElement = document.querySelector(this.uxTabSelector);
  }
  /** Connect filtered number */
  setFilteredNumberElements() {
    if (this.filteredNumberSelector === "")
      return;
    this.filteredNumberElements = document.querySelectorAll(this.filteredNumberSelector);
  }
  setFilterForm() {
    this.filterForm = this.filter.querySelector("form");
    if (this.filterForm === null)
      return;
    this.filterForm.addEventListener("submit", preventDefaultEvent);
  }
  syncSortStateToTable() {
    if (this.table === null || this.sortForm === null)
      return;
    const { value } = this.sortForm.querySelector("input");
    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";
    }
  }
  updateNumbers(filtered, total) {
    writeToElements(this.filteredNumberElements, filtered.toString());
    this.updateTabNumber(total);
  }
  updateTabNumber(total) {
    if (this.uxTabElement == null)
      return;
    var totalNumberText = "(" + total.toString() + ")";
    if (this.totalNumberPrefix !== "") {
      totalNumberText =
        this.totalNumberPrefix + " (" + total.toString() + ")";
    }
    this.uxTabElement.name = totalNumberText;
  }
  /** 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("input").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);
      });
    }
  }
  /** post filter, date and sort settings to get data from the endpoint */
  initialRequest() {
    this.requestData(this.url);
  }
  getSerializedFormData() {
    return [
      serializeForm.serializeForm(this.dateForm),
      serializeForm.serializeForm(this.filterForm),
      serializeForm.serializeForm(this.sortForm),
    ]
      .filter((str) => str !== "")
      .join("&");
  }
  /** Send the real request and handle response */
  requestData(url) {
    if (url === "")
      return;
    const options = isMockUrl(url)
      ? {}
      : {
        method: "POST",
        body: this.getSerializedFormData(),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      };
    api.api(url, options).then((data) => {
      if (this.url === url) {
        this.clearExistingData();
      }
      this.appendItemsToTable(data.items);
      this.updateNumbers(data.filteredCount, data.totalCount);
      this.nextPage = data.nextPage || "";
      if (this.nextPage !== "" && this.scrollSensor !== null) {
        this.scrollSensor.hasFired = false;
      }
    });
  }
  clearExistingData() {
    if (this.tableBody !== null)
      this.tableBody.textContent = "";
  }
  appendItemsToTable(items) {
    if (this.tableBody === null)
      return;
    this.tableBody.insertAdjacentHTML("beforeend", items.map(row).join(""));
  }
  render() {
    return null;
  }
  static get watchers() { return {
    "dateFormSelector": ["setDateForm"],
    "filterSelector": ["setFilter"],
    "sortFormSelector": ["setSortForm"],
    "uxTabSelector": ["setUxTabElement"],
    "filteredNumberSelector": ["setFilteredNumberElements"],
    "tableSelector": ["setTable"],
    "scrollSensorSelector": ["setScrollSensor"],
    "url": ["initialRequest"]
  }; }
};
function isMockUrl(url) {
  return url.indexOf("mock-data/") > -1;
}
function preventDefaultEvent(e) {
  e.preventDefault();
}
function writeToElements(nodes, text) {
  if (nodes === null)
    return;
  [].forEach.call(nodes, (element) => (element.textContent = text));
}
DataControllerShopItemQuote.style = dataControllerShopItemCss;

exports.ux_iws_data_controller_shop_item_quote = DataControllerShopItemQuote;