adminFront/src/pages/dashboard/Content/DiscountManagement/CreateDiscount.tsx

import {
  Box,
  Typography,
  Button,
  useTheme,
  FormControl,
  FormLabel,
  RadioGroup,
  FormControlLabel,
  Radio,
  InputLabel,
} from "@mui/material";
import MenuItem from "@mui/material/MenuItem";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import { useState } from "react";
import { SERVICE_LIST, ServiceType } from "@root/model/tariff";
import { CustomTextField } from "@root/kitUI/CustomTextField";
import {
  resetPrivilegeArray,
  usePrivilegeStore,
} from "@root/stores/privilegesStore";
import { addDiscount } from "@root/stores/discounts";
import { enqueueSnackbar } from "notistack";
import { DiscountType, discountTypes } from "@root/model/discount";
import { createDiscount } from "@root/api/discounts";
import usePrivileges from "@root/utils/hooks/usePrivileges";

export default function CreateDiscount() {
  const theme = useTheme();
  const privileges = usePrivilegeStore((state) => state.privileges);
  const [serviceType, setServiceType] = useState<ServiceType>("templategen");
  const [discountType, setDiscountType] =
    useState<DiscountType>("purchasesAmount");
  const [discountNameField, setDiscountNameField] = useState<string>("");
  const [discountDescriptionField, setDiscountDescriptionField] =
    useState<string>("");
  const [privilegeIdField, setPrivilegeIdField] = useState<string | "">("");
  const [discountFactorField, setDiscountFactorField] = useState<string>("0");
  const [purchasesAmountField, setPurchasesAmountField] = useState<string>("0");
  const [cartPurchasesAmountField, setCartPurchasesAmountField] =
    useState<string>("0");
  const [discountMinValueField, setDiscountMinValueField] =
    useState<string>("0");

  usePrivileges({ onNewPrivileges: resetPrivilegeArray });

  const handleDiscountTypeChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    setDiscountType(event.target.value as DiscountType);
  };

  const handleServiceTypeChange = (event: SelectChangeEvent) => {
    setServiceType(event.target.value as ServiceType);
  };

  async function handleCreateDiscount() {
    const purchasesAmount = parseFloat(purchasesAmountField.replace(",", "."));
    const discountFactor =
      (100 - parseFloat(discountFactorField.replace(",", "."))) / 100;
    const cartPurchasesAmount = parseFloat(
      cartPurchasesAmountField.replace(",", ".")
    );
    const discountMinValue = parseFloat(
      discountMinValueField.replace(",", ".")
    );

    if (!isFinite(purchasesAmount))
      return enqueueSnackbar("Поле purchasesAmount не число");
    if (!isFinite(discountFactor))
      return enqueueSnackbar("Поле discountFactor не число");
    if (!isFinite(cartPurchasesAmount))
      return enqueueSnackbar("Поле cartPurchasesAmount не число");
    if (!isFinite(discountMinValue))
      return enqueueSnackbar("Поле discountMinValue не число");
    if (discountType === "privilege" && !privilegeIdField)
      return enqueueSnackbar("Привилегия не выбрана");
    if (!discountNameField) return enqueueSnackbar('Поле "Имя" пустое');
    if (!discountDescriptionField)
      return enqueueSnackbar('Поле "Описание" пустое');
    if (discountFactor < 0)
      return enqueueSnackbar("Процент скидки не может быть больше 100");

    const [createdDiscountResponse, createdDiscountError] =
      await createDiscount({
        cartPurchasesAmount,
        discountFactor,
        discountMinValue,
        purchasesAmount,
        discountDescription: discountDescriptionField,
        discountName: discountNameField,
        startDate: new Date().toISOString(),
        endDate: new Date(Date.now() + 1000 * 3600 * 24 * 30).toISOString(),
        serviceType,
        discountType,
        privilegeId: privilegeIdField,
      });

    if (createdDiscountError) {
      console.log("Error creating discount", createdDiscountError);

      return enqueueSnackbar(createdDiscountError);
    }

    if (createdDiscountResponse) {
      addDiscount(createdDiscountResponse);
    }
  }

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "left",
        alignItems: "left",
        marginTop: "15px",
        width: "100%",
        padding: "16px",
        maxWidth: "600px",
        gap: "1em",
      }}
    >
      <CustomTextField
        id="discount-name"
        label="Название"
        value={discountNameField}
        onChange={(e) => setDiscountNameField(e.target.value)}
      />
      <CustomTextField
        id="discount-desc"
        label="Описание"
        value={discountDescriptionField}
        onChange={(e) => setDiscountDescriptionField(e.target.value)}
      />
      <Typography
        variant="h4"
        sx={{
          width: "90%",
          fontWeight: "normal",
          color: theme.palette.grayDisabled.main,
          paddingLeft: "10px",
        }}
      >
        Условия:
      </Typography>
      <CustomTextField
        id="discount-factor"
        label="Процент скидки"
        value={discountFactorField}
        type="number"
        onChange={(e) => setDiscountFactorField(e.target.value)}
      />
      <FormControl>
        <FormLabel
          id="discount-type"
          sx={{
            color: "white",
            "&.Mui-focused": {
              color: "white",
            },
          }}
        >
          Тип скидки
        </FormLabel>
        <RadioGroup
          row
          aria-labelledby="discount-type"
          name="discount-type"
          value={discountType}
          onChange={handleDiscountTypeChange}
        >
          {Object.keys(discountTypes).map((type) => (
            <FormControlLabel
              key={type}
              value={type}
              control={<Radio color="secondary" />}
              label={discountTypes[type as DiscountType]}
            />
          ))}
        </RadioGroup>
      </FormControl>
      {discountType === "purchasesAmount" && (
        <CustomTextField
          id="discount-purchases"
          label="Внесено больше"
          type="number"
          sx={{
            marginTop: "15px",
          }}
          value={purchasesAmountField}
          onChange={(e) => setPurchasesAmountField(e.target.value)}
        />
      )}
      {discountType === "cartPurchasesAmount" && (
        <CustomTextField
          id="discount-cart-purchases"
          label="Объем в корзине"
          type="number"
          sx={{
            marginTop: "15px",
          }}
          value={cartPurchasesAmountField}
          onChange={(e) => setCartPurchasesAmountField(e.target.value)}
        />
      )}
      {discountType === "service" && (
        <>
          <Select
            labelId="discount-service-label"
            id="discount-service"
            value={serviceType}
            onChange={handleServiceTypeChange}
            sx={{
              color: theme.palette.secondary.main,
              borderColor: theme.palette.secondary.main,
              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                borderColor: theme.palette.secondary.main,
              },
              ".MuiSvgIcon-root ": {
                fill: theme.palette.secondary.main,
              },
            }}
          >
            {SERVICE_LIST.map((service) => (
              <MenuItem key={service.serviceKey} value={service.serviceKey}>
                {service.displayName}
              </MenuItem>
            ))}
          </Select>
          <CustomTextField
            id="discount-min-value"
            label="Минимальное значение"
            type="number"
            sx={{
              marginTop: "15px",
            }}
            value={discountMinValueField}
            onChange={(e) => setDiscountMinValueField(e.target.value)}
          />
        </>
      )}
      {discountType === "privilege" && (
        <>
          <FormControl
            fullWidth
            sx={{
              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,
                },
                ".MuiSvgIcon-root ": {
                  fill: theme.palette.secondary.main,
                },
              }}
              inputProps={{ sx: { pt: "12px" } }}
            >
              {privileges.map((privilege, index) => (
                <MenuItem key={index} value={privilege.privilegeId}>
                  {privilege.description}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
          <CustomTextField
            id="discount-min-value"
            label="Минимальное значение"
            type="number"
            sx={{
              marginTop: "15px",
            }}
            value={discountMinValueField}
            onChange={(e) => setDiscountMinValueField(e.target.value)}
          />
        </>
      )}
      <Box
        sx={{
          width: "90%",
          marginTop: "55px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Button
          variant="contained"
          sx={{
            backgroundColor: theme.palette.menu.main,
            height: "52px",
            fontWeight: "normal",
            fontSize: "17px",
            "&:hover": {
              backgroundColor: theme.palette.grayMedium.main,
            },
          }}
          onClick={handleCreateDiscount}
        >
          Cоздать
        </Button>
      </Box>
    </Box>
  );
}