import { useState, useMemo } from "react";
import { ListCategory } from "~/types/contacts.types";
import { type RenderCard, ListCategoriesCardDeck } from "~/components/building-blocks/CardDeckV2";
import { useFloating, useFocus, FloatingPortal, useInteractions, size } from "@floating-ui/react";

type SelectCategoryInputProps = {
  value: ListCategory | Pick<ListCategory, "name"> | null;
  onChange?: (item: ListCategory | Pick<ListCategory, "name"> | null) => void;
};

export const SelectCategoryInput = ({ value, onChange }: SelectCategoryInputProps) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const filters = useMemo(() => ({ searchText: value?.name ?? "" }), [value]);

  const { refs, floatingStyles, context } = useFloating({
    open: isMenuOpen,
    onOpenChange: setIsMenuOpen,
    middleware: [
      size({
        apply({ rects, elements }) {
          Object.assign(elements.floating.style, {
            minWidth: `${rects.reference.width}px`,
          });
        },
      }),
    ],
  });
  const focus = useFocus(context);
  const { getReferenceProps, getFloatingProps } = useInteractions([focus]);

  const onItemClick = (item: ListCategory, isSelected: boolean) => {
    onChange?.(isSelected ? item : { name: "" });
  };

  const renderCard: RenderCard<ListCategory> = ({ cardData }) => (
    <div
      onClick={() => {
        const isSelected = (value as ListCategory)?.id === cardData.id;
        onItemClick(cardData, !isSelected);
      }}
    >
      <input type="checkbox" />
      {cardData.name}
    </div>
  );

  return (
    <div
      tabIndex={-1}
      className="relative mt-1 inline-block w-full flex-1"
      {...getReferenceProps()}
      ref={refs.setReference}
    >
      <input type="text" className="block w-full" readOnly value={value?.name ?? ""} />

      {isMenuOpen && (
        <FloatingPortal>
          <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
            <ListCategoriesCardDeck
              filters={filters}
              renderCard={renderCard}
              renderPlaceholderCard={() => <div>Loading...</div>}
              cardHeight={50}
              maxCardDeckHeight={200}
            />
          </div>
        </FloatingPortal>
      )}
    </div>
  );
};