"use client";

import { Fragment } from "react";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { SortIcon, CheckIcon } from "@/modules/icons";
import { useProductStore } from "@/zustand/productStore";
import { SortByProduct } from "@/lib/types/enums";
import { DownArrowIcon } from "@/modules/icons/down-arrow-icon";

export type SortByOption =
  | SortByProduct.ALL
  | SortByProduct.POPULARITY
  | SortByProduct.LATEST
  | SortByProduct.BEST_SELL
  | SortByProduct.LOW_TO_HIGH
  | SortByProduct.HIGH_TO_LOW;

export default function Page() {
  const { sortBy, setSortBy } = useProductStore();

  const sortOptions: Array<{
    group?: string;
    items: Array<{ label: string; value: SortByOption }>;
  }> = [
      // {
      //   group: "Price",
      //   items: [
      //     { label: SortByProduct.LOW_TO_HIGH, value: SortByProduct.LOW_TO_HIGH },
      //     { label: SortByProduct.HIGH_TO_LOW, value: SortByProduct.HIGH_TO_LOW },
      //   ],
      // },
      {
        items: [
          { label: SortByProduct.POPULARITY, value: SortByProduct.POPULARITY },
          { label: SortByProduct.LATEST, value: SortByProduct.LATEST },
          { label: SortByProduct.BEST_SELL, value: SortByProduct.BEST_SELL },
        ],
      },
      {
        items: [{ label: "Default", value: SortByProduct.ALL }],
      },
    ];
  return (
    <DropdownMenu.Root modal={false}>
      <DropdownMenu.Trigger asChild>
        <button
          className="flex items-center justify-between p-2.5 bg-white border border-gray-300 data-[state=open]:border-gray-500 rounded-lg shadow-sm hover:bg-white focus:outline-none"
          aria-label="Sort by"
        >
          <SortIcon />
          <span className="mx-2.5">
            {sortBy !== "all" ? sortBy : "Sort By"}
          </span>
          <DownArrowIcon />
        </button>
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>
        <DropdownMenu.Content
          className="bg-white rounded-xl py-3.5 px-4 min-w-[214px] shadow-sm"
          sideOffset={5}
        >
          {sortOptions.map((group, groupIndex) => (
            <Fragment key={groupIndex}>
              {groupIndex > 0 && (
                <DropdownMenu.Separator className="border-t border-gray-300 my-3" />
              )}

              <div className="flex flex-col gap-1.5">
                {group.group && (
                  <DropdownMenu.Label className="text-xs text-left text-gray-400">
                    {group.group}
                  </DropdownMenu.Label>
                )}
                <div className="flex flex-col gap-3">
                  {group.items.map((item) => (
                    <SortOptionItem
                      key={item.value}
                      label={item.label}
                      selected={sortBy === item.value}
                      onSelect={() => setSortBy(item.value)}
                    />
                  ))}
                </div>
              </div>
            </Fragment>
          ))}
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}

function SortOptionItem({
  label,
  selected,
  onSelect,
}: {
  label: string;
  selected: boolean;
  onSelect: () => void;
}) {
  return (
    <DropdownMenu.Item
      className="flex items-center justify-between cursor-pointer focus:outline-none"
      onSelect={onSelect}
    >
      <span
        className={`text-sm ${selected ? "text-gray-900 font-medium" : "text-gray-600 font-normal"
          }`}
      >
        {label}
      </span>
      {selected && <CheckIcon />}
    </DropdownMenu.Item>
  );
}