import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import FormControl from "@mui/material/FormControl";
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";
import Typography from "@mui/material/Typography";
import { useGetServer, useModifyServer } from "@mcl/queries";

// Core Options
import NameOption from "@mcl/components/server-options/NameOption.jsx";
import HostOption from "@mcl/components/server-options/HostOption.jsx";
import VersionOption from "@mcl/components/server-options/VersionOption.jsx";
import ServerTypeOption, {
  serverTypeOptions,
} from "@mcl/components/server-options/ServerTypeOption.jsx";
import CpuOption, {
  cpuOptions,
} from "@mcl/components/server-options/CpuOption.jsx";
import MemoryOption, {
  memoryOptions,
} from "@mcl/components/server-options/MemoryOption.jsx";
import ExtraPortsOption from "@mcl/components/server-options/ExtraPortsOption.jsx";

import BackupHostOption from "@mcl/components/server-options/BackupHostOption.jsx";
import BackupBucketOption from "@mcl/components/server-options/BackupBucketOption.jsx";
import BackupIdOption from "@mcl/components/server-options/BackupIdOption.jsx";
import BackupKeyOption from "@mcl/components/server-options/BackupKeyOption.jsx";
import BackupIntervalOption, {
  backupIntervalDefault,
} from "@mcl/components/server-options/BackupIntervalOption.jsx";

export default function EditCoreOptions(props) {
  const { serverId } = props;
  const [spec, setSpec] = useState();
  const modifyServer = useModifyServer(spec);
  const nav = useNavigate();
  const { isLoading, data: serverBlueprint } = useGetServer(serverId);

  useEffect(() => setSpec(serverBlueprint), [serverBlueprint]);

  const updateSpec = (attr, val) => {
    const s = { ...spec };
    s[attr] = val;
    setSpec(s);
  };

  const coreUpdate = (attr) => (e) => updateSpec(attr, e.target.value);

  const upsertSpec = () => modifyServer().then(() => nav("/"));

  const toggleBackupEnabled = () =>
    updateSpec("backupEnabled", !spec.backupEnabled);

  function validateSpec() {
    console.log("TODO CREATE VALIDATION");
    if (!spec.host) return alertValidationError("Host cannot be blank");
    if (!spec.name) return alertValidationError("Name not included");
    if (!spec.version) return alertValidationError("Version cannot be blank");
    return "validated";
  }

  function alertValidationError(reason) {
    alert(`Could not validate spec because: ${reason}`);
  }

  if (!spec) return; // TODO: Add loading for spec
  return (
    <Box
      className="edit-options"
      sx={{ width: "100%", maxWidth: "600px", margin: "auto" }}
    >
      <FormControl fullWidth sx={{ mt: "2rem", display: "flex", gap: ".5rem" }}>
        <NameOption value={spec.name} onChange={coreUpdate("name")} />
        <HostOption value={spec.host} onChange={coreUpdate("host")} />
        <VersionOption value={spec.version} onChange={coreUpdate("version")} />
        <ServerTypeOption
          value={spec.serverType}
          onChange={coreUpdate("serverType")}
        />
        <CpuOption value={spec.cpu} onChange={coreUpdate("cpu")} />
        <MemoryOption value={spec.memory} onChange={coreUpdate("memory")} />

        <ExtraPortsOption extraPorts={spec.extraPorts} onChange={updateSpec} />
        {spec.backupEnabled !== null && (
          <FormControlLabel
            control={
              <Switch
                checked={spec.backupEnabled}
                inputProps={{ "aria-label": "controlled" }}
                onClick={toggleBackupEnabled}
              />
            }
            label="Enable Backups?"
            labelPlacement="start"
            sx={{ mr: "auto" }}
          />
        )}

        {/*spec.backupEnabled && ( // TODO: Disabled while secrets are insecure
          <FormControl
            fullWidth
            sx={{ mt: "2rem", display: "flex", gap: ".5rem" }}
          >
            <Typography variant="h6">Backups</Typography>
            <BackupHostOption
              value={spec.backupHost}
              onChange={coreUpdate("backupHost")}
            />
            <BackupBucketOption
              value={spec.backupBucket}
              onChange={coreUpdate("backupBucket")}
            />
            <BackupIdOption
              value={spec.backupId}
              onChange={coreUpdate("backupId")}
            />
            <BackupKeyOption
              value={spec.backupKey}
              onChange={coreUpdate("backupKey")}
            />
            <BackupIntervalOption onChange={coreUpdate("backupInterval")} />
          </FormControl>
        )*/}

        <Button onClick={upsertSpec} variant="contained">
          Save Changes
        </Button>
      </FormControl>
    </Box>
  );
}