import icon3 from '@/static/tab/cart1.png'
import icon4 from '@/static/tab/cart2.png'
import icon5 from '@/static/tab/my1.png'
import icon6 from '@/static/tab/my2.png'
import class1 from '@/static/tab/class-tab0.png'
import class2 from '@/static/tab/class-tab1.png'

export interface TabbarItem {
  name: string
  value: number | null
  active: boolean
  title: string
  icon2: string
  icon1: string
}

const tabbarItems = ref<TabbarItem[]>([
  { name: 'smqjh-home', value: null, active: true, title: '首页', icon1: '', icon2: '' },
  { name: 'smqjh-classfiy', value: null, active: false, title: '分类', icon1: class1, icon2: class2 },
  { name: 'smqjh-cart', value: null, active: false, title: '购物车', icon1: icon3, icon2: icon4 },
  { name: 'smqjh-my', value: null, active: false, title: '我的', icon1: icon5, icon2: icon6 },
])

export function useTabbar() {
  const tabbarList = computed(() => tabbarItems.value)

  const activeTabbar = computed(() => {
    const item = tabbarItems.value.find(item => item.active)
    return item || tabbarItems.value[0]
  })

  const getTabbarItemValue = (name: string) => {
    const item = tabbarItems.value.find(item => item.name === name)
    return item && item.value ? item.value : null
  }

  const setTabbarItem = (name: string, value: number) => {
    const tabbarItem = tabbarItems.value.find(item => item.name === name)
    if (tabbarItem) {
      tabbarItem.value = value
    }
  }

  const setTabbarItemActive = (name: string) => {
    tabbarItems.value.forEach((item) => {
      if (item.name === name) {
        item.active = true
      }
      else {
        item.active = false
      }
    })
  }

  return {
    tabbarList,
    activeTabbar,
    getTabbarItemValue,
    setTabbarItem,
    setTabbarItemActive,
  }
}