adminFront/src/pages/Setting/CardPrivilegie.tsx

import { KeyboardEvent, useRef, useState } from "react";
import { enqueueSnackbar } from "notistack";
import { Box, IconButton, TextField, Tooltip, Typography } from "@mui/material";
import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined";
import { PrivilegeWithAmount } from "@frontend/kitui";
import { putPrivilegie } from "@root/api/privilegies";

interface CardPrivilegie {
  privilege: PrivilegeWithAmount;
}

export const СardPrivilegie = ({ privilege }: CardPrivilegie) => {
  const [inputOpen, setInputOpen] = useState<boolean>(false);
  const [inputValue, setInputValue] = useState<string>("");
  const priceRef = useRef<HTMLDivElement>(null);

  const translationType = {
    count: "за единицу",
    day: "за день",
    mb: "за  МБ",
  };

  const putPrivilegies = async () => {
    const [_, putedPrivilegieError] = await putPrivilegie({
      name: privilege.name,
      privilegeId: privilege.privilegeId,
      serviceKey: privilege.serviceKey,
      description: privilege.description,
      amount: 1,
      type: privilege.type,
      value: privilege.value,
      price: 100 * Number(inputValue),
    });

    if (putedPrivilegieError) {
      return enqueueSnackbar(putedPrivilegieError);
    }

    if (!priceRef.current) {
      return;
    }

    priceRef.current.innerText = "price: " + inputValue;
    setInputValue("");
    setInputOpen(false);
  };

  const onTextfieldKeyDown = (event: KeyboardEvent) => {
    if (event.key === "Escape") {
      return setInputOpen(false);
    }
    if (event.key === "Enter" && inputValue !== "") {
      putPrivilegies();
      setInputOpen(false);
    }
  };

  return (
    <Box
      key={privilege.type}
      sx={{
        px: "20px",

        display: "flex",
        alignItems: "center",
        border: "1px solid gray",
      }}
    >
      <Box sx={{ display: "flex", borderRight: "1px solid gray" }}>
        <Box sx={{ width: "200px", py: "25px" }}>
          <Typography
            variant="h6"
            sx={{
              color: "#fe9903",
              overflowWrap: "break-word",
              overflow: "hidden",
            }}
          >
            {privilege.name}
          </Typography>
          <Tooltip
            sx={{
              span: {
                fontSize: "1rem",
              },
            }}
            placement="top"
            title={<Typography sx={{ fontSize: "16px" }}>{privilege.description}</Typography>}
          >
            <IconButton disableRipple>
              <svg width="40" height="40" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M9.25 9.25H10V14.5H10.75"
                  stroke="#7E2AEA"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M9.8125 7C10.4338 7 10.9375 6.49632 10.9375 5.875C10.9375 5.25368 10.4338 4.75 9.8125 4.75C9.19118 4.75 8.6875 5.25368 8.6875 5.875C8.6875 6.49632 9.19118 7 9.8125 7Z"
                  fill="#7E2AEA"
                />
              </svg>
            </IconButton>
          </Tooltip>
          <IconButton onClick={() => setInputOpen(!inputOpen)}>
            <ModeEditOutlineOutlinedIcon sx={{ color: "gray" }} />
          </IconButton>
        </Box>
      </Box>
      <Box sx={{ width: "600px", display: "flex", justifyContent: "space-around" }}>
        {inputOpen ? (
          <TextField
            type="number"
            onKeyDown={onTextfieldKeyDown}
            placeholder="введите число"
            fullWidth
            onChange={(event) => setInputValue(event.target.value)}
            sx={{
              alignItems: "center",
              width: "400px",
              "& .MuiInputBase-root": {
                backgroundColor: "#F2F3F7",
                height: "48px",
              },
            }}
            inputProps={{
              sx: {
                borderRadius: "10px",
                fontSize: "18px",
                lineHeight: "21px",
                py: 0,
              },
            }}
          />
        ) : (
          <div ref={priceRef} style={{ color: "white", marginRight: "5px" }}>
            price: {privilege.price / 100}
          </div>
        )}
        <Typography sx={{ color: "white" }}>{translationType[privilege.type]}</Typography>
      </Box>
    </Box>
  );
};