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

import { Typography, Container, Button, Select, MenuItem, FormControl, InputLabel, TextField, useTheme, Box } from "@mui/material";
import { Tariff } from "@root/model/tariff";
import { usePrivilegeStore } from "@root/stores/privileges";
import { useTariffStore } from "@root/stores/tariffs";
import { nanoid } from "nanoid";
import { ChangeEvent, HTMLInputTypeAttribute, useState } from "react";


export default function CreateTariff() {
    const theme = useTheme();
    const privileges = usePrivilegeStore(store => store.privileges);
    const addTariffs = useTariffStore(store => store.addTariffs);
    const [nameField, setNameField] = useState<string>("");
    const [amountField, setAmountField] = useState<string>("");
    const [customPriceField, setCustomPriceField] = useState<string>("");
    const [privilegeIdField, setPrivilegeIdField] = useState<string | "">("");

    const privilege = privileges.find(p => p.privilegeId === privilegeIdField);

    function handleCreateTariffClick() {
        const amount = Number(amountField);
        const customPricePerUnit = Number(customPriceField);

        if (isNaN(amount) || !privilege) return;

        const newTariff: Tariff = {
            id: nanoid(5),
            name: nameField,
            amount,
            privilege,
            customPricePerUnit: customPricePerUnit ? customPricePerUnit : undefined,
        };

        addTariffs([newTariff]);
    }

    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, index) => (
                        <MenuItem key={index} value={privilege.privilegeId}>
                            {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.pricePerUnit}</span></Typography>
                </Box>
            }
            <CustomTextField
                id="tariff-name"
                label="Название тарифа"
                value={nameField}
                setValue={e => setNameField(e.target.value)}
            />
            <CustomTextField
                id="tariff-amount"
                label="Кол-во единиц привилегии"
                value={amountField}
                setValue={e => setAmountField(e.target.value)}
                type="number"
            />
            <CustomTextField
                id="tariff-custom-price"
                label="Кастомная цена за единицу (не обязательно)"
                value={customPriceField}
                setValue={e => setCustomPriceField(e.target.value)}
                type="number"
            />
            <Button
                onClick={handleCreateTariffClick}
                disabled={privilegeIdField === "" || amountField === "" || nameField === ""}
            >Создать</Button>
        </Container>
    );
}

function CustomTextField({ id, label, value, type, setValue }: {
    id: string;
    label: string;
    value: number | string | null;
    type?: HTMLInputTypeAttribute;
    setValue: (e: ChangeEvent<HTMLInputElement>) => void;
}) {
    const theme = useTheme();

    return (
        <TextField
            fullWidth
            id={id}
            label={label}
            variant="filled"
            color="secondary"
            type={type}
            InputProps={{
                style: {
                    backgroundColor: theme.palette.content.main,
                    color: theme.palette.secondary.main,
                }
            }}
            InputLabelProps={{
                style: {
                    color: theme.palette.secondary.main
                }
            }}
            value={value ? value : ""}
            onChange={setValue}
        />
    );
}