import { useGit } from "@yaakapp-internal/git";
import { showDialog } from "../../lib/dialog";
import { Button } from "../core/Button";
import { IconButton } from "../core/IconButton";
import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "../core/Table";
import { gitCallbacks } from "./callbacks";
import { addGitRemote } from "./showAddRemoteDialog";

interface Props {
  dir: string;
  onDone: () => void;
}

export function GitRemotesDialog({ dir }: Props) {
  const [{ remotes }, { rmRemote }] = useGit(dir, gitCallbacks(dir));

  return (
    <Table scrollable>
      <TableHead>
        <TableRow>
          <TableHeaderCell>Name</TableHeaderCell>
          <TableHeaderCell>URL</TableHeaderCell>
          <TableHeaderCell>
            <Button
              className="text-text-subtle ml-auto"
              size="2xs"
              color="primary"
              title="Add remote"
              variant="border"
              onClick={() => addGitRemote(dir)}
            >
              Add Remote
            </Button>
          </TableHeaderCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {remotes.data?.map((r) => (
          <TableRow key={r.name + r.url}>
            <TableCell>{r.name}</TableCell>
            <TableCell>{r.url}</TableCell>
            <TableCell>
              <IconButton
                size="sm"
                className="text-text-subtle ml-auto"
                icon="trash"
                title="Remove remote"
                onClick={() => rmRemote.mutate({ name: r.name })}
              />
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

GitRemotesDialog.show = (dir: string) => {
  showDialog({
    id: "git-remotes",
    title: "Manage Remotes",
    size: "md",
    render: ({ hide }) => <GitRemotesDialog onDone={hide} dir={dir} />,
  });
};