adminFront/src/pages/dashboard/Content/Tariffs/CreateTariff.tsx

import { useState } from "react";
import {
  Typography,
  Container,
  Button,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
  useTheme,
  Box,
} from "@mui/material";
import { enqueueSnackbar } from "notistack";

import { CustomTextField } from "@root/kitUI/CustomTextField";
import { requestTariffs } from "@root/services/tariffs.service";
import { createTariff } from "@root/api/tariffs";

import {
  findPrivilegeById,
  usePrivilegeStore,
} from "@root/stores/privilegesStore";

export default function CreateTariff() {
  const theme = useTheme();

  const privileges = usePrivilegeStore((store) => store.privileges);

  const [nameField, setNameField] = useState<string>("");
  const [amountField, setAmountField] = useState<string>("");
  const [customPriceField, setCustomPriceField] = useState<string>("");
  const [privilegeIdField, setPrivilegeIdField] = useState<string>("");

  const privilege = findPrivilegeById(privilegeIdField);

  const checkFulledFields = () => {
    if (nameField.length === 0) {
      enqueueSnackbar("Пустое название тарифа");
      return false;
    }
    if (amountField.length === 0) {
      enqueueSnackbar("Пустое кол-во едениц привилегии");
      return false;
    }
    if (privilegeIdField.length === 0) {
      enqueueSnackbar("Не выбрана привилегия");
      return false;
    }
    if (!privilege) {
      enqueueSnackbar("Привилегия с таким id не найдена");
      return false;
    }
    return true;
  };

  const createTariffBackend = async () => {
    if (checkFulledFields() && privilege !== null) {
      const [_, createdTariffError] = await createTariff({
        name: nameField,
        price: Number(customPriceField) * 100,
        isCustom: false,
        privileges: [
          {
            name: privilege.name,
            privilegeId: privilege.privilegeId ?? "",
            serviceKey: privilege.serviceKey,
            description: privilege.description,
            type: privilege.type,
            value: privilege.value ?? "",
            price: privilege.price,
            amount: Number(amountField),
          },
        ],
      });

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

      requestTariffs();
    }
  };
  // const createTariffFrontend = () => {
  //   if (checkFulledFields() && privilege !== null) {
  //     updateTariffStore({
  //       id: nanoid(5),
  //       name: nameField,
  //       amount: Number(amountField),
  //       isFront: true,
  //       privilegeId: privilege.privilegeId,
  //       customPricePerUnit: customPriceField.length !== 0 ? Number(customPriceField)*100: undefined,
  //     })
  //   }
  // }

  return (
    <Container
      sx={{
        p: "20px",
        border: "1px solid rgba(224, 224, 224, 1)",
        borderRadius: "4px",
        display: "flex",
        flexDirection: "column",
        gap: "12px",
      }}
    >
      <Typography variant="h6" sx={{ textAlign: "center", mb: "16px" }}>
        Создание тарифа
      </Typography>
      <FormControl
        fullWidth
        sx={{
          height: "52px",
          color: theme.palette.secondary.main,
          "& .MuiInputLabel-outlined": {
            color: theme.palette.secondary.main,
          },
          "& .MuiInputLabel-outlined.MuiInputLabel-shrink": {
            color: theme.palette.secondary.main,
          },
        }}
      >
        <InputLabel
          id="privilege-select-label"
          sx={{
            color: theme.palette.secondary.main,
            fontSize: "16px",
            lineHeight: "19px",
          }}
        >
          Привилегия
        </InputLabel>
        <Select
          labelId="privilege-select-label"
          id="privilege-select"
          value={privilegeIdField}
          label="Привилегия"
          onChange={(e) => setPrivilegeIdField(e.target.value)}
          sx={{
            color: theme.palette.secondary.main,
            borderColor: theme.palette.secondary.main,
            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
              borderColor: theme.palette.secondary.main,
              border: "1px solid",
            },
            ".MuiSvgIcon-root ": {
              fill: theme.palette.secondary.main,
            },
          }}
          inputProps={{ sx: { pt: "12px" } }}
        >
          {privileges.map((privilege) => (
            <MenuItem
              data-cy={`select-option-${privilege.description}`}
              key={privilege.description}
              value={privilege._id}
            >
              {privilege.description}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
      {privilege && (
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
          }}
        >
          <Typography>
            Имя: <span>{privilege.name}</span>
          </Typography>
          <Typography>
            Сервис: <span>{privilege.serviceKey}</span>
          </Typography>
          <Typography>
            Единица: <span>{privilege.type}</span>
          </Typography>
          <Typography>
            Стандартная цена за единицу: <span>{privilege.price}</span>
          </Typography>
        </Box>
      )}
      <CustomTextField
        id="tariff-name"
        label="Название тарифа"
        value={nameField}
        onChange={(e) => setNameField(e.target.value)}
      />
      <CustomTextField
        id="tariff-amount"
        label="Кол-во единиц привилегии"
        value={amountField}
        onChange={(e) => setAmountField(e.target.value)}
        type="number"
      />
      <CustomTextField
        id="tariff-custom-price"
        label="Кастомная цена (не обязательно)"
        value={customPriceField}
        onChange={(e) => setCustomPriceField(e.target.value)}
        type="number"
      />
      <Button
        className="btn_createTariffBackend"
        type="button"
        onClick={() => {
          createTariffBackend();
        }}
      >
        Создать
      </Button>
    </Container>
  );
}