import React, { useState } from "react";
import axios from "axios";
import { forwardRef, chakra, Button, useToast } from "@chakra-ui/react";
import { SERVER_URL as serverUrl } from "../constants";
import { USER_ROLES } from "../helpers/constants";

const SignatureSignUp = forwardRef(({ address, userProvider, onSuccess, setUserRole }, ref) => {
  const [loading, setLoading] = useState(false);
  const toast = useToast({ position: "top", isClosable: true });

  const handleLoginSigning = async () => {
    setLoading(true);
    let signMessage;
    try {
      const signMessageResponse = await axios.get(`${serverUrl}/sign-message`, {
        params: {
          messageId: "login",
          address,
        },
      });
      signMessage = signMessageResponse.data;
      console.log("signMessage", signMessage);
    } catch (e) {
      // TODO handle errors. Issue #25 https://github.com/moonshotcollective/scaffold-directory/issues/25
      toast({
        description: " Sorry, the server is overloaded. 🧯🚒🔥",
        status: "error",
      });
      setLoading(false);
      console.log(e);
      return;
    }

    if (!signMessage) {
      toast({
        description: " Sorry, the server is overloaded. 🧯🚒🔥",
        status: "error",
      });
      setLoading(false);
      return;
    }

    let signature;
    try {
      signature = await userProvider.send("personal_sign", [signMessage, address]);
    } catch (err) {
      toast({
        description: "Couldn't get a signature from the Wallet",
        status: "error",
      });
      setLoading(false);
      return;
    }
    console.log("signature", signature);

    const res = await axios.post(`${serverUrl}/sign`, {
      address,
      signature,
    });

    setLoading(false);

    if (res.data) {
      onSuccess();
      setUserRole(USER_ROLES[res.data.role] ?? USER_ROLES.registered);
    }
  };

  return (
    <Button ref={ref} colorScheme="blue" disabled={loading} onClick={handleLoginSigning}>
      <span role="img" aria-label="write icon">✍</span><chakra.span ml={2}>Register</chakra.span>
    </Button>
  );
});

export default SignatureSignUp;