import { observer } from "mobx-react-lite";
import { useTranslation } from "react-i18next";
import { Button, Col, Input, Row } from "reactstrap";

import { useSiteStore } from "src/Stores";
import SiteComponent from "src/site/SiteComponent";

const EventPB = require("src/Event_pb");

export default observer(() => {
  const {
    targetSiteID,
    isEditable,
    input,
    setInput,
    isSignedIn,
    setAvatarsOpened,
    setConfigureOpened,
    setSignInOpened,
  } = useSiteStore();
  const { t } = useTranslation();

  const postFile = (file: File) => {
    const fr = new FileReader();
    fr.readAsArrayBuffer(file);
    fr.addEventListener("loadend", () => {
      const { result } = fr;
      SiteComponent.send({
        eventID: EventPB.Event.EventID.POST_FILE,
        text: file.name,
        data: [new Uint8Array(result as ArrayBufferLike)],
      });
    });
  };

  return (
    <Row className="g-0">
      <Col className="m-1" xs="auto">
        <Button
          onClick={() => {
            const inputElement = document.createElement("input");
            inputElement.type = "file";
            inputElement.accept = "audio/*,image/*,video/*";
            inputElement.addEventListener("change", async ({ target }) => {
              const file = (target as HTMLInputElement).files?.[0];
              if (file) {
                postFile(file);
              }
            });
            inputElement.click();
          }}
        >
          {t("postFile")}
        </Button>
      </Col>
      <Col className="m-1">
        <Input
          disabled={!isEditable}
          value={input}
          onChange={({ target: { value } }) => {
            setInput(value);
          }}
          onKeyDown={({ key }) => {
            if (key === "Enter") {
              if (input.length > 0) {
                SiteComponent.send({
                  eventID: EventPB.Event.EventID.SITE_YELL,
                  text: JSON.stringify({
                    siteID: targetSiteID,
                    siteYell: input,
                  }),
                });
                setInput("");
              }
            }
          }}
          onPaste={({ clipboardData: { items } }) => {
            const data = items[0];
            if (data && data.kind === "file") {
              const file = data.getAsFile();
              if (file) {
                postFile(file);
              }
            }
          }}
        />
      </Col>
      <Col className="m-1" xs="auto">
        {isSignedIn ? (
          <Button
            color="danger"
            onClick={() => {
              window.localStorage.removeItem("avatarCipher");
              window.localStorage.removeItem("autoSignIn");
              SiteComponent.send({
                eventID: EventPB.Event.EventID.NOT_SIGN_IN,
              });
            }}
          >
            {t("notSignIn")}
          </Button>
        ) : (
          <Button
            color="success"
            onClick={() => {
              setSignInOpened(true);
            }}
          >
            {t("signIn")}
          </Button>
        )}
      </Col>
      <Col className="m-1" xs="auto">
        <Button
          color="info"
          onClick={() => {
            setAvatarsOpened(true);
          }}
        >
          {t("onAvatars")}
        </Button>
      </Col>
      <Col className="m-1" xs="auto">
        <Button
          onClick={() => {
            setConfigureOpened(true);
          }}
        >
          {t("onConfigure")}
        </Button>
      </Col>
    </Row>
  );
});