import { FormControlLabel, Switch } from "@mui/material";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { updateGuildsSettingsService } from "../../services/update-guilds-settings";

export const ManageGuildsState = ({
  guildState,
  choose_steward_guilds_key,
}) => {
  const dispatch = useDispatch();
  const [switchState, setSwitchState] = useState(guildState);

  const handleSwitchChange = () => {
    setSwitchState((prevState) => {
      dispatch(
        updateGuildsSettingsService({
          choose_steward_guilds_key,
          guilds: !prevState,
        })
      );
      return !prevState;
    });
  };

  return (
    <Grid container alignItems="center" justifyContent="center">
      <FormControlLabel
        control={
          <Switch
            checked={switchState}
            onChange={handleSwitchChange}
            name="switchState"
            color="primary"
          />
        }
        // label="Toggle Switch"
      />
    </Grid>
  );
};
