import { InputNumber, notification } from "antd";
import React, { useState } from "react";
import { useMutation } from "@apollo/client";
import { useTranslation } from "react-i18next";
import { UPDATE_ASSOCIATION } from "../../graphql/user.queries";

export default function ShopUsersAuthEdit({ association }) {
  const { t } = useTranslation();
  const [updateAssociation] = useMutation(UPDATE_ASSOCIATION);
  const [visible, setVisible] = useState(false);
  const [value, setValue] = useState(association.authlevel);

  const handleSave = async () => {
    setVisible(false);
    const result = await updateAssociation({
      variables: {
        assocId: association.id,
        assoc: { authlevel: value },
      },
    });

    if (!!result.errors) {
      notification["error"]({
        message: t("user.errors.updating", {
          message: JSON.stringify(result.errors),
        }),
      });
    }
  };

  return (
    <div>
      {visible && (
        <div>
          <InputNumber
            min={0}
            value={value}
            onChange={(val) => setValue(val)}
            defaultValue={association.authlevel}
            onBlur={handleSave}
          />
        </div>
      )}
      {!visible && (
        <div
          style={{ cursor: "pointer" }} //onClick={() => setVisible(true)}
        >
          {association.authlevel || t("general.labels.na")}
        </div>
      )}
    </div>
  );
}