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

/***/ 9405:
/***/ ((module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* binding */ AttributePage)
/* harmony export */ });
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2322);
/* harmony import */ var _cromwell_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1815);
/* harmony import */ var _cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4536);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6689);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _components_entity_entityEdit_EntityEdit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4342);
/* harmony import */ var _constants_PageInfos__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(379);
/* harmony import */ var _components_AttributeValues__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3937);
var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_components_entity_entityEdit_EntityEdit__WEBPACK_IMPORTED_MODULE_4__]);
_components_entity_entityEdit_EntityEdit__WEBPACK_IMPORTED_MODULE_4__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];







function AttributePage() {
    const client = (0,_cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_2__.getGraphQLClient)();
    const typeInitialValueRef = react__WEBPACK_IMPORTED_MODULE_3___default().useRef();
    const valuesVisibleRef = react__WEBPACK_IMPORTED_MODULE_3___default().useRef(true);
    const forceUpdate = (0,_cromwell_core_frontend__WEBPACK_IMPORTED_MODULE_2__.useForceUpdate)();
    return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_entity_entityEdit_EntityEdit__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
        entityCategory: _cromwell_core__WEBPACK_IMPORTED_MODULE_1__.EDBEntity.Attribute,
        entityListRoute: _constants_PageInfos__WEBPACK_IMPORTED_MODULE_5__/* .attributeListPageInfo.route */ .Cz.route,
        entityBaseRoute: _constants_PageInfos__WEBPACK_IMPORTED_MODULE_5__/* .attributePageInfo.baseRoute */ .HT.baseRoute,
        listLabel: "Attributes",
        entityLabel: "Attribute",
        getById: client.getAttributeById,
        update: client.updateAttribute,
        create: client.createAttribute,
        deleteOne: client.deleteAttribute,
        onSave: async (data)=>{
            if (data.type === "text_input") {
                data.values = [
                    {
                        value: "text_input"
                    }
                ];
            }
            return data;
        },
        fields: [
            {
                key: "key",
                type: "Simple text",
                label: "Key",
                required: true
            },
            {
                key: "title",
                type: "Simple text",
                label: "Title"
            },
            {
                key: "icon",
                type: "Image",
                label: "Icon"
            },
            {
                key: "type",
                type: "Select",
                label: "Attribute type",
                width: {
                    sm: 6
                },
                options: [
                    {
                        value: "radio",
                        label: "Radio"
                    },
                    {
                        value: "checkbox",
                        label: "Checkbox"
                    },
                    {
                        value: "text_input",
                        label: "Text input"
                    }
                ],
                getInitialValue: (value)=>{
                    if (typeInitialValueRef.current) return value || "radio";
                    typeInitialValueRef.current = value || "radio";
                    if (value === "text_input") valuesVisibleRef.current = false;
                    else valuesVisibleRef.current = true;
                    forceUpdate();
                    return value || "radio";
                },
                onChange: (value)=>{
                    if (value === "text_input") valuesVisibleRef.current = false;
                    else valuesVisibleRef.current = true;
                    forceUpdate();
                    return value;
                },
                saveValue: (value)=>{
                    return {
                        type: value || "radio"
                    };
                }
            },
            {
                key: "values",
                type: "custom",
                component: ({ value , onChange  })=>{
                    if (!valuesVisibleRef.current) return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {});
                    return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_AttributeValues__WEBPACK_IMPORTED_MODULE_6__/* .AttributeValues */ .f, {
                        values: value,
                        changeValues: onChange
                    });
                },
                customGraphQlProperty: {
                    values: {
                        value: true,
                        icon: true
                    }
                },
                saveValue: (values)=>{
                    const valuesObj = {};
                    values?.forEach((value)=>{
                        if (!valuesObj[value.value]) valuesObj[value.value] = {
                            value: value.value,
                            title: value.title,
                            icon: value.icon
                        };
                    });
                    return {
                        values: Object.values(valuesObj)
                    };
                }
            },
            {
                key: "required",
                type: "Checkbox",
                tooltip: "A customer will be required to pick a value of this attribute to add a product to the cart",
                label: "Required to fill",
                saveValue: (value)=>({
                        required: !!value
                    })
            }
        ]
    });
}

__webpack_async_result__();
} catch(e) { __webpack_async_result__(e); } });

/***/ }),

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


// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  "f": () => (/* binding */ AttributeValues)
});

// EXTERNAL MODULE: ../../node_modules/react/jsx-runtime.js
var jsx_runtime = __webpack_require__(2322);
// EXTERNAL MODULE: external "@heroicons/react/24/outline"
var outline_ = __webpack_require__(2135);
// EXTERNAL MODULE: external "@mui/material"
var material_ = __webpack_require__(5692);
// EXTERNAL MODULE: external "react"
var external_react_ = __webpack_require__(6689);
// EXTERNAL MODULE: ./src/components/buttons/IconButton.tsx
var IconButton = __webpack_require__(4137);
// EXTERNAL MODULE: ./src/components/transferList/CheckList.tsx
var CheckList = __webpack_require__(8739);
// EXTERNAL MODULE: ./src/components/fileManager/helpers.ts
var helpers = __webpack_require__(441);
// EXTERNAL MODULE: ./src/components/inputs/TextInput/TextInput.tsx
var TextInput = __webpack_require__(2032);
;// CONCATENATED MODULE: ./src/router-pages/attribute/components/ValueItem.tsx







