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 = {
  SPACE_TYPE: 'Space type',
  MOMENTS_THAT_MATTER: 'Moments that Matter',
  COLOUR: 'Colour',
  SITE_NAME: 'Site Name',
  COUNTRY: 'Country',
  REGION: 'Region',
  BUILDING_ZONE: 'Building Zone',
  PEOPLE_PRESENCE: 'People Presence',
  DESCRIPTION: 'Description',
  IMAGE_PATH: 'Image Path',
  TITLE: 'Title'
}

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.TITLE])
    .map(item => ({
      ...item,
      [FIELDS.MOMENTS_THAT_MATTER]: valueToArray(item, FIELDS.MOMENTS_THAT_MATTER),
      [FIELDS.COLOUR]: valueToArray(item, FIELDS.COLOUR),
      [FIELDS.DESCRIPTION]: valueToArray(item, FIELDS.DESCRIPTION),
      [FIELDS.IMAGE_PATH]: `${sanitizedImageRoot}/${item[FIELDS.IMAGE_PATH]}`
    }))
}

function Items ({ items }) {
  const models = items.map(item => ({
    image: { src: item[FIELDS.IMAGE_PATH], alt: item[FIELDS.TITLE] },
    title: item[FIELDS.TITLE],
    text: item[FIELDS.SITE_NAME],
    links: [
      { name: FIELDS.SPACE_TYPE, value: item[FIELDS.SPACE_TYPE] },
      { name: FIELDS.MOMENTS_THAT_MATTER, value: item[FIELDS.MOMENTS_THAT_MATTER] },
      { name: FIELDS.COLOUR, value: item[FIELDS.COLOUR] },
      { name: FIELDS.SITE_NAME, value: item[FIELDS.SITE_NAME] },
      { name: FIELDS.COUNTRY, value: item[FIELDS.COUNTRY] },
      { name: FIELDS.REGION, value: item[FIELDS.REGION] },
      { name: FIELDS.BUILDING_ZONE, value: item[FIELDS.BUILDING_ZONE] },
      { name: FIELDS.PEOPLE_PRESENCE, value: item[FIELDS.PEOPLE_PRESENCE] },
      { 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 InspiredGallery ({ src, 'image-root': imageRoot }) {
  if (!src) {
    return null
  }
  return h(FilteredData, {
    getData,
    filters: [{
      type: 'text',
      label: LABELS.SEARCH_TEXT,
      keys: [FIELDS.TITLE, FIELDS.SPACE_TYPE, FIELDS.SITE_NAME, FIELDS.MOMENTS_THAT_MATTER, FIELDS.COLOUR, FIELDS.COUNTRY, FIELDS.REGION, FIELDS.BUILDING_ZONE, FIELDS.DESCRIPTION]
    }, {
      type: 'select',
      keys: ['', FIELDS.SPACE_TYPE]
    }, {
      type: 'select',
      keys: ['', FIELDS.MOMENTS_THAT_MATTER]
    }, {
      type: 'select',
      keys: ['', FIELDS.COLOUR]
    }, {
      type: 'select',
      keys: ['', FIELDS.SITE_NAME]
    }, {
      type: 'select',
      label: 'Region',
      keys: ['', FIELDS.REGION]
    }, {
      type: 'select',
      keys: ['', FIELDS.BUILDING_ZONE]
    }, {
      type: 'select',
      keys: ['', FIELDS.PEOPLE_PRESENCE]
    }, {
      type: 'order',
      label: LABELS.ORDER_BY,
      keys: [FIELDS.SITE_NAME, `-${FIELDS.SITE_NAME}`, FIELDS.MOMENTS_THAT_MATTER, FIELDS.COLOUR, FIELDS.COUNTRY, `-${FIELDS.COUNTRY}`, FIELDS.REGION, `-${FIELDS.REGION}`, FIELDS.BUILDING_ZONE]
    }],
    Items,
    src,
    imageRoot
  })
}

register(InspiredGallery, 'inspired-gallery')
