import { UserIcon, LockIcon, HeartIcon } from 'vue-feather-icons'
import { CashIcon, ColorSwatchIcon, useRoute, useRouter } from '@starpad/ui'
import { computed, onMounted, ref } from '@vue/composition-api'

export interface SettingsTab {
    id: string
    label: string
    icon?: any
    component: any
    visible: boolean
  }

const defaultTabs: SettingsTab[] = [
  {
    id: 'userProfile',
    label: 'starpad.user.profile',
    icon: UserIcon,
    component: () => import(/* webpackChunkName: "UserProfile" */ './UserProfile.vue'),
    visible: true,
  },
  {
    id: 'appearance',
    label: 'starpad.user.appearance',
    icon: ColorSwatchIcon,
    component: () => import(/* webpackChunkName: "Appearance" */ './Appearance.vue'),
    visible: true,
  },
  {
    id: 'security',
    label: 'starpad.user.security',
    icon: LockIcon,
    component: () => import(/* webpackChunkName: "SecuritySettings" */ '../security/SecuritySettings.vue'),
    visible: true,
  },
  {
    id: 'billing',
    label: 'starpad.user.billing',
    icon: CashIcon,
    component: () => import(/* webpackChunkName: "BillingSettings" */ '../billing/BillingSettings.vue'),
    visible: true,
  },
  {
    id: 'customer-service',
    label: 'starpad.user.feedbackAndCustomerService',
    icon: HeartIcon,
    component: () => import(/* webpackChunkName: "CustomerService" */ './CustomerService.vue'),
    visible: true,
  },
]

type SettingsTabsCallback = (tabs: SettingsTab[]) => SettingsTab[] | Promise<SettingsTab[]>

const settingsTabsCbs: SettingsTabsCallback[] = []

export function onGetSettingsTabs (cb: SettingsTabsCallback) {
  settingsTabsCbs.push(cb)
}

export async function getSettingsTabs (): Promise<SettingsTab[]> {
  let tabs = defaultTabs
  for (const cb of settingsTabsCbs) {
    tabs = await cb(tabs)
  }
  return tabs
}

export function useSettingsTabs () {
  const route = useRoute()
  const router = useRouter()

  const tabs = ref([])
  onMounted(async () => {
    const list = await getSettingsTabs()
    tabs.value = list.filter(tab => !!tab.visible)
  })

  const currentTab = computed<SettingsTab>({
    get () {
      if (route.value.query.settingsTab) {
        return tabs.value.find(t => t.id === route.value.query.settingsTab)
      } else {
        return tabs.value[0]
      }
    },
    set (tab) {
      router.push({
        ...route.value,
        query: {
          ...route.value.query,
          settingsTab: tab.id,
        },
      })
    },
  })

  return {
    tabs,
    currentTab,
  }
}