'use client'

import type { ReactNode } from 'react'

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'
import { SlidersHorizontalIcon } from 'lucide-react'
import { usePathname, useSearchParams } from 'next/navigation'
import { useEffect, useState } from 'react'

type ShopMobileFilterDrawerProps = {
  children: ReactNode
}

const countActiveParams = (queryString: string): number => {
  const params = new URLSearchParams(queryString)
  const keys = [
    'attribute',
    'category',
    'maxPrice',
    'minPrice',
    'q',
    'segment',
    'size',
    'sort',
    'usecase',
  ]

  return keys.reduce((count, key) => {
    if (key === 'sort' && (params.get(key) || 'title') === 'title') {
      return count
    }

    return count + params.getAll(key).length
  }, 0)
}

export function ShopMobileFilterDrawer({ children }: ShopMobileFilterDrawerProps) {
  const pathname = usePathname()
  const queryString = useSearchParams().toString()
  const [isOpen, setIsOpen] = useState(false)
  const activeCount = countActiveParams(queryString)

  useEffect(() => {
    setIsOpen(false)
  }, [pathname, queryString])

  return (
    <div className="md:hidden">
      <Sheet onOpenChange={setIsOpen} open={isOpen}>
        <SheetTrigger className="inline-flex w-full items-center justify-center gap-2 rounded-2xl border border-[#dbe8d7] bg-white px-4 py-3.5 text-sm font-semibold text-[#063f2b] shadow-sm transition hover:border-[#8aac95] hover:bg-[#f2f7ee]">
          <SlidersHorizontalIcon className="h-4 w-4" />
          Filter Produk
          {activeCount > 0 ? (
            <span className="rounded-full bg-[#003b29] px-2 py-0.5 text-xs text-white">
              {activeCount}
            </span>
          ) : null}
        </SheetTrigger>

        <SheetContent className="overflow-y-auto bg-[#f8faf6] px-4" side="left">
          <SheetHeader className="px-0 pt-4 pb-0">
            <SheetTitle className="text-[#063f2b]">Filter Produk</SheetTitle>
            <SheetDescription className="text-[#607668]">
              Persempit katalog tanaman sesuai kebutuhan Anda.
            </SheetDescription>
          </SheetHeader>

          <div className="py-6">{children}</div>
        </SheetContent>
      </Sheet>
    </div>
  )
}