import LinkIcon from "@mui/icons-material/Link";
import LinkOffIcon from "@mui/icons-material/LinkOff";
import {
  Button,
  Card,
  CardActions,
  CardContent,
  Typography,
} from "@mui/material";
import { MatrixLinkApi } from "../api/MatrixLinkApi";
import { useAlert } from "../hooks/contexts_provider/AlertDialogProvider";
import { useConfirm } from "../hooks/contexts_provider/ConfirmDialogProvider";
import { useLoadingMessage } from "../hooks/contexts_provider/LoadingMessageProvider";
import { useSnackbar } from "../hooks/contexts_provider/SnackbarProvider";
import { useUserInfo } from "../widgets/dashboard/BaseAuthenticatedPage";
import { MatrixGWRouteContainer } from "../widgets/MatrixGWRouteContainer";

export function MatrixLinkRoute(): React.ReactElement {
  const user = useUserInfo();
  return (
    <MatrixGWRouteContainer label={"Matrix account link"}>
      {user.info.matrix_user_id === null ? <ConnectCard /> : <ConnectedCard />}
    </MatrixGWRouteContainer>
  );
}

function ConnectCard(): React.ReactElement {
  const alert = useAlert();
  const loadingMessage = useLoadingMessage();

  const startMatrixConnection = async () => {
    try {
      loadingMessage.show("Initiating Matrix link...");

      const res = await MatrixLinkApi.StartAuth();

      window.location.href = res.url;
    } catch (e) {
      console.error(`Failed to connect to Matrix account! ${e}`);
      alert(`Failed to connect to Matrix account! ${e}`);
    } finally {
      loadingMessage.hide();
    }
  };

  return (
    <Card>
      <CardContent>
        <Typography variant="h5" component="div" gutterBottom>
          <i>Disconnected from your Matrix account</i>
        </Typography>

        <Typography variant="body1" gutterBottom>
          You need to connect MatrixGW to your Matrix account to let it access
          your messages.
        </Typography>
      </CardContent>
      <CardActions>
        <Button
          size="small"
          variant="outlined"
          startIcon={<LinkIcon />}
          onClick={startMatrixConnection}
        >
          Connect now
        </Button>
      </CardActions>
    </Card>
  );
}

function ConnectedCard(): React.ReactElement {
  const snackbar = useSnackbar();
  const confirm = useConfirm();
  const alert = useAlert();
  const loadingMessage = useLoadingMessage();

  const info = useUserInfo();

  const user = useUserInfo();

  const handleDisconnect = async () => {
    if (!(await confirm("Do you really want to unlink your Matrix account?")))
      return;

    try {
      loadingMessage.show("Unlinking Matrix account...");
      await MatrixLinkApi.Disconnect();
      snackbar("Successfully unlinked Matrix account!");
    } catch (e) {
      console.error(`Failed to unlink user account! ${e}`);
      alert(`Failed to unlink your account! ${e}`);
    } finally {
      info.reloadUserInfo();
      loadingMessage.hide();
    }
  };

  return (
    <Card>
      <CardContent>
        <Typography variant="h5" component="div" gutterBottom>
          <i>Connected to your Matrix account</i>
        </Typography>

        <Typography variant="body1" gutterBottom>
          <p>
            MatrixGW is currently connected to your account with the following
            information:
          </p>
          <ul>
            <li>
              User id: <i>{user.info.matrix_user_id}</i>
            </li>
            <li>
              Device id: <i>{user.info.matrix_device_id}</i>
            </li>
          </ul>
          <p>
            If you encounter issues with your Matrix account you can try to
            disconnect and connect back again.
          </p>
        </Typography>
      </CardContent>
      <CardActions>
        <Button
          size="small"
          variant="outlined"
          startIcon={<LinkOffIcon />}
          onClick={handleDisconnect}
        >
          Disconnect
        </Button>
      </CardActions>
    </Card>
  );
}