import { BugReport } from "@mui/icons-material";
import { Box, IconButton, TextField, Typography } from "@mui/material";
import { appDataDir } from "@tauri-apps/api/path";
import { invoke } from "@tauri-apps/api/tauri";
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>
      <button
        onClick={async () => {
          console.log(await appDataDir());
        }}
      >
        log appdatadir
      </button>
      <button
        onClick={async () => {
          const bruh = settings.background.background_image_path;
          console.log(bruh);

          try {
            await invoke("delete_old_wallpaper_image", {
              filePathString: "/home/vomitblood/.local/share/stort/wallpaper.jpeg",
            });
          } catch (error) {
            console.error("deec nuts", error);
          }
        }}
      >
        invoke tauri shit
      </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>
  );
}
