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 { SettingsItem } from "../components/HeaderBar/Settings/SettingsItem";
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("");
  const [color, setColor] = useState("#000000");

  return (
    <Box>
      <IconButton
        onClick={() => {
          router.push("/");
        }}
      >
        <BugReport />
      </IconButton>
      <Button
        onClick={() => {
          resetSettings();
        }}
      >
        reset settings
      </Button>
      <Button>update settings</Button>
      <Button
        onClick={() => {
          console.log(settings);
        }}
      >
        log settings
      </Button>
      <Button
        onClick={() => {
          console.log(testing());
        }}
      >
        testing
      </Button>
      <Typography>{text}</Typography>
      <SettingsItem
        defaultText="#8ab4f8"
        description="Accent color"
        input={
          <TextField
            name="accent_color"
            onChange={(e) => {
              setColor(e.target.value);
            }}
            sx={{
              width: "100%",
            }}
            size="small"
            type="color"
            value={color}
            variant="standard"
          />
        }
      />
    </Box>
  );
}