import { showLoading } from "utils/ui.ts";

interface HomeBarProps {
  name: string;
}

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

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

  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"] = "";
    window.$modal?.show(
      "Reset password",
      <div>
        <div style="display: flex; align-items: center; margin-bottom: 8px">
          <span style="width: 120px; margin-right: 8px">Old password</span>
          <input
            type="password"
            placeholder="Old password"
            value={settingsData["old"]}
            onInput={(e) => {
              settingsData["old"] = (e.target as HTMLInputElement).value;
            }}
          />
        </div>
        <div style="display: flex; align-items: center; margin-bottom: 8px">
          <span style="width: 120px; margin-right: 8px">New password</span>
          <input
            type="password"
            placeholder="New password"
            value={settingsData["new"]}
            onInput={(e) => {
              settingsData["new"] = (e.target as HTMLInputElement).value;
            }}
          />
        </div>
        <div style="display: flex; align-items: center;">
          <span style="width: 120px; margin-right: 8px">
            Repeat new password
          </span>
          <input
            type="password"
            placeholder="Repeat new password"
            value={settingsData["repeat"]}
            onInput={(e) => {
              settingsData["repeat"] = (e.target as HTMLInputElement).value;
            }}
          />
        </div>
      </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) {
                window.$modal?.hide();
              }
            }
          },
        },
      ],
    );
  };

  return (
    <div className="pd-home-bar">
      <button onClick={doNewPost}>New Post</button>
      <div className="pd-home-user-info">
        <span>{props.name}</span>
        <button onClick={showReset}>Password</button>
        <button onClick={doLogout}>Logout</button>
      </div>
    </div>
  );
}