import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import i18n from '@/lang'

type Translate = (key: string) => string

const clothesCategoryConfigs = [
  {
    key: 'blouse',
    value: 'blouse'
  },
  {
    key: 'dress',
    value: 'dress'
  },
  {
    key: 'trousers',
    value: 'trousers'
  },
  {
    key: 'skirt',
    value: 'skirt'
  },
  {
    key: 'tops',
    value: 'tops'
  },
  {
    key: 'bottoms',
    value: 'bottoms'
  },
  {
    key: 'outwear',
    value: 'outwear'
  },
  {
    key: 'others',
    value: 'others'
  }
] as const

export type ClothesCategoryValue = (typeof clothesCategoryConfigs)[number]['value']

export interface ClothesCategory {
  name: string
  label: string
  value: ClothesCategoryValue
}

export const createClothesCategories = (t: Translate = i18n.global.t): ClothesCategory[] =>
  clothesCategoryConfigs.map(({ key, value }) => ({
    name: t(`ClothesCategories.${key}`),
    label: t(`ClothesCategories.${key}`),
    value
  }))

export const ClothesCategories: ClothesCategory[] = clothesCategoryConfigs.map(({ key, value }) => ({
  get name() {
    return i18n.global.t(`ClothesCategories.${key}`)
  },
  get label() {
    return i18n.global.t(`ClothesCategories.${key}`)
  },
  value
}))

export const useClothesCategories = () => {
  const { t } = useI18n({ useScope: 'global' })

  return computed(() => createClothesCategories(t))
}