// @ts-ignore
import { useState } from "react";
// import Link from "next/link"
import styles from "styles/search/SearchOption.module.css"
import Emoji from "../Emoji";
// import toast from "react-hot-toast";
import { useRouter } from "next/router";
// @ts-ignore
import {FormEvent} from "react";
import { SearchOptionProps } from "helper/types";

const SearchOption = ({ placeholder = "Placeholder",
to = "/", pattern = ".*", maxLength = Infinity,
minLength = Infinity, numberOnly = false, showMax = true,
maxNum, minNum, }:SearchOptionProps) => {
    const [disabled, setDisabled] = useState(true)
    const [content, setContent] = useState("")
    const router = useRouter()
    let emoji = <Emoji parentSize={"100%"}
    childSize={"50%"} alt="🔎" element="search" alignCenter={true} />
    return (
        <form onSubmit={(e) => {
            e.preventDefault()
            if (disabled) return
            setDisabled(true)
            router.push(`${to}/${encodeURI(content)}`)
        }}  className={`${styles.input} mb-3`}>
            <input required pattern={numberOnly ? "[0-9]*" : (pattern ? pattern : ".*")}
                onChange={(e:FormEvent<HTMLInputElement>) => {
                    let val = e.currentTarget.value
                    // @ts-ignore
                    if (numberOnly) {
                        if (!isNaN(+val) && /[1-9]/.test(val)) {
                            setDisabled(false)
                            setContent(val)
                            if (maxNum && Number(val) >= maxNum) {

                                if(maxLength) setContent(val.slice(0, maxLength))
                            } else if (minNum && Number(val) < minNum) {
                                setDisabled(true)
                            }
                        } else {
                            if (val.length === 0) {
                                setDisabled(true)
                                setContent(val)
                            }

                        }
                    } else {
                        val = val.trimStart()
                        setContent(val)
                        if (val.length > maxLength) {
                            setContent(val.slice(0, maxLength))
                        }
                        if (val.length < minLength) {
                            setDisabled(true)
                        }
                        else {
                            setDisabled(false)
                        }
                    }
                }}
                value={content} readOnly={false} minLength={minLength}
                maxLength={maxLength} type="text"
                placeholder={placeholder} style={{
                    width: 'calc(100% - 3rem)',
                    backgroundColor: 'transparent',
                }} />
            {disabled ?
                <button data-tooltip-pos="bottom" type="submit" disabled={disabled} className={`tooltip ${styles.searchButton}`} data-tip={disabled ?(minNum && minNum >= 100000000) ?
                    `A ${placeholder} must be a valid number and a valid ${placeholder}` : `A ${placeholder} must be ${!numberOnly ? `between ${minLength} and ${maxLength} characters long` : ''} ${numberOnly ? `greater than ${minNum ? minNum : minLength}${showMax ? ` and smaller than ${maxNum ? maxNum : maxLength}` : ""}, and it must be a valid number` : ""}` : ""}>
                    {emoji}
                </button> :
                    <button type="submit" className={styles.searchButton}>
                        <span>
                        {emoji}
                        </span>
                    </button>
            }
            <br />
        </form>
    )
}




export default SearchOption