import { clsx } from 'clsx'
import { For, Show, createEffect, createSignal, } from 'solid-js'

import { useFollowing } from '../../../context/following'
import { useLocalize } from '../../../context/localize'
import { Author, Topic } from '../../../graphql/schema/core.gen'
import { SubscriptionFilter } from '../../../pages/types'
import { dummyFilter } from '../../../utils/dummyFilter'
// TODO: refactor styles
import { isAuthor } from '../../../utils/isAuthor'
import { AuthorBadge } from '../../Author/AuthorBadge'
import { ProfileSettingsNavigation } from '../../Nav/ProfileSettingsNavigation'
import { TopicBadge } from '../../Topic/TopicBadge'
import { Loading } from '../../_shared/Loading'
import { SearchField } from '../../_shared/SearchField'

import styles from '../../../pages/profile/Settings.module.scss'
import stylesSettings from '../../../styles/FeedSettings.module.scss'

export const ProfileSubscriptions = () => {
  const { t, lang } = useLocalize()
  const { subscriptions } = useFollowing()
  const [following, setFollowing] = createSignal<Array<Author | Topic>>([])
  const [filtered, setFiltered] = createSignal<Array<Author | Topic>>([])
  const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
  const [searchQuery, setSearchQuery] = createSignal('')

  createEffect(() => {
    const { authors, topics } = subscriptions
    if (authors || topics) {
      const fdata = [...(authors || []), ...(topics || [])]
      setFollowing(fdata)
      if (subscriptionFilter() === 'authors') {
        setFiltered(fdata.filter((s) => 'name' in s))
      } else if (subscriptionFilter() === 'topics') {
        setFiltered(fdata.filter((s) => 'title' in s))
      } else {
        setFiltered(fdata)
      }
    }
  })

  createEffect(() => {
    if (searchQuery()) {
      setFiltered(dummyFilter(following(), searchQuery(), lang()))
    }
  })

  return (
    <div class="wide-container">
      <div class="row">
        <div class="col-md-5">
          <div class={clsx('left-navigation', styles.leftNavigation)}>
            <ProfileSettingsNavigation />
          </div>
        </div>

        <div class="col-md-19">
          <div class="row">
            <div class="col-md-20 col-lg-18 col-xl-16">
              <h1>{t('My subscriptions')}</h1>
              <p class="description">{t('Here you can manage all your Discours subscriptions')}</p>
              <Show when={following()} fallback={<Loading />}>
                <ul class="view-switcher">
                  <li
                    class={clsx({
                      'view-switcher__item--selected': subscriptionFilter() === 'all',
                    })}
                  >
                    <button type="button" onClick={() => setSubscriptionFilter('all')}>
                      {t('All')}
                    </button>
                  </li>
                  <li
                    class={clsx({
                      'view-switcher__item--selected': subscriptionFilter() === 'authors',
                    })}
                  >
                    <button type="button" onClick={() => setSubscriptionFilter('authors')}>
                      {t('Authors')}
                    </button>
                  </li>
                  <li
                    class={clsx({
                      'view-switcher__item--selected': subscriptionFilter() === 'topics',
                    })}
                  >
                    <button type="button" onClick={() => setSubscriptionFilter('topics')}>
                      {t('Topics')}
                    </button>
                  </li>
                </ul>

                <div class={clsx('pretty-form__item', styles.searchContainer)}>
                  <SearchField
                    onChange={(value) => setSearchQuery(value)}
                    class={styles.searchField}
                    variant="bordered"
                  />
                </div>

                <div class={clsx(stylesSettings.settingsList, styles.topicsList)}>
                  <For each={filtered()}>
                    {(followingItem) => (
                      <div>
                        {isAuthor(followingItem) ? (
                          <AuthorBadge minimizeSubscribeButton={true} author={followingItem} />
                        ) : (
                          <TopicBadge minimizeSubscribeButton={true} topic={followingItem} />
                        )}
                      </div>
                    )}
                  </For>
                </div>
              </Show>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}