import { observer } from "mobx-react";
import type { ReactNode } from "react";
import { useEffect, useRef, useState } from "react";
// buzzwareTech imports
import { useTranslation } from "@buzzwaretech/i18n";
import type { IModule } from "@buzzwaretech/types";
import { ComboDropDown } from "@buzzwaretech/ui";
import { cn } from "@buzzwaretech/utils";
// hooks
import { useDropdown } from "@/hooks/use-dropdown";
import { usePlatformOS } from "@/hooks/use-platform-os";
// local imports
import { DropdownButton } from "../buttons";
import { BUTTON_VARIANTS_WITHOUT_TEXT } from "../constants";
import type { TDropdownProps } from "../types";
import { ModuleButtonContent } from "./button-content";
import { ModuleOptions } from "./module-options";

type TModuleDropdownBaseProps = TDropdownProps & {
  button?: ReactNode;
  dropdownArrow?: boolean;
  dropdownArrowClassName?: string;
  getModuleById: (moduleId: string) => IModule | null;
  itemClassName?: string;
  moduleIds?: string[];
  onClose?: () => void;
  onDropdownOpen?: () => void;
  projectId: string | undefined;
  renderByDefault?: boolean;
  showCount?: boolean;
} & (
    | {
        multiple: false;
        onChange: (val: string | null) => void;
        value: string | null;
      }
    | {
        multiple: true;
        onChange: (val: string[]) => void;
        value: string[] | null;
      }
  );

export const ModuleDropdownBase = observer(function ModuleDropdownBase(
  props: TModuleDropdownBaseProps,
) {
  const {
    button,
    buttonClassName,
    buttonContainerClassName,
    buttonVariant,
    className = "",
    disabled = false,
    dropdownArrow = false,
    dropdownArrowClassName = "",
    getModuleById,
    hideIcon = false,
    itemClassName = "",
    moduleIds,
    multiple,
    onChange,
    onClose,
    placeholder = "",
    placement,
    projectId,
    renderByDefault = true,
    showCount = false,
    showTooltip = false,
    tabIndex,
    value,
  } = props;
  // i18n
  const { t } = useTranslation();
  // states
  const [isOpen, setIsOpen] = useState(false);
  // refs
  const dropdownRef = useRef<HTMLDivElement | null>(null);
  const inputRef = useRef<HTMLInputElement | null>(null);
  // popper-js refs
  const [referenceElement, setReferenceElement] =
    useState<HTMLButtonElement | null>(null);
  // store hooks
  const { isMobile } = usePlatformOS();

  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
    dropdownRef,
    inputRef,
    isOpen,
    onClose,
    setIsOpen,
  });

  const dropdownOnChange = (val: string & string[]) => {
    onChange(val);
    if (!multiple) handleClose();
  };

  const comboboxProps = {
    value,
    onChange: dropdownOnChange,
    disabled,
    multiple,
  };

  useEffect(() => {
    if (isOpen && inputRef.current && !isMobile) {
      inputRef.current.focus();
    }
  }, [isOpen, isMobile]);

  const comboButton = (
    <>
      {button ? (
        <button
          ref={setReferenceElement}
          type="button"
          className={cn(
            "clickable block h-full w-full outline-none hover:bg-layer-1",
            buttonContainerClassName,
          )}
          onClick={handleOnClick}
          disabled={disabled}
          tabIndex={tabIndex}
        >
          {button}
        </button>
      ) : (
        <button
          ref={setReferenceElement}
          type="button"
          className={cn(
            "clickable block h-full max-w-full outline-none hover:bg-layer-1",
            {
              "cursor-not-allowed text-secondary": disabled,
              "cursor-pointer": !disabled,
            },
            buttonContainerClassName,
          )}
          onClick={handleOnClick}
          disabled={disabled}
          tabIndex={tabIndex}
        >
          <DropdownButton
            className={buttonClassName}
            isActive={isOpen}
            tooltipHeading={t("common.module")}
            tooltipContent={
              Array.isArray(value)
                ? `${value
                    .map((moduleId) => getModuleById(moduleId)?.name)
                    .toString()
                    .replaceAll(",", ", ")}`
                : ""
            }
            showTooltip={showTooltip}
            variant={buttonVariant}
            renderToolTipByDefault={renderByDefault}
          >
            <ModuleButtonContent
              disabled={disabled}
              dropdownArrow={dropdownArrow}
              dropdownArrowClassName={dropdownArrowClassName}
              hideIcon={hideIcon}
              hideText={BUTTON_VARIANTS_WITHOUT_TEXT.includes(buttonVariant)}
              placeholder={placeholder}
              showCount={showCount}
              showTooltip={showTooltip}
              value={value}
              onChange={onChange as any}
              className={itemClassName}
            />
          </DropdownButton>
        </button>
      )}
    </>
  );

  return (
    <ComboDropDown
      as="div"
      ref={dropdownRef}
      className={cn("h-full", className)}
      onKeyDown={handleKeyDown}
      button={comboButton}
      renderByDefault={renderByDefault}
      {...comboboxProps}
    >
      {isOpen && projectId && (
        <ModuleOptions
          isOpen={isOpen}
          placement={placement}
          referenceElement={referenceElement}
          multiple={multiple}
          getModuleById={getModuleById}
          moduleIds={moduleIds}
          value={value}
        />
      )}
    </ComboDropDown>
  );
});