import React from 'react'
import ProductBroswer from './ProductBroswer';
import { ProductSearchParams } from '@/types/products';

interface Props {
  searchParams: ProductSearchParams
}

export default function Home({ searchParams }: Props) {
  return (
    <main>
      <ProductBroswer key={JSON.stringify(searchParams)} {...searchParams} />
    </main>
  );
}

import .. // all imports


function sanitize(params: ProductSearchParams) {
  const stringsOnly = Object.fromEntries(Object.entries(params).map(([k, v]) => [k, Array.isArray(v) ? v[0] : v]));
  return {... stringsOnly, pages: Number(stringsOnly.pages)} as Record<Exclude<ProductSearchParam, 'pages'>, string> & { pages: number };
}

const ProductBroswer = (props: ProductSearchParams) => {
  const initialParams = sanitize(props)

  // some product filtering

  async function submitForm(formData: FormData) {
    'use server';
    const newSearchParams = new URLSearchParams();
    allSearchParams.forEach(p => {
      const opts = formData.getAll(p)
      if (opts.length) {
        newSearchParams.append(p, opts.join(","));
      }
    })
    if (initialParams.search) {
      newSearchParams.append("search", initialParams.search)
    }
    redirect(`?${newSearchParams.toString()}`)
  }
  
  function checkHandler(param: ProductSearchParam, values: any) {
    if (!initialParams[param] || param === 'pages') {
      return false;
    }
    const options = initialParams[param].split(',')
    switch (param) {
      case "r": //reduced for simplisity
        return options.includes(values['subreddit_name']);
      case "genders":
        return options.includes(values['country']);
      default:
        return false;
    }
  }

  return (
    <form action={submitForm}>
      <div className="flex justify-center">
        <p className="items-center flex text-sm md:text-md">For-sale in {initialParams.r && "r/"}</p>
        <div className="dropdown dropdown-bottom dropdown-end">
          {!initialParams.r && <div tabIndex={0} role="button" className="btn btn-sm m-1 btn-secondary btn-outline">All Supported Subreddits</div>}
          {initialParams.r && initialParams.r.split(",").length < 3 && <div tabIndex={0} role="button" className="btn btn-sm m-1 btn-secondary">{initialParams.r.split(",").join(", ")}</div>}
          {initialParams.r && initialParams.r.split(",").length >= 3 && <div tabIndex={0} role="button" className="btn btn-sm m-1 btn-secondary">{initialParams.r.split(",").slice(0,2).join(", ")}...</div>}
          <ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-44">
            {subreddit_options.map(subreddit_name => 
              <div key={subreddit_name} className="form-control">
                <label className="label cursor-pointer">
                  <span className="label-text">{subreddit_name}</span>
                  <CheckBox
                    name="r"
                    type="checkbox"
                    id="r"
                    value={subreddit_name}
                    className="checkbox checkbox-sm"
                    checked={checkHandler("r", {subreddit_name})}
                  />
                </label>
              </div>
            )}
          </ul>
        </div>
      </div>
      // other drowdowns / checkboxes and products list
    </form>