import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";
import Divider from "@mui/material/Divider";
import Drawer from "@mui/material/Drawer";
import IconButton from "@mui/material/IconButton";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import MailIcon from "@mui/icons-material/Mail";
import MenuIcon from "@mui/icons-material/Menu";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import { InputAdornment, TextField } from "@mui/material";
import Grid from "@mui/material/Grid";
import Container from "@mui/material/Container";
import Paper from "@mui/material/Paper";
import CheckIcon from "@mui/icons-material/Check";
import TypeTable from "../../components/tables/TypeTable";
import SignTable from "../../components/tables/SignTable";
import { useEffect, useState } from "react";
import axios from "axios";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";

function SettingsGeneral() {
  const [settings, setSettings] = useState([]);

  useEffect(() => {
    axios("http://localhost:8000/api/settings/", {
      method: "GET",
      withCredentials: true,
    }).then((res) => {
      setSettings(res.data);
    });
  }, []);

  function handleTextFieldChange(e, index) {
    let updatedSettings = [...settings];
    updatedSettings[index].value = e.target.value;

    setSettings(updatedSettings);
  }

  return (
    <Box>
      {settings.map((item, index) => (
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            mt: "55px",
            ml: "15px",
          }}
          key={index}
        >
          <Box sx={{ width: "30%", pr: "15px" }}>{item.item}</Box>
          <Box sx={{ width: "70%" }}>
            <TextField
              type="number"
              sx={{ width: "60%" }}
              value={item.value}
              key={index}
              defaultValue={1}
              onChange={(e) => handleTextFieldChange(e, index)}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton color="primary">
                      <CheckCircleIcon />
                    </IconButton>
                  </InputAdornment>
                ),
              }}
              id="username"
            />
          </Box>
        </Box>
      ))}
      <Grid container spacing={0} sx={{ bt: "50px" }}>
        <Grid item xs={12} md={6}>
          <TypeTable />
        </Grid>
        <Grid item xs={12} md={6}>
          <SignTable />
        </Grid>
      </Grid>
    </Box>
  );
}

export default SettingsGeneral;
