import { defineComponent } from 'vue'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdHistory, MdRemove } from 'oh-vue-icons/icons'
import useSearchConfigStore from './useSearchConfigStore'
import jump from '@/utils/jump'
import useSettingsStore from '@/settings/useSettingsStore'
addIcons(MdHistory)
addIcons(MdRemove)
export default defineComponent(() => {
  const searchConfig = useSearchConfigStore()
  const settings = useSettingsStore()
  return () =>
    settings.state.showHistory && (
      <div class="absolute left-0 -bottom-2 translate-y-full w-full rounded-lg z-10 bg-white/60 backdrop-blur shadow-lg p-4">
        {searchConfig.history.map((item, idx) => (
          <div
            key={idx}
            class="flex justify-between items-center text-black/80 cursor-pointer hover:bg-white/40 py-1 px-2 rounded transition-all"
            onMousedown={() => {
              jump(searchConfig.current.url + item)
            }}
          >
            <div class="flex items-center w-0 flex-grow">
              <OhVueIcon name="md-history" fill="rgba(0,0,0,0.8)" />
              <div class="w-0 pl-2 flex-grow text-ellipsis overflow-hidden whitespace-nowrap break-all">
                {item}
              </div>
            </div>
            <div
              class="text-black/40 hover:bg-red-500 hover:text-white px-1 rounded transition-all"
              onMousedown={(e) => {
                e.preventDefault()
                e.stopPropagation()
                searchConfig.removeHistory(idx)
              }}
            >
              <OhVueIcon name="md-remove" />
            </div>
          </div>
        ))}
      </div>
    )
})