import {
  getImageUrl
} from "./chunk-CHYIXG5L.mjs";
import {
  DEFAULT_IMAGE_FORMATS,
  DEFAULT_IMAGE_MAX_SIZE
} from "./chunk-A4UTP3MX.mjs";
import {
  UploadImageContainer
} from "./chunk-5AITJJHW.mjs";

// tmp-babel/messages/web/__shared__/EditGroupTitleAndImage/index.js
import { CircledAvatar } from "@baseapp-frontend/design-system/components/web/avatars";
import { FileUploadButton } from "@baseapp-frontend/design-system/components/web/buttons";
import { TextField } from "@baseapp-frontend/design-system/components/web/inputs";
import { Box, Button, Typography, useTheme } from "@mui/material";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var EditGroupTitleAndImage = function EditGroupTitleAndImage2(_ref) {
  var _getFieldState;
  var form = _ref.form, FORM_VALUE = _ref.FORM_VALUE, isMutationInFlight = _ref.isMutationInFlight;
  var control = form.control, setValue = form.setValue, watch = form.watch, getFieldState = form.getFieldState, clearErrors = form.clearErrors, trigger = form.trigger;
  var handleRemoveImage = function handleRemoveImage2() {
    clearErrors(FORM_VALUE.image);
    setValue(FORM_VALUE.image, null, {
      shouldValidate: true,
      shouldDirty: true,
      shouldTouch: true
    });
  };
  var theme = useTheme();
  var watchImage = watch(FORM_VALUE.image);
  var imageUrl = getImageUrl(watchImage);
  var imageError = (_getFieldState = getFieldState(FORM_VALUE.image)) === null || _getFieldState === void 0 ? void 0 : _getFieldState.error;
  return /* @__PURE__ */ _jsxs(Box, {
    sx: {
      display: "grid",
      gap: theme.spacing(1.5),
      padding: theme.spacing(2)
    },
    children: [/* @__PURE__ */ _jsxs(UploadImageContainer, {
      children: [/* @__PURE__ */ _jsx(CircledAvatar, {
        src: imageUrl,
        width: 144,
        height: 144,
        hasError: !!imageError
      }), imageError && /* @__PURE__ */ _jsx("div", {
        className: "text-center",
        children: /* @__PURE__ */ _jsx(Typography, {
          color: "error.main",
          variant: "caption",
          children: imageError.message
        })
      }), /* @__PURE__ */ _jsx(FileUploadButton, {
        control,
        disabled: isMutationInFlight,
        name: FORM_VALUE.image,
        setFile: setValue,
        accept: DEFAULT_IMAGE_FORMATS,
        maxSize: DEFAULT_IMAGE_MAX_SIZE,
        label: watchImage ? "Change Avatar" : "Upload Avatar"
      }), watchImage && /* @__PURE__ */ _jsx(Button, {
        variant: "text",
        color: "error",
        disabled: isMutationInFlight,
        onClick: handleRemoveImage,
        children: "Remove"
      })]
    }), /* @__PURE__ */ _jsx(TextField, {
      label: "Group Name",
      inputProps: {
        maxLength: 20
      },
      control,
      disabled: isMutationInFlight,
      name: FORM_VALUE.title,
      className: "h-[min-content]",
      onKeyUp: function onKeyUp() {
        trigger(FORM_VALUE.title);
      }
    })]
  });
};
var EditGroupTitleAndImage_default = EditGroupTitleAndImage;

export {
  EditGroupTitleAndImage_default
};
//# sourceMappingURL=chunk-3NQQRZFS.mjs.map