"use strict";Object.defineProperty(exports, "__esModule", {value: true});

var _chunk4QRHT4EHjs = require('./chunk-4QRHT4EH.js');



var _chunk2DV7FTYXjs = require('./chunk-2DV7FTYX.js');


var _chunkFKWDFOOHjs = require('./chunk-FKWDFOOH.js');

// tmp-babel/messages/web/__shared__/EditGroupTitleAndImage/index.js
var _avatars = require('@baseapp-frontend/design-system/components/web/avatars');
var _buttons = require('@baseapp-frontend/design-system/components/web/buttons');
var _inputs = require('@baseapp-frontend/design-system/components/web/inputs');
var _material = require('@mui/material');
var _jsxruntime = require('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 = _material.useTheme.call(void 0, );
  var watchImage = watch(FORM_VALUE.image);
  var imageUrl = _chunk4QRHT4EHjs.getImageUrl.call(void 0, watchImage);
  var imageError = (_getFieldState = getFieldState(FORM_VALUE.image)) === null || _getFieldState === void 0 ? void 0 : _getFieldState.error;
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, {
    sx: {
      display: "grid",
      gap: theme.spacing(1.5),
      padding: theme.spacing(2)
    },
    children: [/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkFKWDFOOHjs.UploadImageContainer, {
      children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _avatars.CircledAvatar, {
        src: imageUrl,
        width: 144,
        height: 144,
        hasError: !!imageError
      }), imageError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
        className: "text-center",
        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, {
          color: "error.main",
          variant: "caption",
          children: imageError.message
        })
      }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _buttons.FileUploadButton, {
        control,
        disabled: isMutationInFlight,
        name: FORM_VALUE.image,
        setFile: setValue,
        accept: _chunk2DV7FTYXjs.DEFAULT_IMAGE_FORMATS,
        maxSize: _chunk2DV7FTYXjs.DEFAULT_IMAGE_MAX_SIZE,
        label: watchImage ? "Change Avatar" : "Upload Avatar"
      }), watchImage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, {
        variant: "text",
        color: "error",
        disabled: isMutationInFlight,
        onClick: handleRemoveImage,
        children: "Remove"
      })]
    }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _inputs.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;



exports.EditGroupTitleAndImage_default = EditGroupTitleAndImage_default;
//# sourceMappingURL=chunk-WNUWPU4Y.js.map