import React__default, { useMemo, useRef, useContext, useState } from 'react';
import Modal from './ui/Modal.js';
import { a as LocalizationContext } from './LocalizationContext-1701e5c8.js';
import useSendbirdStateContext from './useSendbirdStateContext.js';
import Input, { InputLabel } from './ui/Input.js';
import Avatar from './ui/Avatar.js';
import Icon, { IconTypes } from './ui/Icon.js';
import { ButtonTypes } from './ui/Button.js';
import { L as Label, a as LabelTypography, b as LabelColors } from './index-f50d7ab0.js';
import TextButton from './ui/TextButton.js';
import { n as noop } from './utils-05aa9060.js';
import { U as USER_ACTIONS } from './actionTypes-cccf62ac.js';

const EditUserProfileProviderContext = /*#__PURE__*/React__default.createContext(undefined);
const EditUserProfileProvider = props => {
  const {
    children,
    onEditProfile,
    onCancel,
    onThemeChange
  } = props;
  const value = useMemo(() => {
    return {
      onEditProfile,
      onCancel,
      onThemeChange
    };
  }, []);
  return /*#__PURE__*/React__default.createElement(EditUserProfileProviderContext.Provider, {
    value: value
  }, children);
};
const useEditUserProfileContext = () => React__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 = useRef(null);
  const inputRef = useRef(null);
  const formRef = useRef(null);
  const {
    stringSet
  } = useContext(LocalizationContext);
  const [currentImg, setCurrentImg] = useState(null);
  const [newFile, setNewFile] = 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) || 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.createElement(Modal, {
    titleText: stringSet.EDIT_PROFILE__TITLE,
    submitText: stringSet.BUTTON__SAVE,
    type: 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: USER_ACTIONS.UPDATE_USER_INFO,
          payload: updatedUser
        });
        if (onEditProfile && typeof onEditProfile === 'function') {
          onEditProfile(updatedUser);
        }
      });
    }
  }, /*#__PURE__*/React__default.createElement("form", {
    className: "sendbird-edit-user-profile",
    ref: formRef,
    onSubmit: e => {
      e.preventDefault();
    }
  }, /*#__PURE__*/React__default.createElement("section", {
    className: "sendbird-edit-user-profile__img"
  }, /*#__PURE__*/React__default.createElement(InputLabel, null, stringSet.EDIT_PROFILE__IMAGE_LABEL), /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-edit-user-profile__img__avatar"
  }, /*#__PURE__*/React__default.createElement(Avatar, {
    width: "80px",
    height: "80px",
    src: currentImg || (user === null || user === void 0 ? void 0 : user.profileUrl)
  })), /*#__PURE__*/React__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.createElement(TextButton, {
    className: "sendbird-edit-user-profile__img__avatar-button",
    disableUnderline: true,
    onClick: () => hiddenInputRef.current.click()
  }, /*#__PURE__*/React__default.createElement(Label, {
    type: LabelTypography.BUTTON_1,
    color: LabelColors.PRIMARY
  }, stringSet.EDIT_PROFILE__IMAGE_UPLOAD))), /*#__PURE__*/React__default.createElement("section", {
    className: "sendbird-edit-user-profile__name"
  }, /*#__PURE__*/React__default.createElement(InputLabel, null, stringSet.EDIT_PROFILE__NICKNAME_LABEL), /*#__PURE__*/React__default.createElement(Input, {
    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.createElement("section", {
    className: "sendbird-edit-user-profile__userid"
  }, /*#__PURE__*/React__default.createElement(InputLabel, null, stringSet.EDIT_PROFILE__USERID_LABEL), /*#__PURE__*/React__default.createElement(Input, {
    disabled: true,
    name: "sendbird-edit-user-profile__userid__input",
    value: user === null || user === void 0 ? void 0 : user.userId
  })), /*#__PURE__*/React__default.createElement("section", {
    className: "sendbird-edit-user-profile__theme"
  }, /*#__PURE__*/React__default.createElement(InputLabel, null, stringSet.EDIT_PROFILE__THEME_LABEL), /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-edit-user-profile__theme__theme-icon"
  }, theme === 'dark' ? /*#__PURE__*/React__default.createElement(Icon, {
    onClick: () => {
      changeTheme('light');
      onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange('light');
      // if (onThemeChange && typeof onThemeChange === 'function') {
      //   onThemeChange('light');
      // }
    },

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

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

export { EditUserProfileProvider as E, EditUserProfile as a };
//# sourceMappingURL=index-9c80246a.js.map
