"use client";
/*
 * Documentation:
 * Accordion — https://app.subframe.com/f023064a5ca0/library?component=Accordion_d2e81e20-863a-4027-826a-991d8910efd9
 * Avatar — https://app.subframe.com/f023064a5ca0/library?component=Avatar_bec25ae6-5010-4485-b46b-cf79e3943ab2
 * Dropdown Menu — https://app.subframe.com/f023064a5ca0/library?component=Dropdown+Menu_99951515-459b-4286-919e-a89e7549b43b
 */

import React from "react";
import { FeatherCheck } from "@subframe/core";
import { FeatherLayers } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";
import { Accordion } from "../Accordion";
import { Avatar } from "../Avatar";

export interface DropdownDividerProps
  extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
}

const DropdownDivider = React.forwardRef<HTMLDivElement, DropdownDividerProps>(
  function DropdownDivider(
    { className, ...otherProps }: DropdownDividerProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "flex w-full items-start gap-2 px-1 py-1",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div className="flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-border-default" />
      </div>
    );
  }
);

export interface DropdownItemProps
  extends React.ComponentProps<typeof SubframeCore.DropdownMenu.Item> {
  children?: React.ReactNode;
  icon?: React.ReactNode;
  iconRight?: React.ReactNode;
  image?: string;
  selected?: boolean;
  showCheckbox?: boolean;
  className?: string;
}

const DropdownItem = React.forwardRef<HTMLDivElement, DropdownItemProps>(
  function DropdownItem(
    {
      children,
      icon = null,
      iconRight = null,
      image,
      selected = false,
      showCheckbox = false,
      className,
      ...otherProps
    }: DropdownItemProps,
    ref
  ) {
    return (
      <SubframeCore.DropdownMenu.Item asChild={true} {...otherProps}>
        <div
          className={SubframeUtils.twClassNames(
            "group/adcae8d6 flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 group/dropdown-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
            {
              "bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
                selected,
            },
            className
          )}
          ref={ref}
        >
          <div
            className={SubframeUtils.twClassNames(
              "hidden h-4 w-4 flex-none flex-col items-center justify-center rounded-sm border-2 border-solid border-border-strong bg-surface-neutral-secondary",
              {
                flex: showCheckbox,
                "border-2 border-solid border-brand-brand-border-solid-default bg-brand-brand-surface-solid-default":
                  selected,
              }
            )}
          >
            <FeatherCheck
              className={SubframeUtils.twClassNames(
                "hidden text-body-extra-small-semibold-150 font-body-extra-small-semibold-150 text-icon-neutral-on-solid",
                { "inline-flex": selected }
              )}
            />
          </div>
          {image ? (
            <img
              className="h-6 w-6 flex-none rounded-round object-cover"
              src={image}
            />
          ) : null}
          {icon ? (
            <SubframeCore.IconWrapper
              className={SubframeUtils.twClassNames(
                "text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary",
                { "text-icon-neutral-primary": selected }
              )}
            >
              {icon}
            </SubframeCore.IconWrapper>
          ) : null}
          {children ? (
            <span
              className={SubframeUtils.twClassNames(
                "line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary",
                { "text-text-neutral-primary": selected }
              )}
            >
              {children}
            </span>
          ) : null}
          {iconRight ? (
            <SubframeCore.IconWrapper
              className={SubframeUtils.twClassNames(
                "text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary",
                { "text-icon-neutral-primary": selected }
              )}
            >
              {iconRight}
            </SubframeCore.IconWrapper>
          ) : null}
        </div>
      </SubframeCore.DropdownMenu.Item>
    );
  }
);

export interface DropdownUserItemProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
  image?: string;
  selected?: boolean;
  showCheckbox?: boolean;
  className?: string;
}

const DropdownUserItem = React.forwardRef<
  HTMLDivElement,
  DropdownUserItemProps
