@vidal-community/vidal-web-components/vidal-search/vidal-search.js

Vidal Web Components

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var VidalSearch_1;
import { html, LitElement } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
import { styleMap } from 'lit/directives/style-map.js';
import { IndicationGroupResult } from './model/indication-group-result';
import { cache } from 'lit/directives/cache.js';
import { IndicationResult } from './model/indication-result';
import { DrugResultFilter, SortState } from './model/drug-result-filters';
import { leftCurveArrow, redArrowDown, spinner, warningIcon, whiteArrowDown, } from './images';
import { style } from './css';
import { FilterType } from './model/filter-type';
import { ActivePrinciple } from './model/active-principle';
import { ActiveExcipientHelpers } from './active-excipient-helpers';
import { checkboxesStyleMap, helpersCss } from './helpers.css';
let VidalSearch = VidalSearch_1 = class VidalSearch extends LitElement {
    constructor() {
        super();
        this.activeExcipientHelpers = new ActiveExcipientHelpers();
        this.drugResults = [];
        this.indicationGroupResults = [];
        this.activePrinciples = [];
        this.isLoading = false;
        this.searchByIndicationOrActivePrinciple = false;
        this.showFilterTypeDropDown = false;
        this.temporaryDrugResult = [];
        this.currentIndicationResult = {};
        this.currentActivePrinciple = {};
        this.searchByIndicationResultWarningMessage = '';
        this._filterType = FilterType.LABEL;
        this.sortsState = [];
        this.searchApiService = () => Promise.reject('searchApiService is undefined');
        this.drugsDataApiService = () => Promise.reject('drugsDataApiService is undefined');
        this.drugFacetsApiService = () => Promise.reject('drugFacetsApiService is undefined');
        this.activeExcipientsApiService = () => Promise.reject('searchApiService is undefined');
        this.emitOnProductClickEvent = () => { };
        this.emitOnSortEvent = () => { };
        window.addEventListener('clickOnActiveExcipientCheckbox', () => {
            if (this.filterType === FilterType.INDICATION) {
                this.searchDrugsByIndication(this.currentIndicationResult);
            }
            else if (this.filterType === FilterType.ACTIVE_PRINCIPLE) {
                this.searchDrugsByActivePrinciple(this.currentActivePrinciple);
            }
            else {
                this.search();
            }
        });
    }
    get filterType() {
        return this._filterType;
    }
    set filterType(type) {
        var _a;
        this.showFilterTypeDropDown = false;
        this._filterType = type;
        this.activeExcipientHelpers.resetActiveExcipients();
        (_a = this.excipientsHtmlElement) === null || _a === void 0 ? void 0 : _a.classList.remove('opened');
        this.search();
    }
    get filterTypeLabel() {
        switch (this.filterType) {
            case FilterType.LABEL:
                return 'Par libellé';
            case FilterType.INDICATION:
                return 'Par indication';
            case FilterType.ACTIVE_PRINCIPLE:
                return 'Par principe actif';
            default:
                return '';
        }
    }
    get searchInput() {
        var _a, _b;
        return (_b = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#search-input input')) === null || _b === void 0 ? void 0 : _b.value;
    }
    set sortState(sortState) {
        if (sortState) {
            this.sortsState.push({
                filter: DrugResultFilter.from(sortState.column),
                order: sortState.order,
            });
            this.search();
        }
    }
    get activeExcipients() {
        return this.activeExcipientHelpers.activeExcipients;
    }
    async firstUpdated() {
        var _a;
        ((_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#search-input input')).addEventListener('focus', () => { var _a; return (_a = this.renderRoot.querySelector('#search-input-helper')) === null || _a === void 0 ? void 0 : _a.remove(); });
    }
    search() {
        this.resetResults();
        if (this.filterType === FilterType.LABEL) {
            this.searchDrugByLabel();
            this.searchByIndicationOrActivePrinciple = false;
            return;
        }
        if (this.filterType === FilterType.INDICATION) {
            this.searchIndications();
            this.searchByIndicationOrActivePrinciple = true;
            return;
        }
        if (this.filterType === FilterType.ACTIVE_PRINCIPLE) {
            this.searchActivePrinciples();
            this.searchByIndicationOrActivePrinciple = true;
            return;
        }
    }
    resetResults() {
        this.searchByIndicationResultWarningMessage = '';
        this.indicationGroupResults = [];
        this.drugResults = [];
        this.activePrinciples = [];
    }
    async searchDrugByLabel() {
        var _a;
        if (((_a = this.searchInput) === null || _a === void 0 ? void 0 : _a.length) < 3) {
            return;
        }
        await this.retrieveDrugsFrom([
            `/rest/api/search?q=${this.searchInput}&filter=PRODUCT&filter=VMP&filter=LPPR`,
            `/rest/api/search?q=${this.searchInput}&filter=PACKAGE&type=ACCESSORY&type=MISCELLANEOUS&type=DIETETIC&type=NON_PHARMACEUTICAL`,
        ]);
        this.filterByVMPAndProduct();
    }
    async searchIndications() {
        const domParser = new DOMParser();
        this.isLoading = true;
        const url = this.searchInput.trim().length < 3
            ? `/rest/api/indications/indication-groups?start-page=1&page-size=10000`
            : `/rest/api/indications?q=${this.searchInput}`;
        const xml = await (await this.searchApiService(url)).text();
        const dom = domParser.parseFromString(xml, 'text/xml');
        this.indicationGroupResults = [...dom.querySelectorAll('entry')]
            .filter((entry) => entry.getAttribute('vidal:categories') === 'INDICATION_GROUP')
            .map((entry) => {
            var _a, _b;
            const indicationGroupId = Number(entry.getElementsByTagName('vidal:id')[0].textContent);
            return new IndicationGroupResult(indicationGroupId, (_b = (_a = entry.querySelector('title')) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : '', []);
        });
        this.isLoading = false;
    }
    async searchActivePrinciples() {
        if (this.searchInput.length < 3) {
            return;
        }
        const domParser = new DOMParser();
        this.isLoading = true;
        const xml = await (await this.searchApiService(`/rest/api/molecules?q=${this.searchInput}`)).text();
        const dom = domParser.parseFromString(xml, 'text/xml');
        this.activePrinciples = [...dom.querySelectorAll('entry')].map((entry) => {
            var _a, _b, _c;
            const activePrincipleId = Number(entry.getElementsByTagName('vidal:id')[0].textContent);
            return new ActivePrinciple(activePrincipleId, (_c = (_b = (_a = entry.querySelector('title')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.toLocaleUpperCase()) !== null && _c !== void 0 ? _c : '');
        });
        this.isLoading = false;
    }
    searchDrugsByIndication(indicationResult) {
        this.resetResults();
        if (indicationResult) {
            this.currentIndicationResult = indicationResult;
            this.searchByIndicationResultWarningMessage = indicationResult
                ? `Résultats pour l'indication ${indicationResult.label.toLocaleLowerCase()}`
                : '';
            this.retrieveDrugsFrom([
                `/rest/api/${VidalSearch_1.getIndicationResultType(indicationResult)}/${indicationResult.id}/products?start-page=1&page-size=1000`,
                `/rest/api/${VidalSearch_1.getIndicationResultType(indicationResult)}/${indicationResult.id}/vmps?start-page=1&page-size=1000`,
            ]).then(() => {
                this.searchByIndicationOrActivePrinciple = false;
                this.filterByVMPAndProduct();
            });
            const options = {
                detail: {
                    indicationResult,
                    type: VidalSearch_1.getIndicationResultType(indicationResult).toLocaleUpperCase(),
                },
                bubbles: true,
                composed: true,
            };
            this.dispatchEvent(new CustomEvent('clickOnIndication', options));
        }
    }
    searchDrugsByActivePrinciple(activePrinciple) {
        this.resetResults();
        if (activePrinciple) {
            this.currentActivePrinciple = activePrinciple;
            this.searchByIndicationResultWarningMessage = activePrinciple
                ? `Résultats pour la substance active :  ${activePrinciple.label.toLocaleLowerCase()}`
                : '';
            this.retrieveDrugsFrom([
                `/rest/api/molecule/active-substance/${activePrinciple.id}/products?start-page=1&page-size=10000`,
                `/rest/api/molecule/active-substance/${activePrinciple.id}/vmps?start-page=1&page-size=10000`,
            ]).then(() => {
                this.searchByIndicationOrActivePrinciple = false;
                this.filterByVMPAndProduct();
            });
        }
    }
    async retrieveDrugsFrom(endPoints) {
        const domParser = new DOMParser();
        const drugIds = await this.getDrugsDataApiServiceRequestBody(endPoints, domParser);
        const requestBody = `<?xml version="1.0" encoding="UTF-8"?>
      <request>
      <ids>
        ${drugIds.map((id) => `<id>${id}</id>`).join('')}
      </ids>
      </request>`;
        const myHeaders = new Headers();
        myHeaders.append('Content-Type', 'text/xml');
        const xmlWithPrices = await (await this.drugsDataApiService('/rest/api/search/ids', requestBody, 'POST', {
            headers: myHeaders,
        })).text();
        const domWithPrices = domParser.parseFromString(xmlWithPrices, 'text/xml');
        const lpprIds = drugIds
            .filter((id) => id.includes('lppr'))
            .map((id) => id.split('/')[3])
            .map((id) => Number(id))
            .filter((id) => id < 1000000);
        console.log(lpprIds);
        const lpprXmls = await Promise.all(lpprIds.map(async (lpprid) => {
            return await (await this.drugsDataApiService('/rest/api/lppr/' + lpprid, null, 'GET', {
                headers: myHeaders,
            })).text();
        }));
        const lpprsWithPrice = lpprXmls
            .map((lpprXml) => domParser.parseFromString(lpprXml, 'text/xml'))
            .map((dom) => dom.querySelectorAll('entry'))
            .map((entries) => [...entries].filter((entry) => lpprIds
            .map((id) => id.toString())
            .includes(entry.querySelector('id').textContent.split('/')[3]))[0])
            .map((entryElement) => {
            var _a, _b, _c, _d, _e, _f, _g, _h;
            const maxPrice = (_b = (_a = Array.from(entryElement.getElementsByTagName('vidal:refundBase'))[0]) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : '';
            const minPrice = (_d = (_c = Array.from(entryElement.getElementsByTagName('vidal:refundBase'))[0]) === null || _c === void 0 ? void 0 : _c.textContent) !== null && _d !== void 0 ? _d : '';
            const refundRate = Array.from(entryElement.getElementsByTagName('vidal:refundRate'))[0].getAttribute('rate');
            return {
                id: (_f = (_e = entryElement.getElementsByTagName('id')[0]) === null || _e === void 0 ? void 0 : _e.textContent) !== null && _f !== void 0 ? _f : '',
                label: (_h = (_g = entryElement.querySelector('title')) === null || _g === void 0 ? void 0 : _g.textContent) !== null && _h !== void 0 ? _h : '',
                price: { min: minPrice, max: maxPrice },
                refundRate: refundRate,
                vmp: entryElement.getAttribute('vidal:categories') === 'VMP',
            };
        });
        if (this.sortsState.length === 0) {
            this.sortsState.push({ filter: DrugResultFilter.NAME, order: 'ASC' });
        }
        this.drugResults = [...domWithPrices.querySelectorAll('entry')].map((entryElement) => {
            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
            const maxPrice = (_b = (_a = Array.from(entryElement.getElementsByTagName('vidal:maxUcdRangePrice'))[0]) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : '';
            const minPrice = (_d = (_c = Array.from(entryElement.getElementsByTagName('vidal:minUcdRangePrice'))[0]) === null || _c === void 0 ? void 0 : _c.textContent) !== null && _d !== void 0 ? _d : '';
            const refundRate = (_f = (_e = Array.from(entryElement.getElementsByTagName('vidal:refundRate'))[0]) === null || _e === void 0 ? void 0 : _e.textContent) !== null && _f !== void 0 ? _f : '';
            return {
                id: (_h = (_g = entryElement.getElementsByTagName('id')[0]) === null || _g === void 0 ? void 0 : _g.textContent) !== null && _h !== void 0 ? _h : '',
                label: (_k = (_j = entryElement.querySelector('title')) === null || _j === void 0 ? void 0 : _j.textContent) !== null && _k !== void 0 ? _k : '',
                price: { min: minPrice, max: maxPrice },
                refundRate: refundRate,
                vmp: entryElement.getAttribute('vidal:categories') === 'VMP',
            };
        });
        this.drugResults.push(...lpprsWithPrice);
        this.sortsState.forEach((sortState) => {
            this.drugResults = this.drugResults.sort(sortState.filter.getCorrespondingSort(sortState.order));
        });
        this.temporaryDrugResult = this.drugResults;
        this.isLoading = false;
    }
    async getDrugsDataApiServiceRequestBody(endPoints, domParser) {
        this.isLoading = true;
        const drugIds = [];
        await Promise.all(endPoints.map(async (endPoint) => {
            const drugXml = await (await this.searchApiService(endPoint)).text();
            const drugDom = domParser.parseFromString(drugXml, 'text/xml');
            const endPointIds = await this.extractIdsFromDom(drugDom);
            drugIds.push(...endPointIds);
        }));
        await this.activeExcipientHelpers.getActiveExcipients(this.activeExcipientsApiService, drugIds);
        const filteredDrugIds = await this.getFilteredDrugIds(drugIds, domParser);
        return filteredDrugIds;
    }
    async getFilteredDrugIds(ids, domParser) {
        const idsToRemove = [];
        await Promise.all(this.activeExcipients.map(async (activeExcipient) => {
            await this.setDrugIdsToRemove(activeExcipient, ids, domParser, idsToRemove);
        }));
        const getDigits = (id) => id.match(/\d+/)[0];
        return ids.filter((id) => !idsToRemove.includes(getDigits(id)));
    }
    async setDrugIdsToRemove(activeExcipient, ids, domParser, idsToRemove) {
        if (!activeExcipient.active) {
            const myHeaders = new Headers();
            myHeaders.append('Content-Type', 'text/xml');
            const xml = await (await this.drugFacetsApiService('/rest/api/filtered-drugs-with-facets', this.getFilteredDrugsRequestBody(ids, activeExcipient.id), { method: 'POST', headers: myHeaders })).text();
            const dom = domParser.parseFromString(xml, 'text/xml');
            [...dom.querySelectorAll('entry')].forEach((entry) => {
                var _a, _b;
                idsToRemove.push((_b = (_a = entry.getElementsByTagName('vidal:id')[0]) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : '');
            });
        }
    }
    getFilteredDrugsRequestBody(ids, moleculeId) {
        let drugTags = '';
        ids.forEach((id) => {
            drugTags += '<drug>' + id.replace(/<\/?id>/g, '') + '</drug>';
        });
        const moleculeTag = '<facet type="with" name="ACTIVE_EXCIPIENT" uri="' + moleculeId + '" />';
        return `<?xml version="1.0" encoding="UTF-8"?><filtered-drugs>
      <drugs> 
         ${drugTags}
      </drugs>
      <facets>
        ${moleculeTag}
      </facets>
    </filtered-drugs>`;
    }
    async extractIdsFromDom(dom) {
        return [...dom.querySelectorAll('entry')]
            .filter((entry) => {
            var _a, _b, _c, _d, _e;
            return entry.getAttribute('vidal:categories') === 'LPPR' ||
                entry.getAttribute('vidal:categories') === 'VMP' ||
                ((_a = entry.getElementsByTagName('vidal:itemType')[0]) === null || _a === void 0 ? void 0 : _a.textContent) ===
                    'VIDAL' ||
                ((_b = entry.getElementsByTagName('vidal:itemType')[0]) === null || _b === void 0 ? void 0 : _b.textContent) ===
                    'MISCELLANEOUS' ||
                (((_c = entry.getElementsByTagName('vidal:itemType')[0]) === null || _c === void 0 ? void 0 : _c.textContent) ===
                    'ACCESSORY' &&
                    entry.getAttribute('vidal:categories') === 'PACKAGE') ||
                (((_d = entry.getElementsByTagName('vidal:itemType')[0]) === null || _d === void 0 ? void 0 : _d.textContent) ===
                    'DIETETIC' &&
                    entry.getAttribute('vidal:categories') === 'PACKAGE') ||
                (((_e = entry.getElementsByTagName('vidal:itemType')[0]) === null || _e === void 0 ? void 0 : _e.textContent) ===
                    'NON_PHARMACEUTICAL' &&
                    entry.getAttribute('vidal:categories') === 'PACKAGE');
        })
            .map((entry) => entry.querySelector('id'))
            .filter((element) => !!element)
            .map((idElement) => `${idElement.textContent}`);
    }
    async retrieveIndicationsFromIndicationGroup(indicationGroupId) {
        var _a;
        const indicationGroupResult = (_a = this.indicationGroupResults) === null || _a === void 0 ? void 0 : _a.find((indicationGroup) => indicationGroup.id === indicationGroupId);
        if (indicationGroupResult) {
            const domParser = new DOMParser();
            const myHeaders = new Headers();
            myHeaders.append('Content-Type', 'text/xml');
            const indicationsXml = await (await this.searchApiService(`/rest/api/indication-group/${indicationGroupId}/indications`)).text();
            const indicationsDom = domParser.parseFromString(indicationsXml, 'text/xml');
            indicationGroupResult.indicationResults = [
                ...indicationsDom.querySelectorAll('entry'),
            ]
                .filter((entry) => entry.getAttribute('vidal:categories') === 'INDICATION')
                .map((entry) => {
                var _a;
                const indicationResultId = entry.getElementsByTagName('vidal:id')[0].textContent;
                const indicationResultName = (_a = entry.getElementsByTagName('vidal:name')[0].textContent) !== null && _a !== void 0 ? _a : '';
                return new IndicationResult(Number(indicationResultId), indicationResultName);
            });
        }
    }
    filterByVMPAndProduct() {
        var _a, _b, _c, _d;
        if (((_a = this.vmpCheckbox) === null || _a === void 0 ? void 0 : _a.checked) && !((_b = this.productCheckbox) === null || _b === void 0 ? void 0 : _b.checked)) {
            this.drugResults = this.temporaryDrugResult.filter((drugResult) => drugResult.vmp);
        }
        else if (((_c = this.productCheckbox) === null || _c === void 0 ? void 0 : _c.checked) && !((_d = this.vmpCheckbox) === null || _d === void 0 ? void 0 : _d.checked)) {
            this.drugResults = this.temporaryDrugResult.filter((drugResult) => !drugResult.vmp);
        }
        else {
            this.drugResults = this.temporaryDrugResult;
        }
        this.sortsState.forEach((sortState) => {
            this.drugResults = this.drugResults.sort(sortState.filter.getCorrespondingSort(sortState.order));
        });
    }
    onShowActiveExcipientButtonClickHandler() {
        this.excipientsHtmlElement.classList.contains('opened')
            ? this.excipientsHtmlElement.classList.remove('opened')
            : this.excipientsHtmlElement.classList.add('opened');
    }
    render() {
        return html `
      <div id="search-container" class="flex flex-col align-center">
        <div id="search-input-container" class="flex flex-col justify-center">
          <div id="search-input-helper" class="flex flex-row align-center">
            <div><img src="${leftCurveArrow}" alt="left" width="60px" /></div>
            Pour rechercher un médicament,
            <br />commencer par taper son nom dans la barre de recherche
          </div>
          <div id="search-input-wrapper" class="flex flex-row align-center">
            <div id="search-input-content" class="flex flex-row">
              <div id="search-input" class="flex flex-row align-center">
                <input
                  style="width: 322px;height: 45px;"
                  type="text"
                  @keyup="${() => this.handleSearchInputKeyup()}"
                />
              </div>
              <div id=" filter-types" class="flex flex-col align-end">
                <div id="filter-types-button">
                  <div
                    id="filter-types-inner"
                    class="flex flex-row align-center"
                    @click="${() => (this.showFilterTypeDropDown =
            !this.showFilterTypeDropDown)}"
                  >
                    <div class="label">${this.filterTypeLabel}</div>
                    <div class="icon">
                      <img
                        src="${whiteArrowDown}"
                        alt="arrowDown"
                        width="20px"
                      />
                    </div>
                  </div>
                </div>
                ${when(this.showFilterTypeDropDown, () => html ` <div id="filter-types-options" class="flex flex-col">
                      <div
                        class="${this.filterType === FilterType.LABEL
            ? 'filter-type-selected'
            : ''} ${FilterType.LABEL.toLowerCase()}"
                        @click="${() => (this.filterType = FilterType.LABEL)}"
                      >
                        Par libellé
                      </div>
                      <div
                        class="${this.filterType === FilterType.ACTIVE_PRINCIPLE
            ? 'filter-type-selected'
            : ''} ${FilterType.ACTIVE_PRINCIPLE.toLowerCase()}"
                        @click="${() => (this.filterType = FilterType.ACTIVE_PRINCIPLE)}"
                      >
                        Par principe actif
                      </div>
                      <div
                        class="${this.filterType === FilterType.INDICATION
            ? 'filter-type-selected'
            : ''} ${FilterType.INDICATION.toLowerCase()}"
                        @click="${() => (this.filterType = FilterType.INDICATION)}"
                      >
                        Par indication
                      </div>
                    </div>`)}
              </div>
            </div>
          </div>
        </div>
        ${when(this.searchByIndicationResultWarningMessage, () => html ` <div class="flex flex-row" style="justify-content:  center">
              <div
                class="search-by-indication-result-warning-message flex align-center"
              >
                <div class="flex align-center gap-5" style="width: fit-content">
                  <img
                    height="20px"
                    src="${VidalSearch_1.warningIcon}"
                    alt="warning icon"
                  />
                  <span>${this.searchByIndicationResultWarningMessage}</span>
                </div>
              </div>
            </div>`)}
        ${when(!this.searchByIndicationOrActivePrinciple, () => {
            var _a, _b, _c, _d;
            return html ` <div id="drug-types" class="flex flex-row">
              <div class="filter flex">
                <input
                  class="cursor-pointer"
                  style="${styleMap(checkboxesStyleMap((_b = (_a = this.vmpCheckbox) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : true))}"
                  type="checkbox"
                  name="vmp"
                  checked
                  @click="${this.filterByVMPAndProduct}"
                />
                <label
                  class="cursor-pointer"
                  for="VMP"
                  @click="${() => this.vmpCheckbox.click()}"
                  >Médicament virtuel</label
                >
              </div>
              <div class="filter flex">
                <input
                  class="cursor-pointer"
                  style="${styleMap(checkboxesStyleMap((_d = (_c = this.productCheckbox) === null || _c === void 0 ? void 0 : _c.checked) !== null && _d !== void 0 ? _d : true))}"
                  type="checkbox"
                  name="product"
                  checked
                  @click="${this.filterByVMPAndProduct}"
                />
                <div
                  class="cursor-pointer"
                  for="product"
                  @click="${() => this.productCheckbox.click()}"
                >
                  Spécialité
                </div>
              </div>
            </div>`;
        })}
        ${when(this.activeExcipients.length > 0, () => html ` <div
              id="active-excipients-display-button"
              @click="${() => this.onShowActiveExcipientButtonClickHandler()}"
            >
              FILTRER PAR EXCIPIENTS ACTIFS
            </div>`)}
        ${this.activeExcipientHelpers.renderActiveExcipients(this.renderRoot)}
        <div class="table flex flex-col">
          ${when(this.drugResults.length > 0, () => html ` <div class="title-row flex flex-row">
                <span
                  class="label ${this.addCorrespondingFilterOrderClass(DrugResultFilter.NAME)}"
                  @click="${() => this.sortBy(DrugResultFilter.NAME)}"
                  >Nom</span
                >
                ${cache(this.searchByIndicationOrActivePrinciple
            ? ''
            : html `<span class="price ${this.addCorrespondingFilterOrderClass(DrugResultFilter.PRICE)}"
                                                                 @click="${() => this.sortBy(DrugResultFilter.PRICE)}" ">Prix</span>
                                                    <span class="refund-rate">Taux de remboursement</span>`)}
              </div>`)}
          <div class="table-body">
            ${when(this.isLoading, () => html ` <div class="spinner flex">
                  <img
                    src="${VidalSearch_1.spinner}"
                    width="75px"
                    alt="spinner"
                  />
                </div>`)}
            ${when(this.drugResults.length > 0, () => this.renderDrugs())}
            ${when(this.indicationGroupResults.length > 0, () => this.renderIndicationGroupResults())}
            ${when(this.activePrinciples.length > 0, () => this.renderActivePrinciples())}
          </div>
        </div>
      </div>
    `;
    }
    handleSearchInputKeyup() {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
            this.activeExcipientHelpers.resetActiveExcipients();
            this.search.apply(this);
        }, 500);
    }
    renderDrugs() {
        return this.drugResults.map((drugResult) => {
            var _a;
            return html ` <div class="row">
        <span
          class="label drug-cell"
          @click="${() => this.emitOnProductClickEvent(drugResult.id)}"
          >${drugResult.label}</span
        >
        <span class="price drug-cell"
          >${(_a = VidalSearch_1.displayPriceOrRange(drugResult.price)) === null || _a === void 0 ? void 0 : _a.split('.').join(',')}</span
        >
        <span class="refund-rate drug-cell">${drugResult.refundRate}</span>
      </div>`;
        });
    }
    renderIndicationGroupResults() {
        var _a;
        return html `${cache((_a = this.indicationGroupResults) === null || _a === void 0 ? void 0 : _a.map((indicationGroup) => {
            return html ` <div
          class="row ${indicationGroup.displayIndications ? 'opened' : ''}"
        >
          <div class="label indication-group-cell">
            <div class="indication-group-name">
              <span
                class="display-indications"
                @click="${(e) => this.toggleDisplayIndications(e, indicationGroup)}"
                ><img
                  src="${VidalSearch_1.redArrowDown}"
                  alt="arrow"
                  style="${indicationGroup.displayIndications
                ? ''
                : 'transform: rotate(-90deg);'}"
              /></span>
              <span
                @click="${() => this.searchDrugsByIndication(indicationGroup)}"
                data-label="${indicationGroup.label}"
                data-id="${indicationGroup.id}"
                >${indicationGroup.label}</span
              >
            </div>
            <div
              class="indications ${indicationGroup.displayIndications
                ? 'opened'
                : ''}"
            >
              ${indicationGroup.displayIndications
                ? html `${indicationGroup.indicationResults.map((indication) => {
                    return html `<span
                      class="indication-cell"
                      @click="${() => this.searchDrugsByIndication(indication)}"
                      data-id="${indication.id}"
                      >${indication.label}</span
                    >`;
                })}`
                : ''}
            </div>
          </div>
        </div>`;
        }))}`;
    }
    renderActivePrinciples() {
        return html `${this.activePrinciples.map((activePrinciple) => {
            return html ` <div class="row">
        <span
          @click="${() => this.searchDrugsByActivePrinciple(activePrinciple)}"
          data-id="${activePrinciple.id}"
          class="label drug-cell"
          >${activePrinciple.label}</span
        >
      </div>`;
        })}`;
    }
    async toggleDisplayIndications(e, indicationGroupResult) {
        console.log(e);
        e.stopPropagation();
        if (!indicationGroupResult.displayIndications &&
            indicationGroupResult.indicationResults.length === 0) {
            await this.retrieveIndicationsFromIndicationGroup(indicationGroupResult.id);
        }
        indicationGroupResult.displayIndications =
            !indicationGroupResult.displayIndications;
        await this.requestUpdate();
    }
    addCorrespondingFilterOrderClass(drugResultFilter) {
        var _a;
        const currentOrder = (_a = this.sortsState.find((f) => f.filter === drugResultFilter)) === null || _a === void 0 ? void 0 : _a.order;
        if (currentOrder === 'ASC') {
            return 'sort-asc';
        }
        if (currentOrder === 'DSC') {
            return 'sort-dsc';
        }
        return '';
    }
    static displayPriceOrRange(price) {
        var _a, _b;
        if (price && (price.min || price.max)) {
            if (price.min === price.max) {
                return price.min + ' €';
            }
            return `${(_a = price.min) !== null && _a !== void 0 ? _a : '-'} € - ${(_b = price.max) !== null && _b !== void 0 ? _b : '-'} €`;
        }
        return '';
    }
    sortBy(filter) {
        this.sortsState
            .filter((f) => f.filter !== filter)
            .forEach((fs) => delete fs.order);
        if (this.sortsState.map((fs) => fs.filter).indexOf(filter) === -1) {
            this.sortsState.push({ filter: filter, order: 'DSC' });
        }
        this.sortsState.filter((f) => f.filter === filter)[0].order =
            this.sortsState.filter((f) => f.filter === filter)[0].order === 'ASC'
                ? 'DSC'
                : 'ASC';
        this.drugResults.sort(this.sortsState.filter((f) => f.filter === filter)[0].order === 'ASC'
            ? filter.sortASC
            : filter.sortDSC);
        this.emitOnSortEvent(new SortState(filter.id, this.sortsState.filter((f) => f.filter === filter)[0].order));
        this.requestUpdate();
    }
    static getIndicationResultType(indicationResult) {
        return indicationResult instanceof IndicationGroupResult
            ? 'indication-group'
            : 'indication';
    }
};
VidalSearch.warningIcon = warningIcon;
VidalSearch.spinner = spinner;
VidalSearch.styles = [style, helpersCss];
VidalSearch.leftCurveArrow = leftCurveArrow;
VidalSearch.redArrowDown = redArrowDown;
VidalSearch.whiteArrowDown = whiteArrowDown;
__decorate([
    state()
], VidalSearch.prototype, "activeExcipientHelpers", void 0);
__decorate([
    state()
], VidalSearch.prototype, "drugResults", void 0);
__decorate([
    state()
], VidalSearch.prototype, "indicationGroupResults", void 0);
__decorate([
    state()
], VidalSearch.prototype, "activePrinciples", void 0);
__decorate([
    state()
], VidalSearch.prototype, "isLoading", void 0);
__decorate([
    state()
], VidalSearch.prototype, "searchByIndicationOrActivePrinciple", void 0);
__decorate([
    state()
], VidalSearch.prototype, "showFilterTypeDropDown", void 0);
__decorate([
    query('#active-excipients')
], VidalSearch.prototype, "excipientsHtmlElement", void 0);
__decorate([
    query('input[name=vmp]')
], VidalSearch.prototype, "vmpCheckbox", void 0);
__decorate([
    query('input[name=product]')
], VidalSearch.prototype, "productCheckbox", void 0);
__decorate([
    property()
], VidalSearch.prototype, "searchApiService", void 0);
__decorate([
    property()
], VidalSearch.prototype, "drugsDataApiService", void 0);
__decorate([
    property()
], VidalSearch.prototype, "drugFacetsApiService", void 0);
__decorate([
    property()
], VidalSearch.prototype, "activeExcipientsApiService", void 0);
__decorate([
    property()
], VidalSearch.prototype, "emitOnProductClickEvent", void 0);
__decorate([
    property({ attribute: false })
], VidalSearch.prototype, "sortState", null);
__decorate([
    property()
], VidalSearch.prototype, "emitOnSortEvent", void 0);
VidalSearch = VidalSearch_1 = __decorate([
    customElement('vidal-search')
], VidalSearch);
export { VidalSearch };
//# sourceMappingURL=vidal-search.js.map