import { Button, Input, Space } from "antd";
import { useState } from "react";
import { useTranslation } from "react-i18next";

export default function HelpRescue() {
  const { t } = useTranslation();
  const [code, setCode] = useState("");

  const handleClick = async () => {
    const bodyFormData = new FormData();
    bodyFormData.append("Code", code);
    bodyFormData.append("hostederrorhandling", 1);
    await fetch("https://secure.logmeinrescue.com/Customer/Code.aspx", {
      mode: "no-cors",
      method: "POST",
      body: bodyFormData
    });
  };

  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <Space orientation="vertical" align="center">
        <div>{t("help.labels.rescuedesc")}</div>
        <Input
          size="large"
          style={{ width: "10rem" }}
          onChange={(e) => setCode(e.target.value)}
          value={code}
          placeholder={t("help.labels.codeplacholder")}
        />
        <Button onClick={handleClick}>{t("help.actions.connect")}</Button>

        <form
          name="logmeinsupport"
          action="https://secure.logmeinrescue.com/Customer/Code.aspx"
          method="post"
          id="logmeinsupport"
          onSubmit={() => {
            alert();
          }}
        >
          <span>Enter your 6-digit code: </span>
          <input type="text" name="Code" />
          <br />
          <input type="submit" value="Connect to technician" />
          <input type="hidden" name="tracking0" maxLength="64" />
          <input type="hidden" name="language" maxLength="5" />
          <input type="hidden" name="hostederrorhandling" value="1" />
        </form>
      </Space>
    </div>
  );
}