import { ref, watch } from 'vue'

import type { SearchMode, Artist, Album, Track } from '../types'
import { useSubsonicApi } from '../subsonicApi'
import { useMainStore } from '../store/main'

import { AlbumList } from '../components/AlbumList.vine'
import { ArtistList } from '../components/ArtistList.vine'
import { TrackList } from '../components/TrackList.vine'

interface State {
  artists: Artist[],
  albums: Album[],
  tracks: Track[],
  hasMore: boolean,
}

export const SearchResultView = ({ query, mode = null }: { query: string, mode?: SearchMode }) => {
  const
    subsonicApi = useSubsonicApi(),
    mainStore = useMainStore(),
    pageSize = 20,
    state = ref<State>({
      artists: [],
      albums: [],
      tracks: [],
      hasMore: true,
    } as State),

    loadMore = async() => {
      try {
        mainStore.isLoading = true

        subsonicApi.search(
          query,
          mode,
          pageSize,
          (state.value.albums.length + state.value.artists.length + state.value.tracks.length)
        ).then(
          result => {
            const numResults = result.albums.length + result.artists.length + result.tracks.length;

            state.value.artists.push(...result.artists)
            state.value.albums.push(...result.albums)
            state.value.tracks.push(...result.tracks)
            state.value.hasMore = (
              (numResults >= pageSize)
              ? true
              : false
            )
          }
        )
      } finally {
        mainStore.isLoading = false
      }
    }

  watch(
    () => [ query, mode ],
    () => {
      state.value = {
        artists: [],
        albums: [],
        tracks: [],
        hasMore: true,
      } as State;
      loadMore()
    }
  )

  return vine`
    <template v-if="!!state.artists.length">
      <router-link v-if="!mode" :to="{ params: { mode: 'artist' }, query: $route.query }" class="section-title">
        <Icon icon="artists" class="title-color" />
        Artists <small>({{ state.artists.length }})</small>
      </router-link>
      <ArtistList :items="state.artists" />
    </template>

    <template v-if="!!state.albums.length">
      <router-link v-if="!mode" :to="{ params: { mode: 'album' }, query: $route.query }" class="section-title">
        <Icon icon="albums" />
        Albums <small>({{ state.albums.length }})</small>
      </router-link>
      <AlbumList :items="state.albums" />
    </template>

    <template v-if="!!state.tracks.length">
      <router-link :to="{ params: { mode: 'track' }, query: $route.query }" class="section-title">
        <Icon icon="tracks" class="title-color" />
        Tracks <small>({{ state.tracks.length }}{{ state.hasMore ? "+" : "" }})</small>
      </router-link>
      <TrackList :tracks="state.tracks" />
    </template>

    <EmptyIndicator v-if="!mainStore.isLoading && !state.hasMore && !state.artists.length && !state.albums.length && !state.tracks.length" label="No results" />
    <InfiniteLoader :is-loading="mainStore.isLoading" :has-more="state.hasMore" @load-more="loadMore" />
  `;
}