import { useQuery } from "@tanstack/react-query";
import {
  createAlias,
  deleteAlias,
  getAliases,
  setPrimaryAlias,
  type Alias,
} from "api/api";
import { AsyncButton } from "../../AsyncButton";
import { useEffect, useState } from "react";
import { Trash } from "lucide-react";
import SubHeader from "~/components/primitives/SubHeader";

interface Props {
  type: string;
  id: number;
}

export default function AliasManager({ type, id }: Props) {
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [err, setError] = useState<string>();
  const [displayData, setDisplayData] = useState<Alias[]>([]);

  const { isPending, isError, data, error } = useQuery({
    queryKey: [
      "aliases",
      {
        type: type,
        id: id,
      },
    ],
    queryFn: ({ queryKey }) => {
      const params = queryKey[1] as { type: string; id: number };
      return getAliases(params.type, params.id);
    },
  });

  useEffect(() => {
    if (data) {
      setDisplayData(data);
    }
  }, [data]);

  if (isError) {
    return <p className="error">Error: {error.message}</p>;
  }
  if (isPending) {
    return <p>Loading...</p>;
  }

  const handleSetPrimary = (alias: string) => {
    setError(undefined);
    setLoading(true);
    setPrimaryAlias(type, id, alias).then((r) => {
      if (r.ok) {
        window.location.reload();
      } else {
        r.json().then((r) => setError(r.error));
      }
    });
    setLoading(false);
  };

  const handleNewAlias = () => {
    setError(undefined);
    if (input === "") {
      setError("no input");
      return;
    }
    setLoading(true);
    createAlias(type, id, input).then((r) => {
      if (r.ok) {
        setDisplayData([
          ...displayData,
          { alias: input, source: "Manual", is_primary: false, id: id },
        ]);
      } else {
        r.json().then((r) => setError(r.error));
      }
    });
    setLoading(false);
  };

  const handleDeleteAlias = (alias: string) => {
    setError(undefined);
    setLoading(true);
    deleteAlias(type, id, alias).then((r) => {
      if (r.ok) {
        setDisplayData(displayData.filter((v) => v.alias != alias));
      } else {
        r.json().then((r) => setError(r.error));
      }
    });
    setLoading(false);
  };

  return (
    <div className="w-full">
      <SubHeader>Alias Manager</SubHeader>
      <div className="flex flex-col gap-4">
        {displayData.map((v) => (
          <div className="flex gap-2">
            <div className="bg p-3 rounded-md flex-grow" key={v.alias}>
              {v.alias} (source: {v.source})
            </div>
            <AsyncButton
              loading={loading}
              onClick={() => handleSetPrimary(v.alias)}
              disabled={v.is_primary}
            >
              Set Primary
            </AsyncButton>
            <AsyncButton
              loading={loading}
              onClick={() => handleDeleteAlias(v.alias)}
              confirm
              disabled={v.is_primary}
              danger
            >
              <Trash size={16} />
            </AsyncButton>
          </div>
        ))}
        <div className="flex gap-2 w-3/5">
          <input
            type="text"
            placeholder="Add a new alias"
            className="mx-auto fg bg rounded-md p-3 flex-grow"
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
          <AsyncButton loading={loading} onClick={handleNewAlias}>
            Submit
          </AsyncButton>
        </div>
        {err && <p className="error">{err}</p>}
      </div>
    </div>
  );
}
