import { E as compilerRuntimeExports, j as jsxRuntimeExports, r as reactExports, a as r } from "./vendor-react-DYNCg6N5.js";
import { c as useAppSelector } from "./index-DfebxkL9.js";
import { u as useStyles$3 } from "./styles-CGXtrnyw.js";
import { g as getValidateErrors } from "./validation-Ds00Zghx.js";
import { C as CommonSectionTemplate } from "./index-BRmgVx8q.js";
import { a as IFileAccessModifier, u as useSaveCommonSettings, I as ICommonSettingsEnum } from "./useSaveCommonSettings-DdirtcwG.js";
import { c as createStyles, r as rem, aw as Dropzone, s as showNotification, T as Text, F as Flex, b as Box, V as LoadingOverlay, z as useForm, a0 as SimpleGrid, E as TextInput, aH as ColorInput, B as Button } from "./vendor-mantine-h0WlM2Mj.js";
import { M as Modal } from "./index-DqcA8P_y.js";
import { u as useTranslation } from "./vendor-i18n-wisIXUFi.js";
import { ag as IconFolderUp } from "./vendor-icons-xWhXK_Ui.js";
import { b as base64ToBlob } from "./index-zpOhy7mV.js";
import { u as uploadFile } from "./index-CEv9Eejp.js";
import { v as validateSchemeBrandingCommon } from "./validate-DKrglko6.js";
import "./styles-3NoIlzov.js";
import "./papaparse.min-Ds9XhCoe.js";
import "./types-espwwxTQ.js";
const brandingSettings = {
  common: {
    logoDimensions: {
      width: 284,
      height: 64
    },
    allowedMimeType: ["image/png", "image/svg+xml"]
  }
};
const useStyles$2 = createStyles((theme, {
  dimensions
}, utils) => ({
  imageContainer: {
    display: "flex",
    justifyContent: "flex-start",
    alignItems: "center",
    border: "1px solid #D0D5DD",
    borderRadius: theme.radius.md,
    position: "relative",
    overflow: "hidden",
    height: `${dimensions.height + 16}px`,
    width: `${dimensions.width + 16}px`,
    maxWidth: `${dimensions.width + 16}px`,
    maxHeight: `${dimensions.height + 16}px`,
    padding: theme.spacing.xs,
    marginBottom: theme.spacing.xs,
    [utils.smallerThan("xs")]: {
      maxWidth: "300px"
    }
  },
  imageOverlay: {
    position: "absolute",
    left: 0,
    bottom: 0,
    width: "100%",
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    cursor: "pointer",
    transition: ".3s ease",
    opacity: 0,
    backgroundColor: theme.colors.dark[9],
    textAlign: "center",
    "&:hover": {
      opacity: "0.7"
    }
  },
  description: {
    fontSize: "12px",
    lineHeight: "17.5px",
    color: theme.colors.brandGray[0],
    fontWeight: 500,
    marginBottom: theme.spacing.xs
  }
}));
const useStyles$1 = createStyles((theme) => ({
  root: {
    width: "100%",
    height: "100%",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "space-between"
  },
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "flex-start",
    width: "100%",
    overflowX: "hidden",
    padding: theme.spacing.md
  },
  control: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    width: "100%",
    marginTop: theme.spacing.sm
  },
  controlTextInfo: {
    color: theme.colors.brandGray[0],
    fontSize: "12px",
    lineHeight: "15px",
    marginTop: theme.spacing.md
  },
  footer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    width: "100%",
    backgroundColor: "#F9FAFB",
    height: "63px",
    padding: `0px ${theme.spacing.md}`,
    borderTop: "1px solid #F2F4F7"
  },
  cancelBtn: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    height: "36px",
    borderRadius: "8px",
    padding: `8px ${theme.spacing.sm}`,
    backgroundColor: theme.colors.brandGray[1],
    fontSize: "14px",
    color: "#101828",
    fontWeight: 600,
    lineHeight: "17px",
    "&:hover": {
      backgroundColor: "#eff0f4"
    },
    "&:active": {
      transform: `translateY(1px)`
    }
  }
}));
const useStyles = createStyles((theme) => ({
  editor: {
    position: "relative"
    // backgroundColor: 'red'
  },
  dropZone: {
    padding: "0px",
    height: "300px",
    width: "300px",
    "& .mantine-Dropzone-inner": {
      dispay: "flex",
      flexDirection: "column",
      alignItems: "center",
      display: "flex",
      justifyContent: "center",
      height: "100%",
      "& svg": {
        display: "flex",
        alignItems: "center",
        margin: "0 auto",
        marginBottom: "10px"
      }
    }
  },
  text: {
    color: theme.colors.gray[6]
  },
  range: {
    width: "250px"
  },
  slider: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    width: "300px",
    paddingTop: "20px"
  },
  hint: {
    display: "flex",
    position: "absolute",
    top: "220px",
    textAlign: "center",
    zIndex: 1,
    backgroundColor: "rgba(200, 200, 200, 0.5)",
    borderRadius: "8px",
    width: "70%",
    color: "white",
    fontSize: "14px"
  }
}));
const ImageUploader = (t0) => {
  const $ = compilerRuntimeExports.c(26);
  const {
    setLogoFile,
    allowedMimeType: t1,
    maxDimensions
  } = t0;
  let t2;
  if ($[0] !== t1) {
    t2 = t1 === void 0 ? ["image/png"] : t1;
    $[0] = t1;
    $[1] = t2;
  } else {
    t2 = $[1];
  }
  const allowedMimeType = t2;
  const {
    classes,
    theme
  } = useStyles();
  const {
    t
  } = useTranslation();
  let t3;
  if ($[2] !== t) {
    t3 = (files) => {
      if (files[0].file.size > 5242880) {
        showNotification({
          title: t("avatar.warning"),
          message: "",
          autoClose: true,
          color: "red"
        });
        return false;
      }
    };
    $[2] = t;
    $[3] = t3;
  } else {
    t3 = $[3];
  }
  const onBeforeFileLoad = t3;
  let t4;
  if ($[4] !== allowedMimeType || $[5] !== maxDimensions || $[6] !== setLogoFile || $[7] !== t) {
    t4 = async (files_0) => {
      if (files_0.length > 0) {
        const file = files_0[0];
        const fileType = file == null ? void 0 : file.type;
        if (!allowedMimeType.includes(fileType)) {
          showNotification({
            title: t("commonSettings.incorrectImageExtension"),
            message: "",
            autoClose: true,
            color: "red"
          });
        } else {
          const img = new Image();
          img.onload = () => {
            if (fileType === "image/png" && (img.width !== maxDimensions.width || img.height !== maxDimensions.height)) {
              showNotification({
                title: t("commonSettings.incorrectImageDimensions", {
                  width: maxDimensions.width,
                  height: maxDimensions.height
                }),
                message: "",
                autoClose: true,
                color: "red"
              });
              return;
            }
            const reader = new FileReader();
            reader.onload = (e) => {
              var _a;
              setLogoFile((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.result);
            };
            reader.readAsDataURL(file);
          };
          img.src = URL.createObjectURL(file);
        }
      }
    };
    $[4] = allowedMimeType;
    $[5] = maxDimensions;
    $[6] = setLogoFile;
    $[7] = t;
    $[8] = t4;
  } else {
    t4 = $[8];
  }
  const onDrop = t4;
  const t5 = classes.dropZone;
  let t6;
  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
    t6 = rem(200);
    $[9] = t6;
  } else {
    t6 = $[9];
  }
  const t7 = theme.colors[theme.primaryColor];
  let t8;
  if ($[10] !== t7[6]) {
    t8 = /* @__PURE__ */ jsxRuntimeExports.jsx(Dropzone.Accept, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconFolderUp, { size: "4rem", stroke: 1.5, color: t7[6] }) });
    $[10] = t7[6];
    $[11] = t8;
  } else {
    t8 = $[11];
  }
  let t9;
  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
    t9 = /* @__PURE__ */ jsxRuntimeExports.jsx(Dropzone.Idle, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconFolderUp, { size: "4rem", stroke: 1.5 }) });
    $[12] = t9;
  } else {
    t9 = $[12];
  }
  let t10;
  if ($[13] !== t) {
    t10 = t("commonSettings.choosePhoto");
    $[13] = t;
    $[14] = t10;
  } else {
    t10 = $[14];
  }
  let t11;
  if ($[15] !== t10) {
    t11 = /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: "m", inline: true, children: t10 });
    $[15] = t10;
    $[16] = t11;
  } else {
    t11 = $[16];
  }
  let t12;
  if ($[17] !== t11 || $[18] !== t8) {
    t12 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { gap: "md", justify: "center", align: "center", direction: "column", h: t6, w: "300px", children: [
      t8,
      t9,
      t11
    ] });
    $[17] = t11;
    $[18] = t8;
    $[19] = t12;
  } else {
    t12 = $[19];
  }
  let t13;
  if ($[20] !== allowedMimeType || $[21] !== classes.dropZone || $[22] !== onBeforeFileLoad || $[23] !== onDrop || $[24] !== t12) {
    t13 = /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Dropzone, { className: t5, onDrop, multiple: false, onReject: onBeforeFileLoad, maxSize: 5242880, accept: allowedMimeType, children: t12 }) });
    $[20] = allowedMimeType;
    $[21] = classes.dropZone;
    $[22] = onBeforeFileLoad;
    $[23] = onDrop;
    $[24] = t12;
    $[25] = t13;
  } else {
    t13 = $[25];
  }
  return t13;
};
const useImageUpload = () => {
  const {
    t
  } = useTranslation();
  const [isUploading, setIsUploading] = reactExports.useState(false);
  const uploadLogoFile = reactExports.useCallback(async (image) => {
    try {
      setIsUploading(true);
      const file = await base64ToBlob(image);
      if (file) {
        const formData = new FormData();
        formData.append("file", file);
        formData.append("FileAccessModifier", IFileAccessModifier.Public.toString());
        const response = await uploadFile(formData);
        if (response && response.data) {
          setIsUploading(false);
          return response.data;
        }
      } else {
        setIsUploading(false);
      }
    } catch (error) {
      showNotification({
        title: t("requestsErrors.unknownError"),
        message: "",
        autoClose: true,
        color: "red"
      });
      setIsUploading(false);
      console.error(error);
    }
  }, []);
  return {
    uploadLogoFile,
    isUploading
  };
};
const ImageUploadModal = (t0) => {
  const $ = compilerRuntimeExports.c(26);
  const {
    onClose,
    handleUpdateLogo,
    dimensions,
    allowedMimeType
  } = t0;
  const {
    classes
  } = useStyles$1();
  const {
    t
  } = useTranslation();
  const {
    uploadLogoFile,
    isUploading
  } = useImageUpload();
  let t1;
  if ($[0] !== handleUpdateLogo || $[1] !== onClose || $[2] !== uploadLogoFile) {
    t1 = async (image) => {
      const fileResponse = await uploadLogoFile(image);
      if (fileResponse) {
        handleUpdateLogo(fileResponse);
        onClose();
      }
    };
    $[0] = handleUpdateLogo;
    $[1] = onClose;
    $[2] = uploadLogoFile;
    $[3] = t1;
  } else {
    t1 = $[3];
  }
  const handleUpload = t1;
  const t2 = classes.root;
  const t3 = classes.container;
  let t4;
  if ($[4] !== allowedMimeType || $[5] !== dimensions || $[6] !== handleUpload) {
    t4 = /* @__PURE__ */ jsxRuntimeExports.jsx(ImageUploader, { setLogoFile: handleUpload, maxDimensions: dimensions, allowedMimeType });
    $[4] = allowedMimeType;
    $[5] = dimensions;
    $[6] = handleUpload;
    $[7] = t4;
  } else {
    t4 = $[7];
  }
  const t5 = classes.control;
  let t6;
  if ($[8] !== dimensions || $[9] !== t) {
    t6 = t("commonSettings.logoConditions", {
      ...dimensions
    });
    $[8] = dimensions;
    $[9] = t;
    $[10] = t6;
  } else {
    t6 = $[10];
  }
  let t7;
  if ($[11] !== t6) {
    t7 = /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: "sm", children: t6 });
    $[11] = t6;
    $[12] = t7;
  } else {
    t7 = $[12];
  }
  let t8;
  if ($[13] !== classes.control || $[14] !== t7) {
    t8 = /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: t5, children: t7 });
    $[13] = classes.control;
    $[14] = t7;
    $[15] = t8;
  } else {
    t8 = $[15];
  }
  let t9;
  if ($[16] !== classes.container || $[17] !== t4 || $[18] !== t8) {
    t9 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: t3, children: [
      t4,
      t8
    ] });
    $[16] = classes.container;
    $[17] = t4;
    $[18] = t8;
    $[19] = t9;
  } else {
    t9 = $[19];
  }
  let t10;
  if ($[20] !== isUploading) {
    t10 = /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingOverlay, { visible: isUploading });
    $[20] = isUploading;
    $[21] = t10;
  } else {
    t10 = $[21];
  }
  let t11;
  if ($[22] !== classes.root || $[23] !== t10 || $[24] !== t9) {
    t11 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { className: t2, children: [
      t9,
      t10
    ] });
    $[22] = classes.root;
    $[23] = t10;
    $[24] = t9;
    $[25] = t11;
  } else {
    t11 = $[25];
  }
  return t11;
};
const LogoField = (t0) => {
  const $ = compilerRuntimeExports.c(40);
  const {
    dimensions,
    handleUpdateLogo,
    logoUrl,
    allowedMimeType
  } = t0;
  let t1;
  if ($[0] !== dimensions) {
    t1 = {
      dimensions
    };
    $[0] = dimensions;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  const {
    classes
  } = useStyles$2(t1);
  const {
    t
  } = useTranslation();
  const [openUploadLogo, setOpenUploadLogo] = reactExports.useState(false);
  let t2;
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = () => {
      setOpenUploadLogo(false);
    };
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  const handleCloseModalEditAvatar = t2;
  const t3 = classes.description;
  let t4;
  if ($[3] !== t) {
    t4 = t("commonSettings.mainLogo");
    $[3] = t;
    $[4] = t4;
  } else {
    t4 = $[4];
  }
  let t5;
  if ($[5] !== classes.description || $[6] !== t4) {
    t5 = /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: t3, children: t4 });
    $[5] = classes.description;
    $[6] = t4;
    $[7] = t5;
  } else {
    t5 = $[7];
  }
  const t6 = classes.imageContainer;
  let t7;
  if ($[8] !== dimensions.height || $[9] !== dimensions.width) {
    t7 = {
      width: "auto",
      height: dimensions.height,
      maxWidth: dimensions.width,
      aspectRatio: "auto"
    };
    $[8] = dimensions.height;
    $[9] = dimensions.width;
    $[10] = t7;
  } else {
    t7 = $[10];
  }
  let t8;
  if ($[11] !== logoUrl || $[12] !== t7) {
    t8 = /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: logoUrl, style: t7, alt: "Main page logo", loading: "lazy" });
    $[11] = logoUrl;
    $[12] = t7;
    $[13] = t8;
  } else {
    t8 = $[13];
  }
  const t9 = classes.imageOverlay;
  let t10;
  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
    t10 = () => setOpenUploadLogo(true);
    $[14] = t10;
  } else {
    t10 = $[14];
  }
  let t11;
  if ($[15] !== t) {
    t11 = t("avatar.uploadPhoto");
    $[15] = t;
    $[16] = t11;
  } else {
    t11 = $[16];
  }
  let t12;
  if ($[17] !== t11) {
    t12 = /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { color: "white", children: t11 });
    $[17] = t11;
    $[18] = t12;
  } else {
    t12 = $[18];
  }
  let t13;
  if ($[19] !== classes.imageOverlay || $[20] !== t12) {
    t13 = /* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { className: t9, onClick: t10, children: t12 });
    $[19] = classes.imageOverlay;
    $[20] = t12;
    $[21] = t13;
  } else {
    t13 = $[21];
  }
  let t14;
  if ($[22] !== classes.imageContainer || $[23] !== t13 || $[24] !== t8) {
    t14 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { className: t6, children: [
      t8,
      t13
    ] });
    $[22] = classes.imageContainer;
    $[23] = t13;
    $[24] = t8;
    $[25] = t14;
  } else {
    t14 = $[25];
  }
  let t15;
  if ($[26] !== t) {
    t15 = t("commonSettings.mainLogo");
    $[26] = t;
    $[27] = t15;
  } else {
    t15 = $[27];
  }
  let t16;
  if ($[28] !== allowedMimeType || $[29] !== dimensions || $[30] !== handleUpdateLogo) {
    t16 = /* @__PURE__ */ jsxRuntimeExports.jsx(ImageUploadModal, { onClose: handleCloseModalEditAvatar, handleUpdateLogo, dimensions, allowedMimeType });
    $[28] = allowedMimeType;
    $[29] = dimensions;
    $[30] = handleUpdateLogo;
    $[31] = t16;
  } else {
    t16 = $[31];
  }
  let t17;
  if ($[32] !== openUploadLogo || $[33] !== t15 || $[34] !== t16) {
    t17 = /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { size: "450px", opened: openUploadLogo, title: t15, onClose: handleCloseModalEditAvatar, children: t16 });
    $[32] = openUploadLogo;
    $[33] = t15;
    $[34] = t16;
    $[35] = t17;
  } else {
    t17 = $[35];
  }
  let t18;
  if ($[36] !== t14 || $[37] !== t17 || $[38] !== t5) {
    t18 = /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { mt: 32, children: [
      t5,
      t14,
      t17
    ] });
    $[36] = t14;
    $[37] = t17;
    $[38] = t5;
    $[39] = t18;
  } else {
    t18 = $[39];
  }
  return t18;
};
const LogoField$1 = r.memo(LogoField);
const CommonSection = ({
  CommonViewSettings
}) => {
  const {
    classes
  } = useStyles$3();
  const {
    t
  } = useTranslation();
  const updateSettings = useSaveCommonSettings();
  const form = useForm({
    initialValues: {
      CompanyName: "",
      MainLogoUrl: "",
      BrandColor: "",
      MainLogoId: null
    },
    validateInputOnChange: true,
    validate: (values) => getValidateErrors(validateSchemeBrandingCommon, values)
  });
  const errors = form.errors;
  const isDirtyForm = form.isDirty();
  const isDisabled = Object.keys(errors || {}).length !== 0 || !isDirtyForm;
  reactExports.useEffect(() => {
    if (CommonViewSettings) {
      const formData = {
        CompanyName: CommonViewSettings.Name,
        BrandColor: CommonViewSettings.BrandColor || "",
        MainLogoUrl: CommonViewSettings.MainLogoUrl || "",
        MainLogoId: CommonViewSettings.MainLogoId
      };
      form.setValues(formData);
      form.resetDirty(formData);
    }
  }, [CommonViewSettings]);
  const handleSubmit = async (values_0) => {
    try {
      await updateSettings(ICommonSettingsEnum.CommonViewSettings, {
        CommonViewSettings: {
          Name: values_0.CompanyName,
          BrandColor: values_0.BrandColor,
          MainLogoUrl: values_0.MainLogoUrl,
          MainLogoId: values_0.MainLogoId
        }
      });
    } catch (error) {
      console.error("Failed to update branding settings:", error);
    }
  };
  const handleUpdateLogo = reactExports.useCallback((data) => {
    form.setFieldValue("MainLogoUrl", `${(data == null ? void 0 : data.Url) ? data == null ? void 0 : data.Url : (data == null ? void 0 : data.Id) ? "https://cddisk.r7-office.ru/api/v1/files/stream?id=$" + (data == null ? void 0 : data.Id) : ""}`);
    form.setFieldValue("MainLogoId", data == null ? void 0 : data.Id);
  }, []);
  return /* @__PURE__ */ jsxRuntimeExports.jsx(CommonSectionTemplate, { title: t("common"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(SimpleGrid, { cols: {
    base: 1,
    sm: 2
  }, w: "100%", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: form.onSubmit(handleSubmit), children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(TextInput, { className: classes.textFieldInput, label: t("commonSettings.companyName"), withAsterisk: true, ...form.getInputProps(`CompanyName`) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(LogoField$1, { logoUrl: form.getInputProps("MainLogoUrl").value, handleUpdateLogo, dimensions: brandingSettings.common.logoDimensions, allowedMimeType: brandingSettings.common.allowedMimeType }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(ColorInput, { className: classes.textFieldInput, label: "Брендовый цвет", ...form.getInputProps(`BrandColor`) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { className: classes.sectionControls, w: "100%", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: isDisabled, className: classes.submitButton, size: "sm", radius: 8, type: "submit", mt: "md", children: t("save") }) })
  ] }) }) });
};
const BrandingPage = () => {
  const $ = compilerRuntimeExports.c(2);
  const {
    CommonViewSettings
  } = useAppSelector(_temp);
  let t0;
  if ($[0] !== CommonViewSettings) {
    t0 = /* @__PURE__ */ jsxRuntimeExports.jsx(CommonSection, { CommonViewSettings });
    $[0] = CommonViewSettings;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  return t0;
};
function _temp(state) {
  return state.commonSettings;
}
export {
  BrandingPage as default
};
//# sourceMappingURL=index-DeA4DjbJ.js.map
