From 083ff081e84c6c969a962978997a0a795ce2a720 Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Mon, 28 Jul 2025 12:55:43 +0300
Subject: [PATCH] =?UTF-8?q?AI=20=D0=BF=D0=B5=D1=80=D1=81=D0=BE=D0=BD=D0=B0?=
 =?UTF-8?q?=D0=BB=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20=D1=82=D0=B5=D0=BF?=
 =?UTF-8?q?=D0=B5=D1=80=D1=8C=20=D1=80=D0=B0=D1=81=D1=81=D0=BA=D0=B0=D0=B7?=
 =?UTF-8?q?=D1=8B=D0=B2=D0=B5=D1=82=20=D1=87=D1=82=D0=BE=20=D0=BD=D1=83?=
 =?UTF-8?q?=D0=B6=D0=BD=D0=BE=20=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D1=82=D1=8C?=
 =?UTF-8?q?=20=D1=87=D1=82=D0=BE=D0=B1=D1=8B=20=D1=80=D0=B0=D0=B7=D0=B4?=
 =?UTF-8?q?=D0=B8=D1=81=D0=B0=D0=B1=D0=BB=D0=B8=D1=82=D1=8C=20=D0=BA=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=BF=D0=BA=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CreateButtonWithTooltip.tsx               | 112 ++++++++++++++++++
 .../GenderAndAgeSelector.tsx                  |  24 ++--
 2 files changed, 119 insertions(+), 17 deletions(-)
 create mode 100644 src/pages/PersonalizationAI/CreateButtonWithTooltip.tsx

diff --git a/src/pages/PersonalizationAI/CreateButtonWithTooltip.tsx b/src/pages/PersonalizationAI/CreateButtonWithTooltip.tsx
new file mode 100644
index 00000000..c92c20d1
--- /dev/null
+++ b/src/pages/PersonalizationAI/CreateButtonWithTooltip.tsx
@@ -0,0 +1,112 @@
+import { Button, ClickAwayListener, Tooltip, useTheme } from "@mui/material";
+import { useState } from "react";
+
+interface CreateButtonWithTooltipProps {
+  gender: string;
+  age: string;
+  ageError: boolean;
+  onClick: () => void;
+}
+
+export default function CreateButtonWithTooltip({ 
+  gender, 
+  age, 
+  ageError, 
+  onClick 
+}: CreateButtonWithTooltipProps) {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+
+  const handleTooltipClose = () => {
+    setOpen(false);
+  };
+
+  const handleTooltipOpen = () => {
+    setOpen(true);
+  };
+
+  // Определяем причины неактивности кнопки
+  const getDisabledReasons = () => {
+    const reasons: string[] = [];
+    
+    if (!gender) {
+      reasons.push("выберите пол");
+    }
+    
+    if (!age) {
+      reasons.push("заполните поле возраста");
+    }
+    
+    if (ageError) {
+      reasons.push("исправьте ошибку в поле возраста");
+    }
+    
+    return reasons;
+  };
+
+  const disabledReasons = getDisabledReasons();
+  const isDisabled = !gender || !age || ageError;
+  const tooltipText = isDisabled 
+    ? disabledReasons.length === 2 
+      ? disabledReasons.join(' и ')
+      : disabledReasons.join('\n')
+    : '';
+
+  return (
+    <ClickAwayListener onClickAway={handleTooltipClose}>
+      <div style={{ position: 'relative' }}>
+        {isDisabled && (
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: 1,
+              cursor: 'help'
+            }}
+            onMouseEnter={handleTooltipOpen}
+            onMouseLeave={handleTooltipClose}
+            onClick={handleTooltipOpen}
+          />
+        )}
+        <Tooltip
+          PopperProps={{
+            disablePortal: true,
+            sx: {
+              "& .MuiTooltip-tooltip": {
+                fontSize: "14px",
+                padding: "12px",
+                maxWidth: "400px",
+                whiteSpace: "pre-line"
+              }
+            }
+          }}
+          placement="top"
+          onClose={handleTooltipClose}
+          open={open}
+          title={tooltipText}
+        >
+          <Button
+            onClick={onClick}
+            variant="contained"
+            disabled={isDisabled}
+            sx={{
+              bgcolor: theme.palette.brightPurple.main,
+              borderRadius: "8px",
+              width: "130px",
+              height: "48px",
+              boxShadow: "none",
+              textTransform: "none",
+              fontSize: "18px",
+              '&:hover': { bgcolor: theme.palette.brightPurple.main },
+            }}
+          >
+            Ок
+          </Button>
+        </Tooltip>
+      </div>
+    </ClickAwayListener>
+  );
+} 
\ No newline at end of file
diff --git a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
index 720022f3..765afb3d 100644
--- a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
+++ b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
@@ -1,7 +1,8 @@
-import { Box, FormControl, FormLabel, Checkbox, FormControlLabel, useTheme, Button, useMediaQuery } from "@mui/material";
+import { Box, FormControl, FormLabel, Checkbox, FormControlLabel, useTheme, useMediaQuery } from "@mui/material";
 import CheckboxIcon from "@icons/Checkbox";
 import AgeInputWithSelect from "./AgeInputWithSelect";
 import { useState, useEffect } from "react";
+import CreateButtonWithTooltip from "./CreateButtonWithTooltip";
 
 interface GenderAndAgeSelectorProps {
   gender: string;
@@ -190,23 +191,12 @@ export default function GenderAndAgeSelector({
         </FormControl>
       </Box>
 
-      <Button
+      <CreateButtonWithTooltip
+        gender={gender}
+        age={age}
+        ageError={ageError}
         onClick={onStartCreate}
-        variant="contained"
-        disabled={!gender || !age || ageError}
-        sx={{
-          bgcolor: theme.palette.brightPurple.main,
-          borderRadius: "8px",
-          width: "130px",
-          height: "48px",
-          boxShadow: "none",
-          textTransform: "none",
-          fontSize: "18px",
-          '&:hover': { bgcolor: theme.palette.brightPurple.main },
-        }}
-      >
-        Ок
-      </Button>
+      />
     </Box>
   );
 } 
\ No newline at end of file