Product Filters

"use client"

import type { Facet, FilterState } from "@/components/blocks/product-filters/facets"
import { ProductFilters } from "@/components/blocks/product-filters/product-filters"

type StorefrontFilterValue = {
  id: string
  label: string
  count: number
  input: string
  swatch?: { color?: string | null; image?: { previewImage?: { url: string } | null } | null } | null
}

type StorefrontFilter = {
  id: string
  label: string
  type: "LIST" | "PRICE_RANGE" | "BOOLEAN"
  presentation?: "TEXT" | "SWATCH" | "IMAGE" | null
  values: StorefrontFilterValue[]
}

type ProductFilterInput = Record<string, unknown>

export function toFacets(filters: StorefrontFilter[], currencyCode: string): Facet[] {
  return filters.map((filter): Facet => {
    if (filter.type === "PRICE_RANGE") {
      const range = JSON.parse(filter.values[0]?.input ?? "{}") as {
        price?: { min?: number; max?: number }
      }
      return {
        id: filter.id,
        label: filter.label,
        type: "range",
        min: Math.floor(range.price?.min ?? 0),
        max: Math.ceil(range.price?.max ?? 0),
        step: 5,
        currencyCode,
      }
    }
    if (filter.type === "BOOLEAN") {
      const yes = filter.values.find((value) => value.input.includes("true"))
      return { id: filter.id, label: filter.label, type: "boolean", count: yes?.count }
    }
    return {
      id: filter.id,
      label: filter.label,
      type: filter.presentation === "SWATCH" ? "swatch" : "list",
      values: filter.values.map((value) => ({
        value: value.input,
        label: value.label,
        count: value.count,
        swatch: value.swatch
          ? {
              color: value.swatch.color ?? undefined,
              image: value.swatch.image?.previewImage?.url,
            }
          : undefined,
      })),
    }
  })
}

export function toProductFilters(
  filters: StorefrontFilter[],
  state: FilterState
): ProductFilterInput[] {
  return filters.flatMap((filter): ProductFilterInput[] => {
    const value = state[filter.id]
    if (value === undefined) return []
    if (filter.type === "PRICE_RANGE" && Array.isArray(value)) {
      return [{ price: { min: Number(value[0]), max: Number(value[1]) } }]
    }
    if (filter.type === "BOOLEAN" && value === true) {
      const yes = filter.values.find((item) => item.input.includes("true"))
      return yes ? [JSON.parse(yes.input) as ProductFilterInput] : []
    }
    return Array.isArray(value)
      ? value.map((input) => JSON.parse(String(input)) as ProductFilterInput)
      : []
  })
}

export function CollectionFilters({
  filters,
  value,
  total,
  onFilter,
}: {
  filters: StorefrontFilter[]
  value: FilterState
  total: number
  onFilter: (input: ProductFilterInput[], state: FilterState) => void
}) {
  return (
    <ProductFilters
      facets={toFacets(filters, "USD")}
      value={value}
      resultCount={total}
      onValueChange={(next) => onFilter(toProductFilters(filters, next), next)}
    />
  )
}

"use client"

import type { Facet, FilterState } from "@/components/blocks/product-filters/facets"
import { FilterSheet } from "@/components/blocks/product-filters/filter-sheet"
import { ProductFilters } from "@/components/blocks/product-filters/product-filters"

type FacetDistribution = Record<string, Record<string, number>>

type SearchResponse = {
  estimatedTotalHits: number
  facetDistribution: FacetDistribution
  facetStats?: Record<string, { min: number; max: number }>
}

type SearchClient = {
  search: (query: string, options: { filter: string[]; facets: string[]; limit: number }) => Promise<SearchResponse>
}

const facetIds = ["category", "color", "price", "in_stock"]

const quote = (value: string) => `"${value.replace(/"/g, '\\"')}"`

export function toFilterExpressions(state: FilterState) {
  return Object.entries(state).map(([id, value]) => {
    if (value === true) return `${id} = true`
    if (Array.isArray(value) && typeof value[0] === "number") {
      return `${id} ${value[0]} TO ${value[1]}`
    }
    return (value as string[]).map((item) => `${id} = ${quote(item)}`).join(" OR ")
  })
}

export function toFacets(response: SearchResponse): Facet[] {
  const list = (id: string, label: string, type: "list" | "swatch"): Facet => ({
    id,
    label,
    type,
    values: Object.entries(response.facetDistribution[id] ?? {}).map(
      ([value, count]) => ({ value, label: value, count })
    ),
  })
  const price = response.facetStats?.price
  return [
    { id: "in_stock", label: "In stock only", type: "boolean", count: response.facetDistribution.in_stock?.true ?? 0 },
    list("category", "Category", "list"),
    { id: "price", label: "Price", type: "range", min: Math.floor(price?.min ?? 0), max: Math.ceil(price?.max ?? 0), step: 5, currencyCode: "USD" },
    list("color", "Color", "swatch"),
  ]
}

export function SearchFilters({
  client,
  response,
  value,
  onValueChange,
}: {
  client: SearchClient
  response: SearchResponse
  value: FilterState
  onValueChange: (state: FilterState) => void
}) {
  const facets = toFacets(response)
  const count = async (draft: FilterState) => {
    const result = await client.search("", {
      filter: toFilterExpressions(draft),
      facets: facetIds,
      limit: 0,
    })
    return result.estimatedTotalHits
  }

  return (
    <>
      <ProductFilters
        className="max-md:hidden"
        facets={facets}
        value={value}
        onValueChange={onValueChange}
        resultCount={response.estimatedTotalHits}
      />
      <div className="md:hidden">
        <FilterSheet
          facets={facets}
          value={value}
          onValueChange={onValueChange}
          resultCount={response.estimatedTotalHits}
          onCount={count}
        />
      </div>
    </>
  )
}

"use client"

import type { ReactNode } from "react"
import { usePathname, useRouter, useSearchParams } from "next/navigation"

import { ActiveFilters } from "@/components/blocks/product-filters/active-filters"
import {
  filtersFromSearchParams,
  filtersToSearchParams,
  type Facet,
  type FilterState,
} from "@/components/blocks/product-filters/facets"
import { LoadMore } from "@/components/blocks/product-filters/load-more"
import { ProductFilters } from "@/components/blocks/product-filters/product-filters"

const pageSize = 24

export function UrlFilters({
  facets,
  total,
  children,
}: {
  facets: Facet[]
  total: number
  children: (state: FilterState, shown: number) => ReactNode
}) {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const filters = filtersFromSearchParams(facets, searchParams)
  const page = Math.max(1, Number(searchParams.get("page")) || 1)

  const navigate = (next: FilterState, nextPage = 1) => {
    const params = filtersToSearchParams(facets, next, new URLSearchParams(searchParams))
    if (nextPage > 1) params.set("page", String(nextPage))
    else params.delete("page")
    router.replace(`${pathname}?${params}`, { scroll: false })
  }

  return (
    <div className="grid gap-10 md:grid-cols-[15rem_minmax(0,1fr)]">
      <ProductFilters facets={facets} value={filters} onValueChange={navigate} resultCount={total} />
      <div className="flex flex-col gap-5">
        <ActiveFilters facets={facets} value={filters} onValueChange={navigate} />
        {children(filters, Math.min(total, page * pageSize))}
        <LoadMore
          shown={page * pageSize}
          total={total}
          pageSize={pageSize}
          onLoadMore={() => navigate(filters, page + 1)}
        />
      </div>
    </div>
  )
}