import React, {useEffect, useMemo, useState} from "react"
import cls from "classnames"
import {Container, Icon} from "@/components"
import BlogItems from "./blog-items"
import * as styles from "./blog-list.module.scss"
import {Link} from "gatsby"
import Blog from "@/templates/blog/blog";
import {useThrottle} from "ahooks";
import * as queryString from "querystring";
import {STORAGE_KEY} from "@/constants/common";

type IProps = {
  allBlogsCount: number
  data: Blog[]
  categories: { name: string }[]
  blogRecommend: { blog: Blog }[]
  blogMostPopular: { blog: Blog }[]
  allTags: { count: number; name: string }[]
  hotTags: { count: number; name: string }[]
  category?: { name: string }
  tag?: { count: number; name: string }
}

const BlogList: React.FC<IProps> = ({
  allBlogsCount,
  data,
  categories,
  blogMostPopular,
  blogRecommend,
  allTags,
  hotTags,
  category,
  //tag,
}) => {
  const [tag, setTag] = useState<string|undefined>(undefined)
  useEffect(() => {
    const { tag } = queryString.parse(
      typeof window !== "undefined"
        ? window.location.search.replace("?", "")
        : ""
    ) as { [key: string]: string }
    if (tag && typeof window !== "undefined") {
      window.sessionStorage.setItem(STORAGE_KEY.BLOG_TAG, tag)
      window.sessionStorage.removeItem(STORAGE_KEY.BLOG_CATEGORY)
    }
    setTag(tag)
  }, [typeof window !== "undefined" && window?.location?.search])

  useEffect(() => {
    if (category && typeof window !== "undefined") {
      window.sessionStorage.setItem(STORAGE_KEY.BLOG_CATEGORY, category.name)
      window.sessionStorage.removeItem(STORAGE_KEY.BLOG_TAG)
    }
  }, [category])

  //const tag = useMemo(() => {
  //  const { tag } = queryString.parse(
  //    typeof window !== "undefined"
  //      ? window.location.search.replace("?", "")
  //      : ""
  //  ) as { [key: string]: string }
  //  return tag
  //}, [typeof window !== "undefined" ? window?.location?.search : undefined])

  const blogs = useMemo(() => {
    if (tag !== undefined) {
      return data.filter((blog) => blog.tags.includes(tag))
    } else {
      return data
    }
  }, [tag])

  const [searchKeyword, setSearchKeyword] = useState("")
  const throttledSearchKeyword = useThrottle(searchKeyword, { wait: 2000 })
  const list: Blog[] = useMemo(() => {
    if (throttledSearchKeyword === "") return blogs
    const set = new Set<Blog>()
    blogs.filter((value) => value.title?.includes(throttledSearchKeyword)).forEach(((value) => set.add(value)))
    blogs.filter((value) => value.summary?.includes(throttledSearchKeyword)).forEach(((value) => set.add(value)))
    blogs.filter((value) => value.author?.includes(throttledSearchKeyword)).forEach(((value) => set.add(value)))
    //const filteredTitle = data.filter((value) => value.body.includes(throttledSearchKeyword))
    const result: Blog[] = []
    set.forEach((item) => result.push(item))
    return result
  }, [throttledSearchKeyword, blogs])

  const searchNode = (
    <div className="control has-icons-right">
      <input className="input" type="text" placeholder="搜索博客" value={searchKeyword} onChange={(event) => setSearchKeyword(event.target.value)} />
      <span className="icon is-small is-right">
        <Icon name="search" />{/* &#xe63c; */}
      </span>
    </div>
  )
  const mostPopularBlogsNode = (
    <ul className={styles.section_list}>
      {blogMostPopular.map(({blog}) => <li key={blog.customUrl}><Link to={`/blog/${blog.customUrl}`}>{blog.title}</Link></li>)}
    </ul>
  )
  const recommendBlogsNode = (
    <ul className={styles.section_list}>
      {blogRecommend.map(({blog}) => <li key={blog.customUrl}><Link to={`/blog/${blog.customUrl}`}>{blog.title}</Link></li>)}
    </ul>
  )

  return (
    <section>
      <Container>
        <div className={cls(styles.container, "columns is-variable is-4")}>
          <div
            className={cls(
              styles.filterContainer,
              "column is-4-widescreen is-4-tablet py-0"
            )}
          >
            <div className={styles.search_box}>
              {searchNode}
            </div>
            <hr />
            <div className={styles.section}>
              <h5 className={styles.section_title}>按类别筛选</h5>
              <div className={styles.section_list}>
                <Link to={"/blog/"} className={cls(styles.filter_item, {[styles.filter_item_selected]: category === undefined})}>全部</Link>
                {categories.map(value => <Link key={value.name} to={`/blog/categories/${value.name}`} className={cls(styles.filter_item, {[styles.filter_item_selected]: category?.name === value.name})}>{value.name}</Link>)}
              </div>
            </div>
            <hr />
            <div className={styles.section}>
              <h5 className={styles.section_title}>最受欢迎的文章</h5>
              {mostPopularBlogsNode}
            </div>
            <hr />
            <div className={styles.section}>
              <h5 className={styles.section_title}>推荐阅读文章</h5>
              {recommendBlogsNode}
            </div>
            <hr />
            <div className={styles.section}>
              <div className={styles.section_header}>
                <h5 className={styles.section_title}>热门标签</h5>
                <Link to={"/blog/tags"} className={styles.section_link}>查看全部标签</Link>
              </div>
              <div className={styles.section_list}>
                <Link to={"/blog/"} className={cls(styles.filter_item, {[styles.filter_item_selected]: tag === undefined})}>全部 ({allBlogsCount})</Link>
                {hotTags.map(value => <Link key={value.name} to={`/blog/?tag=${value.name}`} className={cls(styles.filter_item, {[styles.filter_item_selected]: tag === value.name})}># {value.name} ({value.count})</Link>)}
              </div>
            </div>
            {/*<hr />*/}
            {/*<BlogTagSelect*/}
            {/*  tagsAndCount={tagsAndCount}*/}
            {/*  checkedTags={checkedTags}*/}
            {/*  checkHandle={checkHandle}*/}
            {/*  className={styles.customTagSelector}*/}
            {/*/>*/}
          </div>

          <div className={cls(styles.listContainer, "column py-0")}>
            <div className={styles.show_on_mobile}>
              {/*<div className={styles.mobile_filter}>*/}
              {/*  <h6 className={styles.mobile_filter_title}>类别: </h6>*/}
              {/*  <div className={styles.mobile_filter_list}>*/}
              {/*    <Link to={"/blog/"} className={cls(styles.filter_item, {[styles.filter_item_selected]: category === undefined})}>全部</Link>*/}
              {/*    {categories.map(value => <Link key={value.name} to={`/blog/categories/${value.name}`} className={cls(styles.filter_item, {[styles.filter_item_selected]: category?.name === value.name})}>{value.name}</Link>)}*/}
              {/*  </div>*/}
              {/*</div>*/}
              {/*<div className={styles.mobile_filter}>*/}
              {/*  <h6 className={styles.mobile_filter_title}><Link to={'/blog/tags'}>标签</Link>: </h6>*/}
              {/*  <div className={styles.mobile_filter_list}>*/}
              {/*    <Link to={"/blog/"} className={cls(styles.filter_item, {[styles.filter_item_selected]: tag === undefined})}>全部</Link>*/}
              {/*    {allTags.map(value => <Link key={value.name} to={`/blog/?tag=${value.name}`} className={cls(styles.filter_item, {[styles.filter_item_selected]: tag === value.name})}>{value.name}</Link>)}*/}
              {/*  </div>*/}
              {/*</div>*/}
              {/*<hr />*/}
              {searchNode}
              <hr />
              <ToggleablePanel name={"按类别筛选"}>
                <Link to={"/blog/"} className={cls(styles.filter_item, {[styles.filter_item_selected]: category === undefined})}>全部</Link>
                {categories.map(value => <Link key={value.name} to={`/blog/categories/${value.name}`} className={cls(styles.filter_item, {[styles.filter_item_selected]: category?.name === value.name})}>{value.name}</Link>)}
              </ToggleablePanel>
              <ToggleablePanel name={"最受欢迎的文章"}>
                {mostPopularBlogsNode}
              </ToggleablePanel>
              <ToggleablePanel name={"推荐阅读文章"}>
                {recommendBlogsNode}
              </ToggleablePanel>
              <ToggleablePanel name={"热门标签"} extra={<Link to={"/blog/tags"} className={styles.section_link}>查看全部标签</Link>}>
                <Link to={"/blog/"} className={cls(styles.filter_item, {[styles.filter_item_selected]: tag === undefined})}>全部 ({allBlogsCount})</Link>
                {hotTags.map(value => <Link key={value.name} to={`/blog/?tag=${value.name}`} className={cls(styles.filter_item, {[styles.filter_item_selected]: tag === value.name})}>{value.name} ({value.count})</Link>)}
              </ToggleablePanel>
              <hr />
            </div>
            {/*<div className={cls(styles.mobileFilterContainer)}>*/}
            {/*  <MobilePracticeTagSelect*/}
            {/*    tagsAndCount={tagsAndCount}*/}
            {/*    checkedTags={checkedTags}*/}
            {/*    submitCheck={submitCheck}*/}
            {/*  />*/}
            {/*</div>*/}
            <BlogItems list={list} />
          </div>
        </div>
      </Container>
    </section>
  )
}

export default BlogList

interface IPropsToggleablePanel {
  name: React.ReactNode
  link?: string
  children: React.ReactNode
  extra?: React.ReactNode
}
function ToggleablePanel(props: IPropsToggleablePanel) {
  const { name, link, children, extra } = props
  const [visible, setVisible] = useState(false)
  const nameNode = `${visible ? "-" : "+"} ${name}`
  return (
    <div className={styles.mobile_filter}>
      <div className={styles.mobile_filter_header}>
        <h4 className={styles.mobile_filter_header_title} onClick={() => setVisible((draft) => !draft)}>{link !== undefined ? <Link to={link}>{nameNode}</Link> : nameNode}</h4>
        {extra}
      </div>
      <div className={styles.mobile_filter_list} style={{height: visible ? "auto" : 0}}>{children}</div>
    </div>
  )
}