"use client";
import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { useState } from "react";
import Diamond from "../../icons-legacy/Diamond.js";
import SortArrow from "../../icons-legacy/SortArrow.js";
import { useOutsideAlerter } from "../../hooks/useOutsideAlerter.js";
import { useTheme } from "../../theme/useTheme.js";
import { Flex } from "../../atoms/Flex/Flex.js";
import { Opacity } from "../../tokens/Opacity.js";
import { Spacing } from "../../tokens/Spacing.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
import { Text } from "../../atoms/Text/Text.js";
const SortDropDown = ({
  sortValue,
  sortOptions,
  position = {},
  setSortDirection,
  sortDirection = "asc"
}) => {
  const [dropDownOpen, setDropDownOpen] = useState(false);
  const [hoverItem, setHoverItem] = useState(sortValue);
  const options = sortOptions.map((option) => {
    return {
      value: option.value,
      onSelect: (_event) => {
        var _a;
        (_a = option.onSelect) == null ? void 0 : _a.call(option, option.value);
        setDropDownOpen(false);
      }
    };
  });
  const { theme } = useTheme();
  const outsideAlerter = useOutsideAlerter(() => {
    setDropDownOpen(false);
  });
  return /* @__PURE__ */ jsxs(
    Flex,
    {
      ...outsideAlerter,
      sx: {
        right: 0,
        position: "relative",
        cursor: "pointer",
        alignItems: "center",
        justifyContent: "center",
        pr: 0,
        width: "fit-content",
        minWidth: "138px",
        borderRadius: "3rem",
        border: dropDownOpen ? "none" : "White16",
        backgroundColor: dropDownOpen ? "transparent" : "Chip",
        fontSize: "14px",
        height: "36px"
      },
      children: [
        /* @__PURE__ */ jsxs(Flex, { sx: { opacity: dropDownOpen ? 0 : 1, padding: "8px 0px", alignItems: "center" }, children: [
          /* @__PURE__ */ jsxs(
            "span",
            {
              onClick: (event) => {
                event.stopPropagation();
                setDropDownOpen(!dropDownOpen);
                setHoverItem(sortValue);
              },
              sx: {
                display: "flex",
                alignItems: "center",
                pr: 2,
                borderRight: "White16",
                whiteSpace: "nowrap",
                color: "Text",
                opacity: dropDownOpen ? 0 : Opacity["100%"],
                height: "20px",
                "&:hover": {
                  color: "White"
                }
              },
              children: [
                "     ",
                sortValue
              ]
            }
          ),
          /* @__PURE__ */ jsx(
            "div",
            {
              onClick: (event) => {
                event.stopPropagation();
                setSortDirection == null ? void 0 : setSortDirection(sortDirection === "asc" ? "desc" : "asc");
              },
              sx: {
                display: "flex",
                alignItems: "center",
                opacity: Opacity["88%"],
                height: "20px",
                width: 34,
                pl: Spacing["8px"],
                "&:hover": {
                  opacity: Opacity["100%"]
                }
              },
              children: /* @__PURE__ */ jsx(SortArrow, { stroke: theme.colors.White, direction: sortDirection === "desc" ? "down" : "up" })
            }
          )
        ] }),
        dropDownOpen && /* @__PURE__ */ jsxs(
          "ul",
          {
            className: "DropDownMenu",
            sx: {
              listStyleType: "none",
              display: "flex",
              flexDirection: "column",
              position: "absolute",
              zIndex: 20,
              appearance: "none",
              p: Spacing["32px"],
              bg: "Panes",
              borderRadius: `${BorderRadius.M}`,
              minWidth: "248px",
              top: "-57.5px",
              left: "-14px",
              ...position
            },
            children: [
              /* @__PURE__ */ jsx(
                Text.C10,
                {
                  color: "White88",
                  sx: {
                    mx: Spacing["4px"],
                    pb: Spacing["8px"],
                    mb: Spacing["4px"],
                    opacity: Opacity["64%"]
                  },
                  children: "Sort By"
                }
              ),
              /* @__PURE__ */ jsx(
                "div",
                {
                  onClick: (event) => {
                    event.stopPropagation();
                    setDropDownOpen(!dropDownOpen);
                    setHoverItem(sortValue);
                  },
                  sx: { pb: 3, borderBottom: "White16" },
                  children: /* @__PURE__ */ jsx(Text.P14, { as: "div", color: "White88", children: sortValue })
                }
              ),
              options.map((option) => {
                return /* @__PURE__ */ jsxs(
                  "li",
                  {
                    onClick: (event) => {
                      event.preventDefault();
                      option.onSelect(event);
                    },
                    onMouseEnter: () => setHoverItem(option.value),
                    className: "drop-item",
                    sx: {
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                      variant: "text.medium",
                      cursor: "pointer",
                      pt: Spacing["16px"],
                      transition: "all 0.3s ease",
                      opacity: hoverItem === option.value || sortValue === option.value ? Opacity["100%"] : Opacity["64%"],
                      color: "White88",
                      fontSize: "14px",
                      letterSpacing: "0",
                      lineHeight: "20px",
                      borderRadius: BorderRadius.M,
                      "&.dropdown-dot": {
                        visibility: "hidden",
                        "&:hover": {
                          visibility: "visible"
                        }
                      },
                      "&:hover": {
                        opacity: Opacity["100%"]
                      },
                      "&:last-of-type": {
                        mb: "0"
                      }
                    },
                    children: [
                      option.value,
                      /* @__PURE__ */ jsxs(
                        "span",
                        {
                          className: "dropdown-dot",
                          sx: {
                            color: "White88",
                            opacity: hoverItem === option.value || sortValue === option.value ? Opacity["100%"] : 0
                          },
                          children: [
                            " ",
                            /* @__PURE__ */ jsx(
                              Diamond,
                              {
                                fill: theme.colors.White,
                                opacity: sortValue === option.value ? Opacity["100%"] : Opacity["64%"]
                              }
                            ),
                            " "
                          ]
                        }
                      )
                    ]
                  },
                  option.value
                );
              })
            ]
          }
        )
      ]
    }
  );
};
export {
  SortDropDown
};