const ValueItem = (props)=>{
    const { values , changeValues  } = props;
    const value = values.find((item)=>item.value === props.value);
    const handleChangeIcon = async ()=>{
        const newIconSrc = await (0,helpers/* getFileManager */.H)()?.getPhoto();
        if (newIconSrc) {
            const newValues = [
                ...values ?? []
            ].map((val)=>({
                    ...val
                }));
            newValues.forEach((val, index)=>{
                if (val === value) newValues[index].icon = newIconSrc;
            });
            changeValues(newValues);
        }
    };
    const handleDeleteValue = ()=>{
        const newValues = [
            ...values ?? []
        ].filter((val)=>val.value !== value.value);
        changeValues(newValues);
    };
    const handleValueNameChange = (event)=>{
        const newValues = [
            ...values ?? []
        ].map((val)=>{
            if (val === value) return {
                ...val,
                value: event.target.value
            };
            return val;
        });
        changeValues(newValues);
    };
    return /*#__PURE__*/ (0,jsx_runtime.jsxs)("div", {
        style: {
            display: "flex",
            alignItems: "center"
        },
        children: [
            /*#__PURE__*/ jsx_runtime.jsx(TextInput/* TextInput */.o, {
                style: {
                    marginRight: "15px"
                },
                defaultValue: props.value,
                onChange: handleValueNameChange,
                baseSize: "small"
            }),
            /*#__PURE__*/ jsx_runtime.jsx(material_.Tooltip, {
                title: "Change icon",
                children: /*#__PURE__*/ jsx_runtime.jsx(IconButton/* IconButton */.h, {
                    onClick: handleChangeIcon,
                    children: value.icon ? /*#__PURE__*/ jsx_runtime.jsx("div", {
                        style: {
                            width: "20px",
                            height: "20px",
                            background: `url("${value.icon}") center center no-repeat`,
                            backgroundSize: "contain"
                        }
                    }) : /*#__PURE__*/ jsx_runtime.jsx(outline_.PhotoIcon, {
                        className: "w-4 h-4"
                    })
                })
            }),
            /*#__PURE__*/ jsx_runtime.jsx(material_.Tooltip, {
                title: "Delete value",
                children: /*#__PURE__*/ jsx_runtime.jsx(IconButton/* IconButton */.h, {
                    onClick: handleDeleteValue,
                    children: /*#__PURE__*/ jsx_runtime.jsx(outline_.TrashIcon, {
                        className: "w-4 h-4"
                    })
                })
            })
        ]
    });
};

;// CONCATENATED MODULE: ./src/router-pages/attribute/components/AttributeValues.tsx








const AttributeValues = (props)=>{
    const { values =[] , changeValues  } = props;
    const [checkedValues, setCheckedValues] = (0,external_react_.useState)([]);
    const handleAddValue = ()=>{
        const newValues = [
            ...values ?? []
        ];
        newValues.push({
            value: ""
        });
        changeValues(newValues);
    };
    const handleCheckedValuesChange = (newChecked)=>{
        setCheckedValues(newChecked);
    };
    const handleDeleteAttribute = async ()=>{
        // remove checked values
        const newValues = values.filter((val)=>!checkedValues.includes(val.value));
        changeValues(newValues);
        setCheckedValues([]);
    };
    return /*#__PURE__*/ jsx_runtime.jsx(CheckList/* CheckList */.S, {
        title: "Values",
        items: values.map((val)=>val.value),
        checked: checkedValues,
        setChecked: handleCheckedValuesChange,
        fullWidthToggle: false,
        actions: /*#__PURE__*/ (0,jsx_runtime.jsxs)("div", {
            style: {
                marginLeft: "30px",
                display: "flex"
            },
            children: [
                /*#__PURE__*/ jsx_runtime.jsx(material_.Tooltip, {
                    title: "Add new value",
                    children: /*#__PURE__*/ jsx_runtime.jsx(IconButton/* IconButton */.h, {
                        onClick: handleAddValue,
                        children: /*#__PURE__*/ jsx_runtime.jsx(outline_.PlusIcon, {
                            className: "w-5 h-5"
                        })
                    })
                }),
                /*#__PURE__*/ jsx_runtime.jsx(material_.Tooltip, {
                    title: "Remove checked values",
                    children: /*#__PURE__*/ jsx_runtime.jsx(IconButton/* IconButton */.h, {
                        onClick: handleDeleteAttribute,
                        disabled: !checkedValues?.length,
                        children: /*#__PURE__*/ jsx_runtime.jsx(outline_.TrashIcon, {
                            className: "w-5 h-5"
                        })
                    })
                })
            ]
        }),
        itemComp: ValueItem,
        itemProps: {
            changeValues,
            values
        }
    });
};


/***/ })

};
;