{"version":3,"file":"productSampleSelection-c9fc8616.js","sources":["../../../../../../src/scripts/modules/productSampleSelection.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport { Filter, TableAttribute, SKU } from './productSample';\n\nclass ProductSampleSelection extends Component {\n  filters: Filter[] | [];\n  tableAttributes: TableAttribute[] | [];\n  skus: SKU[];\n  clicked: number;\n  clickedValue: string | undefined;\n  selectionIndex: number;\n  showedQuestions: number;\n  forAFreeSample: string;\n  originalSkus: SKU[];\n\n  constructor(el: HTMLElement, props: { Filters: Filter[], TableAttributes: TableAttribute[], Skus: SKU[] }) {\n    super(el);\n    this.filters = props.Filters;\n    this.tableAttributes = props.TableAttributes;\n    this.skus = props.Skus;\n    this.clicked = 0;\n    this.selectionIndex = 0;\n    this.showedQuestions = 0;\n    this.forAFreeSample = this.el.dataset.forAFreeSample || '';\n    this.originalSkus = [...this.skus];\n    this.displayNextFilter();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      sampleSelection: this.el.querySelector<HTMLElement>(\n        '.product-detail__sample-selection'\n      )\n    };\n  }\n\n  addListeners() {\n    this.el.addEventListener('change', (event) => {\n      const target = event.target as HTMLInputElement;\n      if (target.type === 'radio') {\n        this.handleOptionSelect(target);\n      }\n    });\n  }\n\n  handleOptionSelect(target: HTMLInputElement) {\n    const selectionIndex = this.filters.findIndex((filter) => filter.SKUPropertyName === target.name);\n    if (this.selectionIndex > selectionIndex) {\n      this.selectionIndex = selectionIndex;\n\n      // Remove all filters after the current selection\n      const sections = this.el.querySelectorAll(\n        '.product-detail__sample-selection-section'\n      );\n      sections.forEach((section, index) => {\n        if (index > selectionIndex) {\n          section.remove();\n        }\n      });\n    }\n\n    this.selectionIndex++;\n    this.displayNextFilter();\n  }\n\n  displayNextFilter() {\n    const nextFilter = this.filters[this.selectionIndex];\n    if (nextFilter) {\n      // Get all values for nextFilter in the this.skus array without duplicating\n      let skus = this.skus;\n\n      this.filters.forEach((filter) => {\n        // Get value for filter\n        const selectedFilter = this.el.querySelector(\n          `input[name=\"${filter.SKUPropertyName}\"]:checked`\n        );\n        // check here after the first filter\n        if (selectedFilter) {\n          skus = skus.filter((sku) => sku[filter.SKUPropertyValue] === (selectedFilter as HTMLInputElement).value);\n        }\n      });\n\n      const valuesArray = skus.map((sku) => sku[nextFilter.SKUPropertyValue]);\n      const idsArray = skus.map((sku) => sku.ID);\n      const labelsArray = skus.map((sku) => sku[nextFilter.SKUPropertyName]);\n\n      const values = valuesArray.filter(\n        (value, index, self) => self.indexOf(value) === index\n      );\n      const labels = labelsArray.filter(\n        (value, index, self) => self.indexOf(value) === index\n      );\n      const ids = idsArray.filter(\n        (value, index, self) => self.indexOf(value) === index\n      );\n\n      if (values.length > 1) {\n        // Display the filter\n        if (this.clickedValue !== '') {\n          this.displayFilter(nextFilter, values, labels, ids);\n        }\n      } else {\n        // Add the hidden filter and skip to the next filter\n        this.selectionIndex++;\n        this.displayHiddenFilter(nextFilter, values[0]);\n        this.displayNextFilter();\n      }\n    } else {\n      // Display results table\n      this.displayResultsTable();\n    }\n  }\n\n  displayFilter(filter: Filter, values: string[], labels: string[], ids: string[]) {\n    const section = document.createElement('div');\n    section.classList.add('product-detail__sample-selection-section');\n    const filterValues = values\n      .map(\n        (value, i) =>\n          value &&\n          `<label><input type='radio' name='${filter.SKUPropertyName\n          }' value='${value}' data-sku-id='${ids.find((id) =>\n            this.skus.find(\n              (sku) => sku.ID === id && sku[filter.SKUPropertyValue] === value\n            )\n          )}'/>\n            <span>${labels[i].split('<br>').join(' ')}</span>\n          </label>`\n      )\n      .join('');\n\n    section.innerHTML = `\n        <h2 class='product-detail__sample-selection-heading'>${this.showedQuestions < 1 ? this.forAFreeSample.concat(' ') : ''}${filter.Text}</h2>\n        <div class='product-detail__sample-selection-options'>\n          ${filterValues}\n        </div>`;\n\n    this.showedQuestions++;\n\n    this.el.appendChild(section);\n    const inputs = section.querySelectorAll('.product-detail__sample-selection-options input');\n\n    inputs.forEach((input) => {\n      input.addEventListener('click', (event) => {\n        const target = event.target as HTMLInputElement;\n        if (this.clickedValue !== '' && this.clickedValue !== target.value) {\n          const previousInput = section.querySelector<HTMLInputElement>(`input[value=\"${this.clickedValue}\"]`);\n          if (previousInput) {\n            previousInput.checked = false;\n          }\n          this.clickedValue = target.value;\n          this.clicked = 0;\n        }\n\n        if (this.clicked === 0) {\n          target.checked = true;\n          this.clickedValue = target.value;\n          this.clicked++;\n        } else {\n          const element = this.el.querySelector(\n            `[value=\"${this.clickedValue}\"][data-sku-id=\"${target.dataset.skuId}\"]`\n          );\n          const closestParent = this.getClosestParent(\n            element as HTMLInputElement,\n            '.product-detail__sample-selection-section'\n          );\n\n          const lastSibling = closestParent?.parentNode?.lastChild;\n\n          if (lastSibling) {\n            lastSibling.remove();\n          }\n          (target as HTMLInputElement).checked = false;\n          this.clickedValue = '';\n          this.clicked = 0;\n        }\n      });\n    });\n    this.skus = this.originalSkus;\n  }\n\n  getClosestParent(element: HTMLInputElement, selector: string) {\n    let currentElement: HTMLInputElement | HTMLElement = element;\n\n    while (currentElement) {\n      if (currentElement.matches(selector)) {\n        return currentElement;\n      }\n\n      currentElement = currentElement.parentNode as HTMLElement;\n    }\n    return null;\n  }\n\n  displayHiddenFilter(filter: Filter, value: string) {\n    const section = document.createElement('div');\n    section.classList.add('product-detail__sample-selection-section');\n    section.setAttribute('hidden', '');\n\n    const input = document.createElement('input');\n    input.type = 'hidden';\n    input.name = filter.SKUPropertyName;\n    input.value = value;\n    section.appendChild(input);\n    this.el.appendChild(section);\n  }\n\n  displayResultsTable() {\n    // Get the selected sku\n    let sku = this.skus[0];\n    if (sku) {\n      const selectedValues: string[] = [];\n      const selectedSkuIds: string[] = [];\n      this.filters.forEach((filter) => {\n        const selectedFilter: HTMLInputElement | null = this.el.querySelector(\n          `input[name=\"${filter.SKUPropertyName}\"]:checked`\n        );\n\n        if (selectedFilter) {\n          selectedValues.push(selectedFilter.value);\n          selectedSkuIds.push(selectedFilter.dataset.skuId || '');\n        }\n      });\n\n      if (selectedSkuIds.length > 0) {\n        sku = Object.values(this.skus)\n          .filter((skuValue) => {\n            return selectedSkuIds.includes(skuValue.ID);\n          })\n          .filter((_, i, self) => {\n            return i === self.length - 1;\n          })[0];\n      }\n\n      const section = document.createElement('div');\n      section.classList.add('product-detail__sample-selection-section');\n      section.innerHTML = `\n      ${sku.CanSample ? `<h2 class='product-detail__sample-selection-heading'>${this.el.dataset.tableHeading}</h2>` : ''}\n      <table class='product-detail__sample-selection-table'>\n          ${this.tableAttributes.map((attribute) => `\n          <tr>\n            <th>${attribute.Label}</th>\n            <td>${sku[attribute.SKUPropertyName]}</td>\n          </tr>`).join('')}\n      </table>\n      ${this.el.dataset.skuTerms ? `<p class='product-detail__sample-selection-message'>${this.el.dataset.skuTerms}</p>` : ''}\n      ${sku.CanSample ? `<button class='product-detail__cta' data-id='${sku.ID}'>${this.el.dataset.addToBasketLabel}</button>` : `<p class='product-detail__sample-selection-message'>${this.el.dataset.noSampleMessage}</p>`}\n    `;\n\n      const button = section.querySelector('.product-detail__cta');\n      if (button) {\n        button.addEventListener('click', (e) => {\n          e.preventDefault();\n          const target = e.target as HTMLButtonElement;\n          const id = target.dataset.id;\n          if (id) {\n            window.addProduct(id);\n          }\n        });\n      }\n\n      this.el.appendChild(section);\n    }\n  }\n}\n\nexport default ProductSampleSelection;\n"],"names":["ProductSampleSelection","Component","el","props","__publicField","event","target","selectionIndex","filter","section","index","nextFilter","skus","selectedFilter","sku","valuesArray","idsArray","labelsArray","values","value","self","labels","ids","filterValues","id","input","previousInput","element","closestParent","lastSibling","_a","selector","currentElement","selectedValues","selectedSkuIds","skuValue","_","i","attribute","button","e"],"mappings":"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"}