import * as React from "react";
import { useEffect, useState } from "react";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import { InputAdornment, TextField } from "@mui/material";
import Grid from "@mui/material/Grid";
import TypeTable from "../../components/tables/TypeTable";
import SignTable from "../../components/tables/SignTable";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import { fetchSigns } from "../../helpers/signs";
import { fetchSettings, updateSetting } from "../../helpers/settings";

// Setting Page contains TypeTable, SignTable and settings of game
function GeneralSettingsPage() {
  const [settings, setSettings] = useState([]);
  const [signs, setSigns] = useState([]);

  // on page mount fetch settings and signs
  useEffect(() => {
    fetchSettings().then((settingsData) => setSettings(settingsData));
    fetchSigns().then((signsData) => setSigns(signsData));
  }, []);

  // setting textfields handler
  function handleTextFieldChange(e, index) {
    let value = e.target.value;

    // if target is '% of phishing emails in gamerun' check if value is between 0 and 100
    if (index === 1) {
      if (value < 0 || value > 100) {
        return;
      }
    }

    // update changed setting
    let updatedSettings = [...settings];
    updatedSettings[index].value = e.target.value;

    setSettings(updatedSettings);
  }

  // handler for updating setting
  function updateSettingItem(setting) {
    updateSetting(setting.id, setting);
  }

  return (
    <Box>
      {
        // map settings into key: value
        settings.map((setting, index) => (
          // key of setting
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              mt: "55px",
              ml: "15px",
            }}
            key={index}
          >
            <Typography align="right" width="30%" mr={2}>
              {setting.translated_text}:
            </Typography>
            {/* value of setting */}
            <Box sx={{ width: "70%" }}>
              <TextField
                type="number"
                sx={{ width: "60%" }}
                value={setting.value}
                onChange={(e) => handleTextFieldChange(e, index)}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton
                        color="primary"
                        onClick={(e) => updateSettingItem(setting)}
                      >
                        <CheckCircleIcon />
                      </IconButton>
                    </InputAdornment>
                  ),
                }}
              />
            </Box>
          </Box>
        ))
      }
      {/* Grid contains TypeTable and SignTable */}
      <Grid container spacing={0} sx={{ mt: 10 }}>
        <Grid item xs={12} md={6}>
          <TypeTable />
        </Grid>
        <Grid item xs={12} md={6}>
          <SignTable signs={signs} allowCreate={true} />
        </Grid>
      </Grid>
    </Box>
  );
}

export default GeneralSettingsPage;