>(function DropdownUserItem(
  {
    title,
    subtitle,
    image,
    selected = false,
    showCheckbox = false,
    className,
    ...otherProps
  }: DropdownUserItemProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/0d3c57ad flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 group/user-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
        {
          "bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
            selected,
        },
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <div
        className={SubframeUtils.twClassNames(
          "hidden h-4 w-4 flex-none flex-col items-center justify-center rounded-sm border-2 border-solid border-border-strong bg-surface-neutral-secondary",
          {
            flex: showCheckbox,
            "border-2 border-solid border-brand-brand-border-solid-default bg-brand-brand-surface-solid-default":
              selected,
          }
        )}
      >
        <FeatherCheck
          className={SubframeUtils.twClassNames(
            "hidden text-body-extra-small-semibold-150 font-body-extra-small-semibold-150 text-icon-neutral-on-solid",
            { "inline-flex": selected }
          )}
        />
      </div>
      <Avatar size="small" image={image}>
        OR
      </Avatar>
      <div className="flex grow shrink-0 basis-0 flex-col items-start">
        {title ? (
          <span className="line-clamp-1 w-full text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
            {title}
          </span>
        ) : null}
        {subtitle ? (
          <span className="line-clamp-1 w-full text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary">
            {subtitle}
          </span>
        ) : null}
      </div>
    </div>
  );
});

export interface DropdownCustomItemProps
  extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  className?: string;
}

const DropdownCustomItem = React.forwardRef<
  HTMLDivElement,
  DropdownCustomItemProps
>(function DropdownCustomItem(
  { children, className, ...otherProps }: DropdownCustomItemProps,
  ref
) {
  return children ? (
    <div
      className={SubframeUtils.twClassNames(
        "flex w-full flex-col items-start gap-2 rounded-md px-3 py-2",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {children}
    </div>
  ) : null;
});

export interface DropdownNestedItemProps
  extends React.ComponentProps<typeof Accordion> {
  children?: React.ReactNode;
  label?: React.ReactNode;
  icon?: React.ReactNode;
  className?: string;
}

const DropdownNestedItem = React.forwardRef<
  React.ElementRef<typeof Accordion>,
  DropdownNestedItemProps
>(function DropdownNestedItem(
  {
    children,
    label,
    icon = <FeatherLayers />,
    className,
    ...otherProps
  }: DropdownNestedItemProps,
  ref
) {
  return (
    <Accordion
      className={SubframeUtils.twClassNames(
        "group/ca3b20a3 cursor-pointer group/nested-item",
        className
      )}
      variant="ghost"
      trigger={
        <div className="flex h-8 w-full flex-none items-center gap-2 rounded-md px-3 group-hover/ca3b20a3:bg-surface-neutral-tertiary">
          {icon ? (
            <SubframeCore.IconWrapper className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-primary">
              {icon}
            </SubframeCore.IconWrapper>
          ) : null}
          {label ? (
            <span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
              {label}
            </span>
          ) : null}
          <Accordion.Chevron />
        </div>
      }
      ref={ref}
      {...otherProps}
    >
      {children ? (
        <div className="flex w-full flex-col items-start gap-1">{children}</div>
      ) : null}
    </Accordion>
  );
});

export interface DropdownMenuRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  className?: string;
}

const DropdownMenuRoot = React.forwardRef<
  HTMLDivElement,
  DropdownMenuRootProps
>(function DropdownMenuRoot(
  { children, className, ...otherProps }: DropdownMenuRootProps,
  ref
) {
  return children ? (
    <div
      className={SubframeUtils.twClassNames(
        "flex min-w-[192px] flex-col items-start rounded-md border border-solid border-border-default bg-surface-neutral-secondary px-1 py-1 shadow-lg",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {children}
    </div>
  ) : null;
});

export const DropdownMenu = Object.assign(DropdownMenuRoot, {
  DropdownDivider,
  DropdownItem,
  DropdownUserItem,
  DropdownCustomItem,
  DropdownNestedItem,
});