import React, { useEffect, useState } from "react";
import { GAME_SCENES, PromptToken } from "types";
import { MenuScene } from "./menu";
import { LotteryScene } from "./lottery";
import { GenerateScene } from "./generate";
import { Alert, Snackbar } from "@mui/material";

type SnackSetterFunction = (snack: {
  open: boolean;
  message: string;
  type: "error" | "success" | "warning" | "info";
}) => void;

const Snacker = {} as any;

export const Message = {
  error: (message: string) => {
    Snacker.setSnack({
      open: true,
      message,
      type: "error",
    });
  },
  warning: (message: string) => {
    Snacker.setSnack({
      open: true,
      message,
      type: "warning",
    });
  },
  success: (message: string) => {
    Snacker.setSnack({
      open: true,
      message,
      type: "success",
    });
  },
  show: (message: string) => {
    Snacker.setSnack({
      open: true,
      message,
      type: "info",
    });
  },
};

export const GameUI = () => {
  const [scene, setScene] = useState<GAME_SCENES>(GAME_SCENES.MENU);
  const [prompts, setPrompts] = useState<string[]>([]);
  const [snack, setSnack] = useState({
    open: false,
    message: "",
    type: "info" as "error" | "success" | "warning" | "info",
  });
  const handleClose = () => {
    setSnack({
      ...snack,
      open: false,
    });
  };
  useEffect(() => {
    Snacker.setSnack = setSnack;
  }, []);
  return (
    <div>
      {scene === GAME_SCENES.MENU && <MenuScene setScene={setScene} />}
      {scene === GAME_SCENES.LOTTERY && (
        <LotteryScene setScene={setScene} setPrompts={setPrompts} />
      )}
      {scene === GAME_SCENES.GENERATE && (
        <GenerateScene setScene={setScene} prompts={prompts} />
      )}
      <Snackbar
        anchorOrigin={{ vertical: "top", horizontal: "center" }}
        open={snack.open}
        onClose={handleClose}
      >
        <Alert
          onClose={handleClose}
          severity={snack.type}
          sx={{ width: "100%" }}
        >
          {snack.message}
        </Alert>
      </Snackbar>
    </div>
  );
};