"use strict";
exports.id = 2733;
exports.ids = [2733];
exports.modules = {

/***/ 2733:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (/* binding */ UserImage)
/* harmony export */ });
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _functions_frontend_imageInputFileToBase64__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6718);
/* harmony import */ var _general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5472);
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 



/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout;
/** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 * @param {import("@/package-shared/types").UserType} [props.user]
 * @param {string | import("@/package-shared/types").ImageObjectType} props.userImage
 * @param {React.Dispatch<React.SetStateAction<string | import("@/package-shared/types").ImageObjectType>>} props.setUserImage
 * @param {Object} [props.database]
 * @param {Object} [props.className]
 */ function UserImage({ user , userImage , setUserImage , database , className ,  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ const imagePreviewRef = react__WEBPACK_IMPORTED_MODULE_1___default().useRef();
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
        className: "card no-hover col" + (className ? " " + className : ""),
        children: [
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                className: "bg-white rounded-full overflow-hidden w-24 h-24",
                children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("img", {
                    src: userImage ? typeof userImage === "string" ? userImage : userImage.imageBase64Full : "/images/user_images/user-preset.png",
                    alt: "Database Image",
                    width: 100,
                    className: "w-full h-full object-cover",
                    // @ts-ignore
                    ref: imagePreviewRef,
                    "data-imagepreview": "image"
                })
            }),
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                className: "w-full flex-col image-selector-wrapper",
                children: [
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                        className: "button outlined secondary w-full whitespace-normal",
                        onClick: (e)=>{
                            e.target// @ts-ignore
                            .closest(".image-selector-wrapper").querySelector("input").click();
                        },
                        children: "Upload Image"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
                        type: "file",
                        accept: ".png,.jpg,.jpeg,.webp",
                        placeholder: "Choose Database Image",
                        className: "hidden",
                        onChange: async (e)=>{
                            let imageData = await (0,_functions_frontend_imageInputFileToBase64__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)({
                                // @ts-ignore
                                imageInputFile: e.target.files[0],
                                maxWidth: 400
                            });
                            setUserImage(imageData);
                        }
                    })
                ]
            })
        ]
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 


/***/ })

};
;