import { useState, useEffect } from "react";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Chip from "@mui/material/Chip";
import Select from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import InputLabel from "@mui/material/InputLabel";
import FormControl from "@mui/material/FormControl";
import { useCreateServer, useVersionList } from "@mcl/queries";

const defaultServer = {
  version: "latest",
  serverType: "VANILLA",
  difficulty: "easy",
  maxPlayers: "5",
  gamemode: "survival",
  memory: "512",
  motd: `\\u00A7e\\u00A7ka\\u00A7l\\u00A7aMine\\u00A76Cluster\\u00A7r\\u00A78\\u00A7b\\u00A7ka`,
};

export default function Create() {
  const [wl, setWl] = useState([]);
  const [ops, setOps] = useState([]);
  const [spec, setSpec] = useState(defaultServer);
  const versionList = useVersionList();
  const [versions, setVersions] = useState(["latest"]);
  const createServer = useCreateServer(spec);
  const updateSpec = (attr, val) => {
    const s = { ...spec };
    s[attr] = val;
    setSpec(s);
    console.log(s);
  };

  useEffect(() => {
    if (!versionList.data) return;
    setVersions([
      "latest",
      ...versionList.data.versions
        .filter(({ type: releaseType }) => releaseType === "release")
        .map(({ id }) => id),
    ]);
  }, [versionList.data]);

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

  function opsAdd(e) {
    const opEntry = e.target.innerHTML ?? e.target.value;
    if (!opEntry) return;
    const newOps = [...ops, opEntry];
    setOps(newOps);
    updateSpec("ops", newOps.join(","));
  }

  function whitelistAdd(e) {
    const wlEntry = e.target.value;
    if (!wlEntry) return;
    const newWl = [...wl, wlEntry];
    setWl(newWl);
    updateSpec("whitelist", newWl.join(","));
  }

  const opsRemove =
    (name, { onDelete: updateAutoComplete }) =>
    (e) => {
      updateAutoComplete(e);
      const newOps = [...ops];
      const entryIndex = newOps.indexOf(name);
      if (entryIndex === -1) return;
      newOps.splice(entryIndex, 1);
      setOps(newOps);
      updateSpec("ops", newOps.join(","));
    };

  const whitelistRemove =
    (name, { onDelete: updateAutocomplete }) =>
    (e) => {
      updateAutocomplete(e);
      const newWl = [...wl];
      const entryIndex = newWl.indexOf(name);
      if (entryIndex === -1) return;
      newWl.splice(entryIndex, 1);
      setWl(newWl);
      updateSpec("whitelist", newWl.join(","));
    };

  const opUpdate = (e) => alert("Op not implimented");

  function upsertSpec() {
    if (validateSpec() !== "validated") return;
    createServer(spec);
  }

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

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

  return (
    <Box
      className="create-options"
      sx={{ width: "100%", maxWidth: "600px", margin: "auto" }}
    >
      <FormControl fullWidth sx={{ mt: "2rem", display: "flex", gap: ".5rem" }}>
        <TextField
          label="Name"
          onChange={coreUpdate("name")}
          helperText="Example: My Survival World"
          defaultValue={spec.name}
          FormHelperTextProps={{ sx: { ml: 0 } }}
          required
        />
        <TextField
          label="Host"
          onChange={coreUpdate("host")}
          helperText="Example: host.mc.example.com"
          FormHelperTextProps={{ sx: { ml: 0 } }}
          required
        />
        <TextField
          label="Version"
          onChange={coreUpdate("version")}
          value={spec.version}
          select
          required
          SelectProps={{ MenuProps: { sx: { maxHeight: "20rem" } } }}
        >
          {versions.map((v, k) => (
            <MenuItem value={v} key={k}>
              {v}
            </MenuItem>
          ))}
        </TextField>
        <TextField
          label="Server Type"
          onChange={coreUpdate("serverType")}
          value={spec.serverType}
          select
          required
        >
          <MenuItem value={"VANILLA"}>Vanilla</MenuItem>
          <MenuItem value={"FABRIC"}>Fabric</MenuItem>
          <MenuItem value={"PAPER"}>Paper</MenuItem>
          <MenuItem value={"SPIGOT"}>Spigot</MenuItem>
        </TextField>
        <TextField
          label="Difficulty"
          onChange={coreUpdate("difficulty")}
          value={spec.difficulty}
          select
          required
        >
          <MenuItem value={"peaceful"}>Peaceful</MenuItem>
          <MenuItem value={"easy"}>Easy</MenuItem>
          <MenuItem value={"medium"}>Medium</MenuItem>
          <MenuItem value={"hard"}>Hard</MenuItem>
        </TextField>

        <Autocomplete
          multiple
          id="whitelist-autocomplete"
          options={[]}
          onChange={whitelistAdd}
          freeSolo
          renderInput={(p) => <TextField {...p} label="Whitelist" />}
          renderTags={(value, getTagProps) =>
            value.map((option, index) => {
              const defaultChipProps = getTagProps({ index });
              return (
                <Chip
                  label={option}
                  {...defaultChipProps}
                  onDelete={whitelistRemove(option, defaultChipProps)}
                />
              );
            })
          }
        />
        <Autocomplete
          filterSelectedOptions={true}
          multiple
          id="ops-autocomplete"
          options={wl}
          onChange={opsAdd}
          renderInput={(p) => <TextField {...p} label="Ops" />}
          renderTags={(value, getTagProps) =>
            value.map((option, index) => {
              const defaultChipProps = getTagProps({ index });
              return (
                <Chip
                  label={option}
                  {...defaultChipProps}
                  onDelete={opsRemove(option, defaultChipProps)}
                />
              );
            })
          }
        />
        {/*<TextField label="Ops" onChange={coreUpdate("ops")} />*/}
        {/*<TextField label="Icon" onChange={coreUpdate("icon")} required />*/}
        <TextField
          label="Max Players"
          onChange={coreUpdate("maxPlayers")}
          defaultValue={spec.maxPlayers}
          required
        />
        <TextField
          label="Gamemode"
          onChange={coreUpdate("gamemode")}
          value={spec.gamemode}
          select
          required
        >
          <MenuItem value={"survival"}>Survival</MenuItem>
          <MenuItem value={"creative"}>Creative</MenuItem>
          <MenuItem value={"adventure"}>Adventure</MenuItem>
          <MenuItem value={"spectator"}>Spectator</MenuItem>
        </TextField>
        <TextField label="Seed" onChange={coreUpdate("seed")} />
        {/*<TextField label="Modpack" onChange={coreUpdate("modpack")} />*/}
        <TextField
          label="Memory"
          onChange={coreUpdate("memory")}
          defaultValue={spec.memory}
          required
        />
        <TextField
          label="MOTD"
          onChange={coreUpdate("motd")}
          defaultValue={spec.motd}
          required
        />
        <Button onClick={upsertSpec} variant="contained">
          Create
        </Button>
      </FormControl>
    </Box>
  );
}