import { ref, VueElement } from 'vue'
import { defineStore } from 'pinia'

import {
  Type1,
  Type2,
  Type3,
  Type4,
  Type5,
  Type6,
  Type7,
  Type8,
  Type9,
  Type10,
  Type11,
  Type12,
  Type13,
  Type14,
  Type15,
  Type16,
  Type17,
  Type18
} from '@/components/Form/FiltersType'

const test1: { [key: string]: any } = {
  'type-1': Type1,
  'type-2': Type2,
  'type-3': Type3,
  'type-4': Type4,
  'type-5': Type5,
  'type-6': Type6,
  'type-7': Type7,
  'type-8': Type8,
  'type-9': Type9,
  'type-10': Type10,
  'type-11': Type11,
  'type-12': Type12,
  'type-13': Type13,
  'type-14': Type14,
  'type-15': Type15,
  'type-16': Type16,
  'type-17': Type17,
  'type-18': Type18
}

const getFilters = (type: string): VueElement => {
  return test1[type]
}

export const useFiltersStore = defineStore('filters', () => {
  const config = ref({
    reportButton: false,
    type: '',
    component: getFilters('')
  })

  const setConfig = ({ reportButton = false, type }: { reportButton?: boolean, type: string }) => {
    config.value = {
      reportButton,
      type,
      component: getFilters(type)
    }
  }

  return {
    config,
    setConfig
  }
})