Untitled

import {
    Button,
    Typography,
    Paper,
    InputAdornment,
    TextField,
    Box,
    MenuItem,
    Select,
    FormControl,
    InputLabel,
    Chip,
    Grid,
} from "@mui/material";
import {Link} from "react-router-dom";
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import {useState, FormEvent} from "react";
import {addOffer} from "../../services/offer.service";
import {IOffer} from "../../typescript/interfaces";

export const CreateOfferForm = () => {
    //State
    const [offerDetails, setOfferDetails] = useState<IOffer>({
        firstName: "",
        lastName: "",
        shortDescription: "",
        longDescription: "",
        rateDescription: "",
        backgroundDescription: "",
        price: 0,
        options: [],
    });

    const [optionValues, setOptionValues] = useState({title: "", value: ""});

    const handleSubmit = (e: FormEvent) => {
        e.preventDefault();

        addOffer(offerDetails);
    };

    const addNewProperity = (index: any, value: string) => {
        console.log(`index: ${index} a value to ${value}`);
        offerDetails.options![index].properities.push(value);

        setOfferDetails({...offerDetails});
    };

    const handleAddOption = () => {
        const newOptions = offerDetails.options;
        newOptions?.push({title: "", properities: []});

        setOfferDetails({...offerDetails, options: newOptions});
    };

    const handleSetTitle = (index: number) => {
        offerDetails.options![index].title = optionValues.title;

        setOfferDetails({...offerDetails});
    };

    const deleteChip = (index: number, properity: string) => {
        const findIndex =
            offerDetails.options![index].properities.indexOf(properity);
        if (findIndex !== -1) {
            offerDetails.options![index].properities.splice(findIndex, 1);
        }
        setOfferDetails({...offerDetails});
    };

    return (
        <Box>
            <Button onClick={handleAddOption}>Dodaj sekcję</Button>

            {offerDetails.options?.map((option, index) => (
                <Paper sx={{margin: "30px"}} key={index}>
                    <TextField
                        disabled={!!option.title}
                        value={option.title ? null : optionValues.title}
                        onChange={(e) =>
                            // setOptionValues({...optionValues, title: e.target.value})
                            setOfferDetails({...offerDetails, options[index].title: e.target.value  })
                        }
                    />
                    <Button onClick={() => handleSetTitle(index)}>
                        Dodaj tytuł sekcji
                    </Button>
                    <TextField
                        value={optionValues.value}
                        onChange={(e) =>
                            setOptionValues({...optionValues, value: e.target.value})
                        }
                    />
                    <Button onClick={() => addNewProperity(index, optionValues.value)}>
                        Dodaj element sekcji
                    </Button>
                    <Paper>
                        <Typography variant="h5">{option.title}</Typography>

                        <Grid container sx={{display: "flex"}}>
                            {option.properities.map((properity: string, chipIndex: number) => (
                                <Grid item key={chipIndex}>
                                    <Chip
                                        label={properity}
                                        onDelete={() => deleteChip(index, properity)}
                                        sx={{margin: "10px"}}
                                    />
                                </Grid>
                            ))}
                        </Grid>
                    </Paper>
                </Paper>
            ))}

            <form
                style={{
                    display: "flex",
                    flexDirection: "column",
                }}
                onSubmit={handleSubmit}
            >
                <Typography variant="h2">Create your offer</Typography>
                <TextField
                    margin="normal"
                    id="filled-basic"
                    label="Name"
                    variant="filled"
                    value={offerDetails.firstName}
                    onChange={(e) =>
                        setOfferDetails({...offerDetails, firstName: e.target.value})
                    }
                    autoFocus
                    required
                />
                <TextField
                    margin="normal"
                    id="filled-basic"
                    label="Surname"
                    variant="filled"
                    value={offerDetails.lastName}
                    onChange={(e) =>
                        setOfferDetails({...offerDetails, lastName: e.target.value})
                    }
                    required
                />
                <TextField
                    margin="normal"
                    id="filled-multiline-flexible"
                    label="Shorthand description"
                    rows={3}
                    inputProps={{maxLength: 150}}
                    variant="filled"
                    value={offerDetails.shortDescription}
                    onChange={(e) =>
                        setOfferDetails({
                            ...offerDetails,
                            shortDescription: e.target.value,
                        })
                    }
                    multiline
                    required
                />
                <TextField
                    margin="normal"
                    id="filled-multiline-flexible"
                    label="Long description"
                    rows={12}
                    inputProps={{maxLength: 500}}
                    variant="filled"
                    value={offerDetails.longDescription}
                    onChange={(e) =>
                        setOfferDetails({
                            ...offerDetails,
                            longDescription: e.target.value,
                        })
                    }
                    multiline
                    required
                />
                <TextField
                    margin="normal"
                    id="filled-basic"
                    label="Price"
                    type="number"
                    value={offerDetails.price}
                    onChange={(e) =>
                        setOfferDetails({
                            ...offerDetails,
                            price: parseFloat(e.target.value),
                        })
                    }
                    InputProps={{
                        startAdornment: (
                            <InputAdornment position="start">PLN</InputAdornment>
                        ),
                    }}
                    variant="filled"
                    required
                />
                <FormControl>
                    <InputLabel id="filled-select-label">Rate Description</InputLabel>
                    <Select
                        labelId="filled-select-label"
                        id="filled-select"
                        variant="filled"
                        value={offerDetails.rateDescription}
                        label="rate description"
                        onChange={(e) =>
                            setOfferDetails({
                                ...offerDetails,
                                rateDescription: e.target.value,
                            })
                        }
                    >
                        <MenuItem value={"Stawka za 1h"}>Stawka za 1h</MenuItem>
                        <MenuItem value={"Stawka za zlecenie"}>Stawka za zlecenie</MenuItem>
                    </Select>
                </FormControl>
                <TextField
                    margin="normal"
                    id="filled-multiline"
                    label="Your background"
                    rows={4}
                    inputProps={{maxLength: 500}}
                    variant="filled"
                    value={offerDetails.backgroundDescription}
                    onChange={(e) =>
                        setOfferDetails({
                            ...offerDetails,
                            backgroundDescription: e.target.value,
                        })
                    }
                    multiline
                    required
                />
                <Button variant="contained" type="submit">
                    Submit
                </Button>
                <Link to="/">
                    <Button variant="outlined" fullWidth startIcon={<ArrowBackIosIcon/>}>
                        Powrót
                    </Button>
                </Link>
            </form>
        </Box>
    );
};