import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { Controller, useForm } from "react-hook-form";
import { TwitterPicker } from "react-color";
// headless ui
import { Listbox, Popover, Transition } from "@headlessui/react";
// services
import { IssueLabelService } from "services/issue";
// hooks
import useUser from "hooks/use-user";
// ui
import { Input, Spinner } from "@plane/ui";
// icons
import { Component, Plus, X } from "lucide-react";
// types
import { IIssue, IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";

type Props = {
  issueDetails: IIssue | undefined;
  labelList: string[];
  submitChanges: (formData: any) => void;
  isNotAllowed: boolean;
  uneditable: boolean;
};

const defaultValues: Partial<IIssueLabels> = {
  name: "",
  color: "#ff0000",
};

const issueLabelService = new IssueLabelService();

export const SidebarLabelSelect: React.FC<Props> = ({
  issueDetails,
  labelList,
  submitChanges,
  isNotAllowed,
  uneditable,
}) => {
  const [createLabelForm, setCreateLabelForm] = useState(false);

  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

  const {
    handleSubmit,
    formState: { errors, isSubmitting },
    reset,
    watch,
    control,
    setFocus,
  } = useForm<Partial<IIssueLabels>>({
    defaultValues,
  });

  const { user } = useUser();

  const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
    workspaceSlug && projectId
      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
      : null
  );

  const handleNewLabel = async (formData: Partial<IIssueLabels>) => {
    if (!workspaceSlug || !projectId || isSubmitting) return;

    await issueLabelService
      .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
      .then((res) => {
        reset(defaultValues);

        issueLabelMutate((prevData: any) => [...(prevData ?? []), res], false);

        submitChanges({ labels: [...(issueDetails?.labels ?? []), res.id] });

        setCreateLabelForm(false);
      });
  };

  useEffect(() => {
    if (!createLabelForm) return;

    setFocus("name");
    reset();
  }, [createLabelForm, reset, setFocus]);

  return (
    <div className={`flex flex-col gap-3 ${uneditable ? "opacity-60" : ""}`}>
      <div className="flex flex-wrap gap-1">
        {labelList?.map((labelId) => {
          const label = issueLabels?.find((l) => l.id === labelId);

          if (label)
            return (
              <span
                key={label.id}
                className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20"
                onClick={() => {
                  const updatedLabels = labelList?.filter((l) => l !== labelId);
                  submitChanges({
                    labels: updatedLabels,
                  });
                }}
              >
                <span
                  className="h-2 w-2 flex-shrink-0 rounded-full"
                  style={{
                    backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
                  }}
                />
                {label.name}
                <X className="h-2 w-2 group-hover:text-red-500" />
              </span>
            );
        })}
        <Listbox
          as="div"
          value={issueDetails?.labels ?? []}
          onChange={(val: any) => submitChanges({ labels: val })}
          className="flex-shrink-0"
          multiple
          disabled={isNotAllowed || uneditable}
        >
          {({ open }) => (
            <div className="relative">
              <Listbox.Button
                className={`flex ${
                  isNotAllowed || uneditable ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-90"
                } items-center gap-2 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs hover:text-custom-text-200 text-custom-text-300`}
              >
                Select Label
              </Listbox.Button>

              <Transition
                show={open}
                as={React.Fragment}
                leave="transition ease-in duration-100"
                leaveFrom="opacity-100"
                leaveTo="opacity-0"
              >
                <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-custom-background-80 py-1 text-xs shadow-lg border border-custom-border-100 focus:outline-none">
                  <div className="py-1">
                    {issueLabels ? (
                      issueLabels.length > 0 ? (
                        issueLabels.map((label: IIssueLabels) => {
                          const children = issueLabels?.filter((l) => l.parent === label.id);

                          if (children.length === 0) {
                            if (!label.parent)
                              return (
                                <Listbox.Option
                                  key={label.id}
                                  className={({ active, selected }) =>
                                    `${active || selected ? "bg-custom-background-90" : ""} ${
                                      selected ? "" : "text-custom-text-200"
                                    } flex cursor-pointer select-none items-center gap-2 truncate p-2`
                                  }
                                  value={label.id}
                                >
                                  <span
                                    className="h-2 w-2 flex-shrink-0 rounded-full"
                                    style={{
                                      backgroundColor: label.color && label.color !== "" ? label.color : "#000",
                                    }}
                                  />
                                  {label.name}
                                </Listbox.Option>
                              );
                          } else
                            return (
                              <div className="border-y border-custom-border-100 bg-custom-background-90">
                                <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-custom-text-100">
                                  <Component className="h-3 w-3" />
                                  {label.name}
                                </div>
                                <div>
                                  {children.map((child) => (
                                    <Listbox.Option
                                      key={child.id}
                                      className={({ active, selected }) =>
                                        `${active || selected ? "bg-custom-background-100" : ""} ${
                                          selected ? "" : "text-custom-text-200"
                                        } flex cursor-pointer select-none items-center gap-2 truncate p-2`
                                      }
                                      value={child.id}
                                    >
                                      <span
                                        className="h-2 w-2 flex-shrink-0 rounded-full"
                                        style={{
                                          backgroundColor: child?.color ?? "black",
                                        }}
                                      />
                                      {child.name}
                                    </Listbox.Option>
                                  ))}
                                </div>
                              </div>
                            );
                        })
                      ) : (
                        <div className="text-center">No labels found</div>
                      )
                    ) : (
                      <Spinner />
                    )}
                  </div>
                </Listbox.Options>
              </Transition>
            </div>
          )}
        </Listbox>
        {!isNotAllowed && (
          <button
            type="button"
            className={`flex ${
              isNotAllowed || uneditable ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-90"
            } items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs hover:text-custom-text-200 text-custom-text-300`}
            onClick={() => setCreateLabelForm((prevData) => !prevData)}
            disabled={uneditable}
          >
            {createLabelForm ? (
              <>
                <X className="h-3 w-3" /> Cancel
              </>
            ) : (
              <>
                <Plus className="h-3 w-3" /> New
              </>
            )}
          </button>
        )}
      </div>

      {createLabelForm && (
        <form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}>
          <div>
            <Popover className="relative">
              {({}) => (
                <>
                  <Popover.Button className="grid place-items-center outline-none">
                    {watch("color") && watch("color") !== "" && (
                      <span
                        className="h-6 w-6 rounded"
                        style={{
                          backgroundColor: watch("color") ?? "black",
                        }}
                      />
                    )}
                  </Popover.Button>

                  <Transition
                    as={React.Fragment}
                    enter="transition ease-out duration-200"
                    enterFrom="opacity-0 translate-y-1"
                    enterTo="opacity-100 translate-y-0"
                    leave="transition ease-in duration-150"
                    leaveFrom="opacity-100 translate-y-0"
                    leaveTo="opacity-0 translate-y-1"
                  >
                    <Popover.Panel className="absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0">
                      <Controller
                        name="color"
                        control={control}
                        render={({ field: { value, onChange } }) => (
                          <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
                        )}
                      />
                    </Popover.Panel>
                  </Transition>
                </>
              )}
            </Popover>
          </div>
          <Controller
            control={control}
            name="name"
            rules={{
              required: "This is required",
            }}
            render={({ field: { value, onChange, ref } }) => (
              <Input
                id="name"
                name="name"
                type="text"
                value={value ?? ""}
                onChange={onChange}
                ref={ref}
                hasError={Boolean(errors.name)}
                placeholder="Title"
                className="w-full"
              />
            )}
          />
          <button
            type="button"
            className="grid place-items-center rounded bg-red-500 p-2.5"
            onClick={() => setCreateLabelForm(false)}
          >
            <X className="h-4 w-4 text-white" />
          </button>
          <button type="submit" className="grid place-items-center rounded bg-green-500 p-2.5" disabled={isSubmitting}>
            <Plus className="h-4 w-4 text-white" />
          </button>
        </form>
      )}
    </div>
  );
};