import { useState, useEffect } from "react";
import TextField from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";
import { useVersionList } from "@mcl/queries";

export default function VersionOption(props) {
  const { value, onChange } = props;
  const versionList = useVersionList();
  const [versions, setVersions] = useState(["latest"]);

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

  return (
    <TextField
      label="Version"
      onChange={onChange}
      value={value ?? "latest"}
      select
      required
      SelectProps={{ MenuProps: { sx: { maxHeight: "20rem" } } }}
    >
      {versions.map((v, k) => (
        <MenuItem value={v} key={k}>
          {v}
        </MenuItem>
      ))}
    </TextField>
  );
}