import Input from "../components/form/Input.tsx";
import Button from "../components/form/Button.tsx";
import FileInput from "../components/form/FileInput.tsx";
import ThemeToggle from "./ThemeToggle.tsx";

interface HomeBarProps {
  name: string;
}

const settingsData: { [key: string]: string } = {};
const newPostData: { [key: string]: string } = {};

export default function HomeBar(props: HomeBarProps) {
  const doCreatePost = async () => {
    globalThis.$loading?.show();
    const resp = await fetch("/api/post", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        title: newPostData["title"] || "",
        content: newPostData["content"] || "",
      }),
    });
    const respJson = await resp.json();
    if (respJson.success) {
      location.href = `/${respJson.data}`;
      return true;
    }
    return false;
  };

  const showNewPost = () => {
    newPostData["title"] = "";
    newPostData["content"] = "";
    globalThis.$modal?.show(
      "New Post",
      <div>
        <FileInput
          label="Import file (optional)"
          accept=".md,.txt"
          onInput={(e) => {
            const file = (e.target as HTMLInputElement).files?.[0];
            if (!file) {
              newPostData["title"] = "";
              newPostData["content"] = "";
              return;
            }
            newPostData["title"] = file.name.replace(/\.(md|txt)$/, "");
            const reader = new FileReader();
            reader.onload = () => {
              newPostData["content"] = reader.result as string;
            };
            reader.readAsText(file);
          }}
        />
      </div>,
      [
        {
          text: "Create",
          onClick: async () => {
            await doCreatePost();
          },
        },
        {
          text: "Cancel",
        },
      ],
    );
  };

  const doLogout = async () => {
    const resp = await fetch("/api/user/logout");
    const respJson = await resp.json();
    if (respJson.success) {
      location.href = "/login";
      return true;
    }
    return false;
  };

  const showReset = () => {
    settingsData["old"] = "";
    settingsData["new"] = "";
    settingsData["repeat"] = "";
    globalThis.$modal?.show(
      "Reset password",
      <div>
        <Input
          label="Old password"
          type="password"
          placeholder="Old password"
          value={settingsData["old"]}
          onInput={(e) => {
            settingsData["old"] = (e.target as HTMLInputElement).value;
          }}
        />
        <Input
          label="New password"
          type="password"
          placeholder="New password"
          value={settingsData["new"]}
          onInput={(e) => {
            settingsData["new"] = (e.target as HTMLInputElement).value;
          }}
        />
        <Input
          label="Repeat new password"
          type="password"
          placeholder="Repeat new password"
          value={settingsData["repeat"]}
          onInput={(e) => {
            settingsData["repeat"] = (e.target as HTMLInputElement).value;
          }}
        />
      </div>,
      [
        {
          text: "Confirm",
          onClick: async () => {
            if (
              settingsData["old"] && settingsData["new"] &&
              settingsData["repeat"] &&
              settingsData["new"] === settingsData["repeat"]
            ) {
              const resp = await fetch("/api/user/reset", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                  old: settingsData["old"],
                  new: settingsData["new"],
                }),
              });
              const respJson = await resp.json();
              if (respJson.success) {
                globalThis.$modal?.hide();
              }
            }
          },
        },
      ],
    );
  };

  return (
    <div className="flex items-center justify-between">
      <Button
        type="button"
        onClick={showNewPost}
      >
        New Post
      </Button>
      <div className="flex items-center">
        <span>{props.name}</span>
        <Button
          type="button"
          className="ml-2"
          onClick={showReset}
        >
          Password
        </Button>
        <Button
          type="button"
          className="ml-2"
          onClick={doLogout}
        >
          Logout
        </Button>
        <span className="ml-3">
          <ThemeToggle />
        </span>
      </div>
    </div>
  );
}