import { fetchCsv } from '#amidala/wcs/shared/filtered-data/fetch-data.js'
import FilteredData from '#amidala/wcs/shared/filtered-data/filtered-data.js'
import PromoWithPopup from '#amidala/wcs/shared/promo-with-popup/promo-with-popup.js'

const { h, register } = globalThis.ami

const LABELS = {
  SEARCH_TEXT: 'Search',
  ORDER_BY: 'Sort by',
  LOAD_MORE: 'Load more',
  RESET_FILTERS: 'Reset filters',
  ASCENDING: 'ascending',
  DESCENDING: 'descending',
  BACK_TO_OVERVIEW: 'Back to overview',
  PREVIOUS_ITEM: 'Go to the previous item',
  NEXT_ITEM: 'Go to the next item'
}

const FIELDS = {
  REGION: 'Region',
  PRODUCT_TYPE: 'Product Type',
  MANUFACTURER: 'Manufacturer',
  PRODUCT_NAME: 'Product name',
  NOTES: 'Notes',
  LOCATIONS: 'Locations',
  BIGTALL: 'Big/Tall',
  247: '24/7',
  IMAGE_PATH: 'Image Path',
  CHARACTERISTICS: 'Characteristics',
  DESCRIPTION: 'Description'
}

// -----------------------------------------------------------------------------
// Filtered Data hooks & helpers
// -----------------------------------------------------------------------------
function valueToArray (item, key) {
  return item[key]?.split(',').map(value => value.trim())
}

async function getData ({ src, imageRoot }) {
  const items = await fetchCsv(src)
  const sanitizedImageRoot = (imageRoot ?? '').replace(/\/$/, '')

  return items
    .filter(item => item[FIELDS.PRODUCT_NAME])
    .map(item => ({
      ...item,
      [FIELDS.REGION]: valueToArray(item, FIELDS.REGION),
      [FIELDS.LOCATIONS]: valueToArray(item, FIELDS.LOCATIONS),
      [FIELDS.CHARACTERISTICS]: valueToArray(item, FIELDS.CHARACTERISTICS),
      [FIELDS.IMAGE_PATH]: `${sanitizedImageRoot}/${item[FIELDS.IMAGE_PATH]}`
    }))
}

function Items ({ items }) {
  // Convert items to models.
  const models = items.map(item => ({
    image: { src: item[FIELDS.IMAGE_PATH], alt: item[FIELDS.PRODUCT_NAME] },
    title: item[FIELDS.PRODUCT_NAME],
    text: item[FIELDS.REGION],
    links: [
      { name: FIELDS.REGION, value: item[FIELDS.REGION] },
      { name: FIELDS.PRODUCT_TYPE, value: item[FIELDS.PRODUCT_TYPE] },
      { name: FIELDS.MANUFACTURER, value: item[FIELDS.MANUFACTURER] },
      { name: FIELDS.NOTES, value: item[FIELDS.NOTES] },
      { name: FIELDS.LOCATIONS, value: item[FIELDS.LOCATIONS] },
      { name: FIELDS.BIGTALL, value: item[FIELDS.BIGTALL] },
      { name: FIELDS['247'], value: item[FIELDS['247']] },
      { name: FIELDS.CHARACTERISTICS, value: item[FIELDS.CHARACTERISTICS] },
      { name: FIELDS.DESCRIPTION, value: item[FIELDS.DESCRIPTION] }
    ]
  }))

  return h('div', { className: 'grid gap-5 grid-cols-4 md:grid-cols-2 sm:grid-cols-1', role: 'list' }, models.map((_m, index) =>
    h(PromoWithPopup, { models, currentModelIndex: index })
  ))
}

function FurnitureOverview ({ src, 'image-root': imageRoot }) {
  if (!src) {
    return null
  }
  return h(FilteredData, {
    getData,
    filters: [{
      type: 'text',
      label: LABELS.SEARCH_TEXT,
      keys: [FIELDS.PRODUCT_TYPE, FIELDS.MANUFACTURER, FIELDS.PRODUCT_NAME, FIELDS.NOTES, FIELDS.LOCATIONS, FIELDS.CHARACTERISTICS, FIELDS.DESCRIPTION]
    }, {
      type: 'select',
      keys: ['', FIELDS.REGION]
    }, {
      type: 'select',
      keys: ['', FIELDS.PRODUCT_TYPE]
    }, {
      type: 'select',
      keys: ['', FIELDS.MANUFACTURER]
    }, {
      type: 'select',
      keys: ['', FIELDS.LOCATIONS]
    }, {
      type: 'select',
      keys: ['', FIELDS.CHARACTERISTICS]
    }, {
      type: 'order',
      label: LABELS.ORDER_BY,
      keys: [FIELDS.REGION, `-${FIELDS.REGION}`, FIELDS.PRODUCT_TYPE, `-${FIELDS.PRODUCT_TYPE}`, FIELDS.MANUFACTURER, `-${FIELDS.MANUFACTURER}`]
    }],
    Items,
    src,
    imageRoot
  })
}

register(FurnitureOverview, 'furniture-overview')
