import { createEffect, createMemo, For, Show } from 'solid-js'
import type { Topic } from '../../graphql/types.gen'
import { Icon } from '../Nav/Icon'
import { t } from '../../utils/intl'
import { setSortAllBy as setSortAllTopicsBy, useTopicsStore } from '../../stores/zine/topics'
import { handleClientRouteLinkClick, useRouter } from '../../stores/router'
import { TopicCard } from '../Topic/Card'
import { useAuthStore } from '../../stores/auth'
import '../../styles/AllTopics.scss'
import { getLogger } from '../../utils/logger'

const log = getLogger('AllTopicsView')

type AllTopicsPageSearchParams = {
  by: 'shouts' | 'authors' | 'title' | ''
}

type AllTopicsViewProps = {
  topics: Topic[]
}

export const AllTopicsView = (props: AllTopicsViewProps) => {
  const { getSearchParams, changeSearchParam } = useRouter<AllTopicsPageSearchParams>()

  const { sortedTopics } = useTopicsStore({
    topics: props.topics,
    sortBy: getSearchParams().by || 'shouts'
  })

  const { session } = useAuthStore()

  createEffect(() => {
    setSortAllTopicsBy(getSearchParams().by || 'shouts')
  })

  const byLetter = createMemo<{ [letter: string]: Topic[] }>(() => {
    return sortedTopics().reduce((acc, topic) => {
      const letter = topic.title[0]
      if (!acc[letter]) {
        acc[letter] = []
      }

      acc[letter].push(topic)

      return acc
    }, {} as { [letter: string]: Topic[] })
  })

  const sortedKeys = createMemo<string[]>(() => {
    const keys = Object.keys(byLetter())
    keys.sort()
    return keys
  })

  const subscribed = (s) => Boolean(session()?.news?.topics && session()?.news?.topics?.includes(s || ''))

  return (
    <div class="all-topics-page">
      <Show when={sortedTopics().length > 0}>
        <div class="wide-container">
          <div class="shift-content">
            <div class="row">
              <div class="col-md-9 page-header">
                <h1>{t('Topics')}</h1>
                <p>{t('Subscribe what you like to tune your personal feed')}</p>
              </div>
            </div>

            <div class="row">
              <div class="col">
                <ul class="view-switcher">
                  <li classList={{ selected: getSearchParams().by === 'shouts' || !getSearchParams().by }}>
                    <a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
                      {t('By shouts')}
                    </a>
                  </li>
                  <li classList={{ selected: getSearchParams().by === 'authors' }}>
                    <a href="/topics?by=authors" onClick={handleClientRouteLinkClick}>
                      {t('By authors')}
                    </a>
                  </li>
                  <li classList={{ selected: getSearchParams().by === 'title' }}>
                    <a
                      href="/topics?by=title"
                      onClick={(ev) => {
                        // just an example
                        ev.preventDefault()
                        changeSearchParam('by', 'title')
                      }}
                    >
                      {t('By alphabet')}
                    </a>
                  </li>
                  <li class="view-switcher__search">
                    <a href="/topic/search">
                      <Icon name="search" />
                      {t('Search topic')}
                    </a>
                  </li>
                </ul>

                <Show
                  when={getSearchParams().by === 'title'}
                  fallback={() => (
                    <div class="stats">
                      <For each={sortedTopics()}>
                        {(topic) => (
                          <TopicCard topic={topic} compact={false} subscribed={subscribed(topic.slug)} />
                        )}
                      </For>
                    </div>
                  )}
                >
                  <For each={sortedKeys()}>
                    {(letter) => (
                      <div class="group">
                        <h2>{letter}</h2>
                        <div class="container">
                          <div class="row">
                            <For each={byLetter()[letter]}>
                              {(topic) => (
                                <div class="topic col-sm-6 col-md-3">
                                  <div class="topic-title">
                                    <a href={`/topic/${topic.slug}`}>{topic.title}</a>
                                  </div>
                                </div>
                              )}
                            </For>
                          </div>
                        </div>
                      </div>
                    )}
                  </For>
                </Show>
              </div>
            </div>
          </div>
        </div>
      </Show>
    </div>
  )
}