import { Box, Text } from "ink";
import { Button, ButtonList } from "../ui/Button.js";
import { Input } from "../ui/Input.js";
import { Popup } from "../ui/Popup.js";
import { useFreeSize } from "../../hooks/size.js";
import { useState } from "react";
import type { UpdateUser } from "../../../db/types/User.js";
import {
  deleteUserById,
  updateUser,
} from "../../../react/store/actions/users.js";
import { useDataUserById } from "../../../react/hooks/data/users.js";
import { useAction } from "../../../react/hooks/useAction.js";

export function UserPopup({
  uid,
  onClose,
}: {
  uid: string;
  onClose: () => void;
}) {
  const { user, status } = useDataUserById(uid);
  const del = useAction(deleteUserById);
  const upd = useAction(updateUser);
  const [changes, setChanges] = useState<UpdateUser | null>(null);
  const { width } = useFreeSize();

  return (
    <Popup onClose={!changes ? onClose : undefined}>
      <Box flexDirection="column" padding={1} minWidth={width / 3}>
        {user ? (
          <>
            <Text>
              <Text bold>Name:{"    "}</Text>
              {changes ? (
                <Input
                  autoFocus
                  value={changes.name ?? user.name}
                  onChange={(v) => setChanges((e) => ({ ...e!, name: v }))}
                />
              ) : (
                <>{user.name}</>
              )}
            </Text>
            <Text>
              <Text bold>Uid:{"     "}</Text>
              {user.uid}
            </Text>
            <Text>
              <Text bold>Email:{"   "}</Text>
              {changes ? (
                <Input
                  value={changes.email ?? ("email" in user ? user.email : "")}
                  onChange={(v) => setChanges((e) => ({ ...e!, email: v }))}
                />
              ) : (
                <>
                  {"email" in user ? (
                    <>{user.email}</>
                  ) : (
                    <Text dimColor>N/A</Text>
                  )}
                </>
              )}
            </Text>
            <Text>
              <Text bold>Flags:{"   "}</Text>
              {(user.flags.admin ?? false) && <Text>admin</Text>}
            </Text>
            <Text>
              <Text bold>Created: </Text>
              {user.created_at}
            </Text>
            <Text>
              <Text bold>Updated: </Text>
              {user.updated_at}
            </Text>
            <Box height={1} />
            {changes ? (
              <ButtonList
                justifyContent="center"
                buttons={[
                  {
                    children: "Save",
                    onClick: () => upd(changes).then(() => setChanges(null)),
                  },
                  {
                    children: "Discard",
                    onClick: () => setChanges(null),
                  },
                ]}
              />
            ) : (
              <ButtonList
                autoFocus
                justifyContent="center"
                buttons={[
                  {
                    children: "Close",
                    onClick: onClose,
                  },
                  {
                    children: "Edit",
                    onClick: () => {
                      setChanges({ uid });
                    },
                  },
                  {
                    children: "Delete",
                    onClick: () => del(uid).then(onClose),
                  },
                ]}
              />
            )}
          </>
        ) : (
          <>
            <Text dimColor>{status}</Text>
            <Box height={1} />
            <Button autoFocus onClick={onClose}>
              Close
            </Button>
          </>
        )}
      </Box>
    </Popup>
  );
}