import React, { PureComponent } from "react"
import SearchHead from "./searchHead"
import Tag from "src/common/Tag/index.js"
import { http } from "src/utils"
import "./index.scss"
import { Link } from "react-router-dom"
import Loading from "src/common/Loading"

class Search extends PureComponent {
  state = {
    searchHistory: JSON.parse(localStorage.getItem("searchHistory")) || [],
    hot_words: [],
    defaultWord: "",
    searchList: [],
    value: "",
    isLoading: true,
  }

  async componentDidMount() {
    const res = await http.get(`${API["search-api"]}/search_hot_word`)
    const { errno, data } = res.data
    if (errno === 0) {
      this.setState({
        hot_words: data.info.hot_words,
        value: data.info.recommend_word,
        isLoading: false,
      })
    }
  }

  clearHistory = () => {
    localStorage.setItem("searchHistory", null)
    this.setState({
      searchHistory: [],
    })
  }

  handleChange = (value) => {
    this.setState({ value })
  }

  handleSearch = () => {
    const { defaultWord, value } = this.state
    const val = value || defaultWord
    val &&
      this.props.history.push(`/search-result?word=${encodeURIComponent(val)}`)
  }

  storeHistory = (keyword) => {
    const { searchHistory } = this.state
    const data = searchHistory.some((item) => item === keyword)
      ? searchHistory
      : searchHistory.concat([keyword])
    localStorage.setItem("searchHistory", JSON.stringify(data))
  }

  render() {
    const { searchHistory } = this.state
    return (
      <div className="search-page">
        <SearchHead
          searchHistory={this.state.searchHistory}
          value={this.state.value}
          handleChange={this.handleChange}
          handleSearch={this.handleSearch}
        />
        <Loading isLoading={this.state.isLoading}>
          <div className="search-main">
            {searchHistory.length > 0 && (
              <div className="search-land">
                <div className="search-history">
                  <span>最近搜索</span>
                  <i
                    className="iconfont iconiconfront-56"
                    onClick={this.clearHistory}
                  />
                </div>
                <div className="search-tag">
                  {searchHistory.map((v, i) => {
                    return (
                      <Link
                        key={i}
                        to={`/search-result?word=${encodeURIComponent(v)}`}
                      >
                        <Tag name={"tagLately"}>{v}</Tag>
                      </Link>
                    )
                  })}
                </div>
              </div>
            )}
            <div className="search-land search-hot">
              <label className={"search-history"}>
                <span>
                  热门搜索
                  <img src={require("./image/hot.png")} alt="" />
                </span>
              </label>
              <div className="search-tag">
                {this.state["hot_words"].length > 0 ? (
                  this.state["hot_words"].map((v, i) => {
                    return (
                      <Link
                        key={i}
                        to={`/search-result?word=${encodeURIComponent(v)}`}
                        onClick={this.storeHistory.bind(this, v)}
                      >
                        <Tag name={"tagHot"}>{v}</Tag>
                      </Link>
                    )
                  })
                ) : (
                  <div style={{ textAlign: "center", padding: "20px" }}>
                    暂无热门
                  </div>
                )}
              </div>
            </div>
          </div>
        </Loading>
      </div>
    )
  }
}

export default Search
