frontPanel/src/pages/Result/DescriptionForm/PointsQuestions.tsx

import {
  Box,
  Button,
  FormControl,
  MenuItem,
  Modal,
  Select,
  SelectChangeEvent,
  TextField,
  Typography,
  useTheme,
} from "@mui/material";
import * as React from "react";
import ArrowDown from "@icons/ArrowDownIcon";
import { useState } from "react";

export default function PointsQuestions() {
  const theme = useTheme();
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const [display, setDisplay] = React.useState("1");
  const handleChange = (event: SelectChangeEvent) => {
    setDisplay(event.target.value);
  };

  return (
    <>
      <Button onClick={handleOpen}>открыть</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box
          sx={{
            position: "absolute" as "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            maxWidth: "620px",
            width: "100%",
            bgcolor: "background.paper",
            borderRadius: "12px",
            boxShadow: 24,
            p: 0,
          }}
        >
          <Box
            sx={{
              padding: "20px",
              display: "flex",
              flexDirection: "column",
              gap: "30px",
            }}
          >
            <Box
              sx={{
                gap: "20px",
                alignItems: "center",
              }}
            >
              <Typography sx={{ mb: "14px" }}>Показать, если количество баллов</Typography>
              <Box sx={{ display: "flex" }}>
                <FormControl
                  fullWidth
                  size="small"
                  sx={{
                    width: "282px",
                    maxWidth: "140px",
                    height: "48px",
                  }}
                >
                  <Select
                    id="display-select"
                    variant="outlined"
                    value={display}
                    displayEmpty
                    onChange={handleChange}
                    sx={{
                      width: "282px",
                      height: "48px",
                      borderRadius: "8px",
                      "& .MuiOutlinedInput-notchedOutline": {
                        border: `1px solid ${theme.palette.brightPurple.main} !important`,
                      },
                    }}
                    MenuProps={{
                      PaperProps: {
                        sx: {
                          mt: "8px",
                          p: "4px",
                          borderRadius: "8px",
                          border: "1px solid #EEE4FC",
                          boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
                        },
                      },
                      MenuListProps: {
                        sx: {
                          py: 0,
                          display: "flex",
                          flexDirection: "column",
                          gap: "8px",
                          "& .Mui-selected": {
                            backgroundColor: theme.palette.background.default,
                            color: theme.palette.brightPurple.main,
                          },
                        },
                      },
                    }}
                    inputProps={{
                      sx: {
                        color: theme.palette.brightPurple.main,
                        display: "flex",
                        alignItems: "center",
                        px: "9px",
                        gap: "20px",
                      },
                    }}
                    IconComponent={(props) => <ArrowDown {...props} />}
                  >
                    <MenuItem
                      value={1}
                      sx={{
                        display: "flex",
                        alignItems: "center",
                        gap: "20px",
                        p: "4px",
                        borderRadius: "5px",
                        color: theme.palette.grey2.main,
                      }}
                    >
                      Больше
                    </MenuItem>
                    <MenuItem
                      value={2}
                      sx={{
                        display: "flex",
                        alignItems: "center",
                        gap: "20px",
                        p: "4px",
                        borderRadius: "5px",
                        color: theme.palette.grey2.main,
                      }}
                    >
                      Меньше
                    </MenuItem>
                    <MenuItem
                      value={3}
                      sx={{
                        display: "flex",
                        alignItems: "center",
                        gap: "20px",
                        p: "4px",
                        borderRadius: "5px",
                        color: theme.palette.grey2.main,
                      }}
                    >
                      Между
                    </MenuItem>
                    <MenuItem
                      value={4}
                      sx={{
                        display: "flex",
                        alignItems: "center",
                        gap: "20px",
                        p: "4px",
                        borderRadius: "5px",
                        color: theme.palette.grey2.main,
                      }}
                    >
                      Ровно
                    </MenuItem>
                  </Select>
                </FormControl>
                <TextField
                  placeholder="100"
                  fullWidth
                  sx={{
                    ml: "160px",
                    "& .MuiInputBase-root": {
                      backgroundColor: "#F2F3F7",
                      width: "282px",
                      height: "48px",
                      borderRadius: "10px",
                    },
                  }}
                  inputProps={{
                    sx: {
                      borderRadius: "10px",
                      fontSize: "18px",
                      lineHeight: "21px",
                      py: 0,
                    },
                  }}
                />
              </Box>
            </Box>
            <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
              <Button
                onClick={() => handleClose()}
                variant="contained">
                Готово
              </Button>
            </Box>
          </Box>
        </Box>
      </Modal>
    </>
  );
}