kan/apps/web/src/views/card/components/LabelSelector.tsx

import { Fragment } from "react";
import { api } from "~/utils/api";
import { Menu, Transition } from "@headlessui/react";
import { HiMiniPlus } from "react-icons/hi2";
import { useForm } from "react-hook-form";

import { useModal } from "~/providers/modal";

import { HiEllipsisHorizontal } from "react-icons/hi2";

interface LabelSelectorProps {
  cardPublicId: string;
  labels: {
    publicId: string;
    name: string;
    selected: boolean;
    colourCode: string;
  }[];
  isLoading: boolean;
}

export default function LabelSelector({
  cardPublicId,
  labels,
  isLoading,
}: LabelSelectorProps) {
  const { openModal } = useModal();
  const utils = api.useUtils();

  const refetchCard = () => utils.card.byId.refetch({ cardPublicId });

  const addOrRemoveLabel = api.card.addOrRemoveLabel.useMutation({
    onSuccess: async () => {
      await refetchCard();
    },
  });

  const { register, handleSubmit, setValue, watch } = useForm({
    values: Object.fromEntries(
      labels?.map((label) => [label.publicId, label.selected]) ?? [],
    ),
  });

  const onSubmit = (values: Record<string, boolean>) => {
    console.log({ values });
  };

  const selectedLabels = labels.filter((label) => label.selected);

  return (
    <>
      {isLoading ? (
        <div className="flex w-full">
          <div className="h-full w-[175px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
        </div>
      ) : (
        <Menu
          as="div"
          className="relative flex w-full flex-wrap items-center text-left"
        >
          {selectedLabels.length ? (
            <>
              {selectedLabels.map((label) => (
                <Menu.Button
                  key={label.publicId}
                  className="my-1 mr-2 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[12px] font-medium text-light-800 ring-1 ring-inset ring-light-600 dark:text-dark-1000 dark:ring-dark-800"
                >
                  <svg
                    fill={label.colourCode}
                    className="h-2 w-2"
                    viewBox="0 0 6 6"
                    aria-hidden="true"
                  >
                    <circle cx={3} cy={3} r={3} />
                  </svg>
                  <div>{label.name}</div>
                </Menu.Button>
              ))}
              <Menu.Button className="my-1 inline-flex w-fit items-center gap-x-1.5 rounded-full py-1 pl-2 pr-4 text-[12px] font-medium text-dark-800 ring-inset ring-dark-800 hover:bg-light-400 dark:hover:bg-dark-200">
                <HiMiniPlus size={16} />
                Add label
              </Menu.Button>
            </>
          ) : (
            <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
              <HiMiniPlus size={22} className="pr-2" />
              Add label
            </Menu.Button>
          )}

          <Transition
            as={Fragment}
            enter="transition ease-out duration-100"
            enterFrom="transform opacity-0 scale-95"
            enterTo="transform opacity-100 scale-100"
            leave="transition ease-in duration-75"
            leaveFrom="transform opacity-100 scale-100"
            leaveTo="transform opacity-0 scale-95"
          >
            <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
              <div className="p-2">
                <form onSubmit={handleSubmit(onSubmit)}>
                  {labels?.map((label) => (
                    <Menu.Item key={label.publicId}>
                      {() => (
                        <div
                          key={label.publicId}
                          className="group flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
                          onClick={() => {
                            const newValue = !watch(label.publicId);
                            setValue(label.publicId, newValue);

                            addOrRemoveLabel.mutate({
                              cardPublicId,
                              labelPublicId: label.publicId,
                            });

                            handleSubmit(onSubmit);
                          }}
                        >
                          <input
                            id={label.publicId}
                            type="checkbox"
                            className="h-[14px] w-[14px] rounded bg-transparent"
                            onClick={(event) => event.stopPropagation()}
                            {...register(label.publicId)}
                            checked={watch(label.publicId)}
                          />
                          <div className="flex w-full items-center justify-between">
                            <label
                              htmlFor={label.publicId}
                              className="ml-3 text-sm"
                            >
                              {label.name}
                            </label>
                            <button
                              className="invisible group-hover:visible"
                              onClick={(event) => {
                                event.stopPropagation();
                                openModal("EDIT_LABEL", label.publicId);
                              }}
                            >
                              <HiEllipsisHorizontal size={20} />
                            </button>
                          </div>
                        </div>
                      )}
                    </Menu.Item>
                  ))}
                  <button
                    onClick={() => openModal("NEW_LABEL")}
                    className="flex w-full items-center rounded-[5px] p-1.5 px-2 text-sm hover:bg-light-200 dark:hover:bg-dark-300"
                  >
                    <HiMiniPlus size={22} className="pr-2" />
                    Create new label
                  </button>
                </form>
              </div>
            </Menu.Items>
          </Transition>
        </Menu>
      )}
    </>
  );
}