import { BugReport } from "@mui/icons-material";
import { Box, Button, IconButton, TextField, Typography } from "@mui/material";
import { useRouter } from "next/router";
import { useState } from "react";
import { useSettings } from "../contexts/SettingsContext";
import { testing } from "../lib/testing";

export default function Testing() {
  // contexts
  const router = useRouter();
  const { settings, settingsLoading, updateSettings, resetSettings } = useSettings();

  // states
  const [text, setText] = useState("");

  return (
    <Box>
      <IconButton
        onClick={() => {
          router.push("/");
        }}
      >
        <BugReport />
      </IconButton>
      <Button
        onClick={() => {
          resetSettings();
        }}
      >
        reset settings
      </Button>
      <Button
        onClick={() => {
          updateSettings({
            style: {
              dark_mode: false as boolean,
              accent_color: "#8ab4f8" as string,
              transition_duration: 200 as number,
              radius: 8 as number,
              window_height: 60 as number,
              window_width: 400 as number,
              font_family: "monospace" as string,
              font_scaling: 100,
            },
            window: {
              minimize_button: true as boolean,
              maximize_button: true as boolean,
            },
          });
        }}
      >
        update settings
      </Button>
      <Button
        onClick={() => {
          console.log(settings);
        }}
      >
        log settings
      </Button>
      <Button
        onClick={() => {
          console.log(testing());
        }}
      >
        testing
      </Button>
      <Typography>{text}</Typography>
      <TextField rows={10} />
    </Box>
  );
}