/* eslint-disable @typescript-eslint/no-non-null-assertion */
import React, { useEffect, useRef, useState } from "react"
import cls from "classnames"

import useWindowDimensions from "@/hooks/useWindowDimensions"
import { Icon } from "@/components"

import * as styles from "./index.module.scss"
import { useCallback } from "react"

type IProps = {
  activeName: string
  tagsAndCount: { [k: string]: IPage }[]
  tabHandle: (k: string) => void
}
const scrollStepDist = 140
function SearchTabs({ activeName, tagsAndCount, tabHandle }: IProps) {
  const container = useRef<HTMLDivElement>(null)
  const scrollClient = useRef<HTMLUListElement>(null)
  const [distance, setDistance] = useState(0)
  const [count, setScrollCount] = useState(0)
  const [navDisplay, setNavDisplay] = useState<Array<boolean>>([false, true])
  const [navBar, setNavBar] = useState(false)
  const { width: windowWidth } = useWindowDimensions()
  useEffect(() => {
    if (scrollClient.current && container.current) {
      const dist =
        scrollClient.current!.scrollWidth - container.current!.clientWidth
      setNavBar(dist > 0)
    }
  }, [windowWidth])
  const nav = useCallback(
    (dir: string) => {
      if (scrollClient.current && container.current) {
        const dist =
          scrollClient.current!.scrollWidth - container.current!.clientWidth

        if (dir === "right") {
          const delta = dist - count * scrollStepDist
          setDistance(delta < 140 ? -dist : -140 * (count + 1))
          setNavDisplay([true, delta > 140 ? true : false])
          setScrollCount(count + 1)
        }
        if (dir === "left") {
          setNavDisplay([false, true])
          setDistance(0)
          setScrollCount(0)
        }
      } else {
        console.error("ref not exists")
      }
    },
    [count]
  )
  return (
    <div className={cls(styles.tabContainer)} ref={container}>
      <ul
        className={"tabs mb-0"}
        style={{ transform: `translateX(${distance}px)` }}
        ref={scrollClient}
      >
        {tagsAndCount.map(item => {
          const tagCountList = Object.entries(item)[0]
          const [name, { total: count }] = tagCountList
          return (
            <li
              className={cls(
                styles.tabItem,
                activeName === name ? "is-active" : ""
              )}
              key={name}
              onClick={() => tabHandle(name)}
            >
              <a>{`${name} (${count})`}</a>
            </li>
          )
        })}
      </ul>
      <div className={cls(styles.navContainer, navBar ? "display" : "")}>
        <span
          className={cls(
            styles.nav,
            styles.leftNav,
            navDisplay[0] ? "display" : ""
          )}
          onClick={() => nav("left")}
        >
          <Icon name="chevron-right" />
        </span>
        <span
          className={cls(
            styles.nav,
            styles.rightNav,
            navDisplay[1] ? "display" : ""
          )}
          onClick={() => nav("right")}
        >
          <Icon name="chevron-right" />
        </span>
      </div>
    </div>
  )
}

export default SearchTabs