import React from "react"
import TextField, { TextFieldProps } from "@/atoms/TextField/TextField"
import Button from "@/atoms/Button/Button"
import Spinner from "@/atoms/Spinner/Spinner"
import "./Search.scss"

interface SearchProps extends TextFieldProps {
    onSearch?: (value: string) => void
    inputClassName?: string
    buttonStyle?: "icon" | "text"
    buttonClassName?: string
    searchOnReset?: boolean
    status?: "" | "loading" | "disabled"
}

const Search = ({
    value,
    onChange,
    onKeyDown,
    onSearch,
    className = "",
    inputClassName = "",
    buttonClassName = "",
    buttonStyle = "icon",
    searchOnReset = false,
    status = "",
    ...props
}: SearchProps) => {
    const defaultValue = value?.toString() ?? "" ?? props.defaultValue
    const [internalValue, setInternalValue] = React.useState(defaultValue)

    React.useEffect(() => {
        setInternalValue(defaultValue)
    }, [defaultValue])

    const handleOnSearch = () => {
        if (onSearch) onSearch(internalValue)
    }

    const handleInput = (event: any) => {
        const oldValue = internalValue
        setInternalValue(event.target.value)
        if (onChange) {
            onChange(event.target.value, event)
        } else if (searchOnReset && event.target.value == "" && oldValue != "" && onSearch) {
            // force search on reset
            onSearch("")
        }
    }

    const handleOnKeyDown = (event: any) => {
        if (event.keyCode === 13) {
            event.preventDefault()
            if (onKeyDown) onKeyDown(event)
            handleOnSearch()
        }
    }

    return (
        <TextField
            type={"search"}
            value={internalValue}
            onKeyDown={handleOnKeyDown}
            onInput={handleInput}
            placeholder={"Search..."}
            groupClassName={`search ${className}`}
            className={`${inputClassName}`}
            disabled={status === "disabled"}
            {...props}
        >
            {buttonStyle === "icon" && (
                <Button
                    onClick={handleOnSearch}
                    className={buttonClassName}
                    disabled={status === "disabled" || status === "loading"}
                >
                    {status === "loading" ? <Spinner animation="border" size="sm" /> : <i className="bi bi-search"></i>}
                </Button>
            )}
            {buttonStyle === "text" && (
                <Button
                    onClick={handleOnSearch}
                    className={buttonClassName}
                    disabled={status === "disabled" || status === "loading"}
                >
                    Search
                </Button>
            )}
        </TextField>
    )
}

export default Search
export { Search, SearchProps }