'use strict';

var React = require('react');
var ui_Modal = require('./ui/Modal.js');
var LocalizationContext = require('./LocalizationContext-8cc9717d.js');
var useSendbirdStateContext = require('./useSendbirdStateContext.js');
var ui_Input = require('./ui/Input.js');
var ui_Avatar = require('./ui/Avatar.js');
var ui_Icon = require('./ui/Icon.js');
var ui_Button = require('./ui/Button.js');
var ui_Label = require('./index-35633fb6.js');
var ui_TextButton = require('./ui/TextButton.js');
var utils = require('./utils-5aa0708e.js');
var actionTypes = require('./actionTypes-0755b8bb.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

const EditUserProfileProviderContext = /*#__PURE__*/React__default["default"].createContext(undefined);
const EditUserProfileProvider = props => {
  const {
    children,
    onEditProfile,
    onCancel,
    onThemeChange
  } = props;
  const value = React.useMemo(() => {
    return {
      onEditProfile,
      onCancel,
      onThemeChange
    };
  }, []);
  return /*#__PURE__*/React__default["default"].createElement(EditUserProfileProviderContext.Provider, {
    value: value
  }, children);
};
const useEditUserProfileContext = () => React__default["default"].useContext(EditUserProfileProviderContext);

function EditUserProfile() {
  var _store$config, _store$config2, _store$stores, _store$stores$userSto, _store$stores2, _store$stores2$sdkSto, _store$dispatchers;
  const editProfileProps = useEditUserProfileContext();
  const store = useSendbirdStateContext();
  const hiddenInputRef = React.useRef(null);
  const inputRef = React.useRef(null);
  const formRef = React.useRef(null);
  const {
    stringSet
  } = React.useContext(LocalizationContext.LocalizationContext);
  const [currentImg, setCurrentImg] = React.useState(null);
  const [newFile, setNewFile] = React.useState(null);
  const {
    onEditProfile,
    onCancel,
    onThemeChange
  } = editProfileProps;
  const theme = (store === null || store === void 0 ? void 0 : (_store$config = store.config) === null || _store$config === void 0 ? void 0 : _store$config.theme) || 'light';
  const changeTheme = (store === null || store === void 0 ? void 0 : (_store$config2 = store.config) === null || _store$config2 === void 0 ? void 0 : _store$config2.setCurrenttheme) || utils.noop;
  const user = store === null || store === void 0 ? void 0 : (_store$stores = store.stores) === null || _store$stores === void 0 ? void 0 : (_store$stores$userSto = _store$stores.userStore) === null || _store$stores$userSto === void 0 ? void 0 : _store$stores$userSto.user;
  const sdk = store === null || store === void 0 ? void 0 : (_store$stores2 = store.stores) === null || _store$stores2 === void 0 ? void 0 : (_store$stores2$sdkSto = _store$stores2.sdkStore) === null || _store$stores2$sdkSto === void 0 ? void 0 : _store$stores2$sdkSto.sdk;
  const userDispatcher = store === null || store === void 0 ? void 0 : (_store$dispatchers = store.dispatchers) === null || _store$dispatchers === void 0 ? void 0 : _store$dispatchers.userDispatcher;
  return /*#__PURE__*/React__default["default"].createElement(ui_Modal["default"], {
    titleText: stringSet.EDIT_PROFILE__TITLE,
    submitText: stringSet.BUTTON__SAVE,
    type: ui_Button.ButtonTypes.PRIMARY,
    onCancel: onCancel,
    isFullScreenOnMobile: true,
    onSubmit: () => {
      var _inputRef$current;
      if ((user === null || user === void 0 ? void 0 : user.nickname) !== '' && !inputRef.current.value) {
        if (formRef.current.reportValidity) {
          // might not work in explorer
          formRef.current.reportValidity();
        }
        return;
      }
      sdk === null || sdk === void 0 ? void 0 : sdk.updateCurrentUserInfo({
        nickname: inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value,
        profileImage: newFile
      }).then(updatedUser => {
        userDispatcher({
          type: actionTypes.USER_ACTIONS.UPDATE_USER_INFO,
          payload: updatedUser
        });
        if (onEditProfile && typeof onEditProfile === 'function') {
          onEditProfile(updatedUser);
        }
      });
    }
  }, /*#__PURE__*/React__default["default"].createElement("form", {
    className: "sendbird-edit-user-profile",
    ref: formRef,
    onSubmit: e => {
      e.preventDefault();
    }
  }, /*#__PURE__*/React__default["default"].createElement("section", {
    className: "sendbird-edit-user-profile__img"
  }, /*#__PURE__*/React__default["default"].createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__IMAGE_LABEL), /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-edit-user-profile__img__avatar"
  }, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
    width: "80px",
    height: "80px",
    src: currentImg || (user === null || user === void 0 ? void 0 : user.profileUrl)
  })), /*#__PURE__*/React__default["default"].createElement("input", {
    ref: hiddenInputRef,
    type: "file",
    accept: "image/gif, image/jpeg, image/png",
    style: {
      display: 'none'
    },
    onChange: e => {
      setCurrentImg(URL.createObjectURL(e.target.files[0]));
      setNewFile(e.target.files[0]);
      hiddenInputRef.current.value = '';
    }
  }), /*#__PURE__*/React__default["default"].createElement(ui_TextButton, {
    className: "sendbird-edit-user-profile__img__avatar-button",
    disableUnderline: true,
    onClick: () => hiddenInputRef.current.click()
  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
    type: ui_Label.LabelTypography.BUTTON_1,
    color: ui_Label.LabelColors.PRIMARY
  }, stringSet.EDIT_PROFILE__IMAGE_UPLOAD))), /*#__PURE__*/React__default["default"].createElement("section", {
    className: "sendbird-edit-user-profile__name"
  }, /*#__PURE__*/React__default["default"].createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__NICKNAME_LABEL), /*#__PURE__*/React__default["default"].createElement(ui_Input["default"], {
    required: (user === null || user === void 0 ? void 0 : user.nickname) !== '',
    name: "sendbird-edit-user-profile__name__input",
    ref: inputRef,
    value: user === null || user === void 0 ? void 0 : user.nickname,
    placeHolder: stringSet.EDIT_PROFILE__NICKNAME_PLACEHOLDER
  })), /*#__PURE__*/React__default["default"].createElement("section", {
    className: "sendbird-edit-user-profile__userid"
  }, /*#__PURE__*/React__default["default"].createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__USERID_LABEL), /*#__PURE__*/React__default["default"].createElement(ui_Input["default"], {
    disabled: true,
    name: "sendbird-edit-user-profile__userid__input",
    value: user === null || user === void 0 ? void 0 : user.userId
  })), /*#__PURE__*/React__default["default"].createElement("section", {
    className: "sendbird-edit-user-profile__theme"
  }, /*#__PURE__*/React__default["default"].createElement(ui_Input.InputLabel, null, stringSet.EDIT_PROFILE__THEME_LABEL), /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-edit-user-profile__theme__theme-icon"
  }, theme === 'dark' ? /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    onClick: () => {
      changeTheme('light');
      onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange('light');
      // if (onThemeChange && typeof onThemeChange === 'function') {
      //   onThemeChange('light');
      // }
    },

    type: ui_Icon.IconTypes.TOGGLE_ON,
    width: 44,
    height: 24
  }) : /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    onClick: () => {
      changeTheme('dark');
      onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange('dark');
      // if (onThemeChange && typeof onThemeChange === 'function') {
      //   onThemeChange('dark');
      // }
    },

    type: ui_Icon.IconTypes.TOGGLE_OFF,
    width: 44,
    height: 24
  })))));
}

exports.EditUserProfile = EditUserProfile;
exports.EditUserProfileProvider = EditUserProfileProvider;
//# sourceMappingURL=index-f3784774.js.map
