auto-directory/src/modals/Car.tsx

import Button from "@/components/Button/Button";
import React, {useState} from "react";
import {CarModelItem, useCarModelContext} from "@/api/context/CarModel";
import {EngineItem, useEngineContext} from "@/api/context/Engine";
import {TrimItem, useTrimContext} from "@/api/context/Trim";
import {BodyTypeItem, useBodyTypeContext} from "@/api/context/BodyType";
import {CarColorItem, useCarColorContext} from "@/api/context/CarColor";
import {TransmissionItem, useTransmissionContext} from "@/api/context/Transmission";
import {OptionType, Select} from "@/components/Select/Select";
import {useModalContext} from "@/components/Modal/ModalContext";
import {add, update} from "@/api/cars";
import {useCarContext} from "@/api/context/Car";
import {SingleValue} from "react-select";

export default function Car({ initialData }: any) {
    const { carModel } = useCarModelContext();
    const { engine } = useEngineContext();
    const { trim } = useTrimContext();
    const { bodyTypes } = useBodyTypeContext();
    const { carColor } = useCarColorContext();
    const { transmission } = useTransmissionContext();
    const { fetchData } = useCarContext();
    const { setContentModal } = useModalContext();

    const carModelOptions = carModel?.map((model: CarModelItem) => ({
        value: model.id,
        label: model.name
    })) || [];

    const engineOptions = engine?.map((engine: EngineItem) => ({
        value: engine.id,
        label: engine.type
    })) || [];

    const trimOptions = trim?.map((trim: TrimItem) => ({
        value: trim.id,
        label: trim.name
    })) || [];

    const bodyTypesOptions = bodyTypes?.map((bodyType: BodyTypeItem) => ({
        value: bodyType.id,
        label: bodyType.name
    })) || [];

    const carColorOptions = carColor?.map((color: CarColorItem) => ({
        value: color.id,
        label: color.name
    })) || [];

    const transmissionOptions = transmission?.map((transmission: TransmissionItem) => ({
        value: transmission.id,
        label: transmission.type
    })) || [];

    const [formData, setFormData] = useState({
        id: initialData?.id || null,
        car_models_id: initialData?.car_models_id || null,
        engines_id: initialData?.engines_id || null,
        trims_id: initialData?.trims_id || null,
        body_types_id: initialData?.body_types_id || null,
        car_colors_id: initialData?.car_colors_id || null,
        transmissions_id: initialData?.transmissions_id || null,
    });

    const handleSubmit = async () => {
        if (formData.id === null) {
            await add(formData);
        } else {
            await update(formData);
        }
        fetchData();
        setContentModal(null);
    };

    return (
        <>
            <Select options={carModelOptions}
                    placeholder={"Модель автомобиля"}
                    value={formData.car_models_id}
                    onChange={(e: SingleValue<OptionType>) => {
                        setFormData({
                            ...formData,
                            car_models_id: e ? e.value : null,
                        });
                    }} name="car_models_id"/>
            <Select options={engineOptions}
                    placeholder={"Двигатель"}
                    value={formData.engines_id}
                    onChange={(e: SingleValue<OptionType>) => {
                        setFormData({
                            ...formData,
                            engines_id: e ? e.value : null,
                        });
                    }} name="engines_id"/>
            <Select options={trimOptions}
                    placeholder={"Комплектация"}
                    value={formData.trims_id}
                    onChange={(e: SingleValue<OptionType>) => {
                        setFormData({
                            ...formData,
                            trims_id: e ? e.value : null,
                        });
                    }} name="trims_id"/>
            <Select options={bodyTypesOptions}
                    placeholder={"Тип кузова"}
                    value={formData.body_types_id}
                    onChange={(e: SingleValue<OptionType>) => {
                        setFormData({
                            ...formData,
                            body_types_id: e ? e.value : null,
                        });
                    }} name="body_types_id"/>
            <Select options={carColorOptions}
                    placeholder={"Цвет автомобиля"}
                    value={formData.car_colors_id}
                    onChange={(e: SingleValue<OptionType>) => {
                        setFormData({
                            ...formData,
                            car_colors_id: e ? e.value : null,
                        });
                    }} name="car_colors_id"/>
            <Select options={transmissionOptions}
                    placeholder={"Трансмиссия"}
                    value={formData.transmissions_id}
                    onChange={(e: SingleValue<OptionType>) => {
                        setFormData({
                            ...formData,
                            transmissions_id: e ? e.value : null,
                        });
                    }} name="transmissions_id"/>
            <Button onClickAction={handleSubmit}>Сохранить</Button>
        </>
    );
}