import { useState } from "react";
import { setIssueAssignees, setIssueLabels, setIssueLock } from "~/fns/labels";
import { useAction } from "~/hooks/use-action";
import { Avatar, LabelChip } from "./ui/Primitives";
import { Button } from "./ui/Button";

type Props = {
  owner: string;
  repo: string;
  number: number;
  canMaintain: boolean;
  locked: boolean;
  labels: Array<{ id: string; name: string; color: string }>;
  allLabels: Array<{ id: string; name: string; color: string }>;
  assignees: Array<{ name: string }>;
  assignable: string[];
  children?: React.ReactNode;
};

function Section({ title, onEdit, children }: { title: string; onEdit?: () => void; children: React.ReactNode }) {
  return (
    <section className="space-y-2 border-b border-gray-800 pb-4">
      <div className="flex items-center justify-between">
        <h3 className="label-caps text-gray-500">{title}</h3>
        {onEdit && (
          <button type="button" onClick={onEdit} className="text-xs text-gray-500 hover:text-accent-400">
            Edit
          </button>
        )}
      </div>
      {children}
    </section>
  );
}

function Picker({
  options,
  selected,
  onSave,
  pending,
}: {
  options: string[];
  selected: string[];
  onSave: (values: string[]) => void;
  pending: boolean;
}) {
  const [values, setValues] = useState(new Set(selected));
  return (
    <div className="space-y-2 rounded-md border border-gray-800 p-2">
      {options.length === 0 && <p className="text-xs text-gray-500">Nothing to choose from.</p>}
      {options.map((option) => (
        <label key={option} className="flex items-center gap-2 text-sm text-gray-300">
          <input
            type="checkbox"
            className="accent-accent-500"
            checked={values.has(option)}
            onChange={(event) => {
              const next = new Set(values);
              if (event.target.checked) next.add(option);
              else next.delete(option);
              setValues(next);
            }}
          />
          {option}
        </label>
      ))}
      <Button size="sm" variant="primary" pending={pending} onClick={() => onSave([...values])}>
        Apply
      </Button>
    </div>
  );
}

export function IssueSidebar({
  owner,
  repo,
  number,
  canMaintain,
  locked,
  labels,
  allLabels,
  assignees,
  assignable,
  children,
}: Props) {
  const [editing, setEditing] = useState<"labels" | "assignees" | null>(null);
  const saveLabels = useAction(setIssueLabels);
  const saveAssignees = useAction(setIssueAssignees);
  const lock = useAction(setIssueLock);
  const toggle = (section: "labels" | "assignees") => setEditing((current) => (current === section ? null : section));

  return (
    <aside className="space-y-4 text-sm">
      {children}
      <Section title="Assignees" onEdit={canMaintain ? () => toggle("assignees") : undefined}>
        {editing === "assignees" ? (
          <Picker
            options={assignable}
            selected={assignees.map((assignee) => assignee.name)}
            pending={saveAssignees.pending}
            onSave={async (usernames) => {
              if (await saveAssignees.run({ data: { owner, repo, number, usernames } })) setEditing(null);
            }}
          />
        ) : assignees.length === 0 ? (
          <p className="text-gray-500">No one assigned</p>
        ) : (
          assignees.map((assignee) => (
            <div key={assignee.name} className="flex items-center gap-2 text-gray-300">
              <Avatar name={assignee.name} size="sm" /> {assignee.name}
            </div>
          ))
        )}
      </Section>
      <Section title="Labels" onEdit={canMaintain ? () => toggle("labels") : undefined}>
        {editing === "labels" ? (
          <Picker
            options={allLabels.map((label) => label.name)}
            selected={labels.map((label) => label.name)}
            pending={saveLabels.pending}
            onSave={async (names) => {
              if (await saveLabels.run({ data: { owner, repo, number, labels: names } })) setEditing(null);
            }}
          />
        ) : labels.length === 0 ? (
          <p className="text-gray-500">None yet</p>
        ) : (
          <div className="flex flex-wrap gap-1.5">
            {labels.map((label) => (
              <LabelChip key={label.id} name={label.name} color={label.color} />
            ))}
          </div>
        )}
      </Section>
      {canMaintain && (
        <Button
          size="sm"
          variant="ghost"
          pending={lock.pending}
          onClick={() => lock.run({ data: { owner, repo, number, locked: !locked } })}
        >
          {locked ? "Unlock conversation" : "Lock conversation"}
        </Button>
      )}
    </aside>
  );
}