"use client"

import { usePathname, useRouter, useSearchParams } from "next/navigation"
import React, { FormEvent, useState } from "react"
import { Select, SelectContent, SelectTrigger, SelectItem, SelectValue } from "./ui/select"
import { SitesCombobox } from "./SitesCombobox"
import { FILTER_TIMES } from "@/utils"

type Props = {
  value: string
  placeholder?: string
  className?: string
  filters?: {
    sites: { value: string; label: string }[]
  }
}

const SimplifiedSearchBar = ({
  value: initialValue,
  placeholder,
  filters,
  className
}: Props) => {
  const searchParams = useSearchParams()
  const pathname = usePathname()
  const router = useRouter()
  const [value, setValue] = useState<string>(initialValue)
  const handleSearch = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    const newSearchParams = new URLSearchParams(searchParams ?? undefined)

    if (value) {
      newSearchParams.set("q", value)
    } else {
      newSearchParams.delete("q")
    }

    router.push(`${pathname}?${newSearchParams}`)
  }
  return (
    <form
      className={`flex items-center text-lg border-b border-primary pb-2`}
      onSubmit={handleSearch}
    >
      <div className="flex-1 flex flex-row max-w-full">
        <span className="text-white mr-2">results: </span>
        <fieldset
          className={`${
            value && value !== ""
              ? `after:content-['"'] before:content-['"'] relative after:absolute after:-right-1`
              : "w-full"
          } text-primary ${className}`}
        >
          <input
            className={`flex-grow inline bg-transparent placeholder-gray-400 outline-none ring-none text-primary ${
              value && value !== "" ? "" : "w-full"
            }`}
            placeholder={placeholder}
            value={value}
            onChange={(e) => setValue(e.target.value)}
            size={value.length}
          />
        </fieldset>
      </div>
      <div className="w-56 flex gap-2">
        {/* Dropdown component should be here */}
        <SitesCombobox />
        {/* Dropdown component should be here */}
        <Select defaultValue={"0"}>
          <SelectTrigger className="hover:bg-muted w-auto">
            <SelectValue placeholder="Time ago" />
          </SelectTrigger>
          <SelectContent>
            {FILTER_TIMES.map((v) => (
              <SelectItem
                value={String(v.value)}
                key={`FilteTimeSelectItem_${v.value}`}
              >
                {v.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </form>
  )
}

export default SimplifiedSearchBar