import { defineComponent } from 'vue'
import useSearchConfigStore from './useSearchConfigStore'
import useSearchStore from './useSearchStore'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { FaPlus } from 'oh-vue-icons/icons'
import useRouterStore from '@/useRouterStore'

addIcons(FaPlus)

export default defineComponent({
  setup() {
    const search = useSearchStore()
    const searchConfig = useSearchConfigStore()
    const router = useRouterStore()
    return () => (
      <div
        class="absolute left-0 -bottom-2 translate-y-full w-full rounded-lg bg-white/60 backdrop-blur shadow-lg p-4 flex flex-wrap gap-4"
        v-outside-click={() => {
          search.showSearchConfig = false
        }}
      >
        {searchConfig.defaultList
          .concat(searchConfig.customList)
          .filter((el) => el.show)
          .map((item) => (
            <div class="w-12 h-16 relative flex flex-col justify-between" key={item.name}>
              <div
                class={
                  'w-full rounded-lg overflow-hidden flex justify-center items-center p-2 hover:scale-110 transition-all cursor-pointer ' +
                  (searchConfig.current.name === item.name
                    ? 'bg-white'
                    : 'bg-white/40 hover:bg-white/60')
                }
                onClick={() => {
                  searchConfig.current = { ...item }
                  search.showSearchConfig = false
                }}
              >
                <div
                  class="w-6 h-6 bg-center bg-no-repeat bg-contain"
                  style={{
                    backgroundImage: `url('${item.icon}')`
                  }}
                />
              </div>
              <div class="text-xs text-center text-black/60 w-full overflow-hidden text-ellipsis whitespace-nowrap break-all">
                {item.name}
              </div>
            </div>
          ))}
        <div class="w-12 h-16">
          <div
            class="w-full h-10 rounded-lg overflow-hidden flex justify-center items-center p-2 transition-all cursor-pointer bg-white/40 hover:bg-white/60"
            onClick={() => {
              search.showSearchConfig = false
              router.go('global-search')
            }}
          >
            <OhVueIcon name="fa-plus" scale={1.4} fill="rgba(0,0,0,.4)" />
          </div>
        </div>
      </div>
    )
  }
})