import { useEffect, useState } from "react"
import './search.css'
import { useNavigate } from "react-router"
import { useSearchParams } from "react-router-dom"
import FilledButton from "../md-components/FilledButton"
import Icon from "../md-components/Icon"
import InputChip from "../md-components/InputChip"
import axios from "axios"

const Search = () => {
    const [searchParams, setSearchParams] = useSearchParams()
    const searchText = searchParams.get("q")
    const fromSearch = searchParams.get("from_search")
    const authorId = searchParams.get("author")
    const navigate = useNavigate()
    const [value, setValue] = useState(searchText === null ? "" : searchText)
    const [authorInfo, setAuthorInfo] = useState({name: "..."})
    useEffect(() => {
        if (!authorId) return
        axios.get("/author/"+authorId)
        .then(res => setAuthorInfo(res.data))
    }, [authorId])
    useEffect(() => {
        if (searchText === null) {
            if (fromSearch !== null) {
                setValue(fromSearch)
            } else {
                setValue("")
            }
        } else {
            setValue(searchText)
        }
    }, [searchParams])
    function search() {
        if (!searchParams.has("q") && !searchParams.has("author")) {
            navigate(`/search?q=${value}&offset=0&limit=10`)
        } else {
            if (value === '' && authorId) {
                searchParams.delete("q")
            } else {
                searchParams.set("q", value)
            }
            searchParams.set("offset", "0")
            setSearchParams(searchParams)
        }
    }
    function removeAuthorFilter() {
        // remove author filter
        searchParams.delete("author")
        searchParams.set("q", value)
        setSearchParams(searchParams)
    }

    return (
        <div className="search_container">
            <div className="text-field-block">
                {
                    authorId ?
                    <div>
                        <InputChip
                            className="search_mobile_chip"
                            onRemove={removeAuthorFilter}
                            removable
                            removeOnly
                        >
                            <Icon slot="icon">person</Icon>
                        </InputChip>
                        <InputChip
                            className="search_chip"
                            label={authorInfo.name}
                            onRemove={removeAuthorFilter}
                            removable
                            removeOnly
                        />
                    </div>

                    : <></>
                }
                <input
                    className="text-field"
                    placeholder={authorId ? 'поиск по автору' : 'поиск на YaBL'}
                    onChange={e => setValue(e.target.value)}
                    value={value}
                    onKeyDown={e => {
                        if (e.key === "Enter") search()
                        if (e.key === "Backspace" && e.target.selectionStart === 0 && e.target.selectionEnd === 0 && searchParams.has("author")) removeAuthorFilter()
                    }}
                />
            </div>

            <FilledButton
                className="search_button"
                onClick={search}
            >
                <span className="search_button_text">Поиск</span>
                <Icon className="search_button_icon">search</Icon>
            </FilledButton>
        </div>
    )
}

export default Search