import Content from "@/components/Content/Content";
import {Table} from "@/components/Table/Table";
import Button from "@/components/Button/Button";
import {useModalContext} from "@/components/Modal/ModalContext";
import CarModal from "@/modals/Car";
import {useCarModelContext} from "@/api/context/CarModel";
import {useEngineContext} from "@/api/context/Engine";
import {useTrimContext} from "@/api/context/Trim";
import {useBodyTypeContext} from "@/api/context/BodyType";
import {useCarColorContext} from "@/api/context/CarColor";
import {useTransmissionContext} from "@/api/context/Transmission";
import {Rows} from "@/components/Table/Rows";
import {Row} from "@/components/Table/Row";
import {remove} from "@/api/cars";
import {useCarContext} from "@/api/context/Car";

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

    if (!car || !transmission || !carColor || !carModel || !engine || !trim || !bodyTypes) {
        return null;
    }

    return (
        <Content>
            <Button onClickAction={() => setContentModal(<CarModal />)}>Добавить элемент</Button>
            <Table header={['Код', 'Модель автомобиля', 'Двигатель', 'Комплектация', 'Тип кузова', 'Цвет автомобиля', 'Трансмиссия', "Действия"]}>
                { car.map((item, index) => {

                    const model = carModel.find(model => model.id === item.car_models_id);
                    const carEngine = engine.find(engine => engine.id === item.engines_id);
                    const carTrim = trim.find(trim => trim.id === item.trims_id);
                    const type = bodyTypes.find(brand => brand.id === item.body_types_id);
                    const color = carColor.find(brand => brand.id === item.car_colors_id);
                    const carTransmission = transmission.find(brand => brand.id === item.transmissions_id);

                    return (
                        <Rows key={index}>
                            <Row>{item.id}</Row>
                            <Row>{model ? model.name : 'Неизвестно'}</Row>
                            <Row>{carEngine ? carEngine.type : 'Неизвестно'}</Row>
                            <Row>{carTrim ? carTrim.name : 'Неизвестно'}</Row>
                            <Row>{type ? type.name : 'Неизвестно'}</Row>
                            <Row>{color ? color.name : 'Неизвестно'}</Row>
                            <Row>{carTransmission ? carTransmission.type : 'Неизвестно'}</Row>
                            <Row>
                                <Button onClickAction={() => setContentModal(<CarModal initialData={item} />)}>Редактировать</Button>
                                <Button onClickAction={async () => {
                                    await remove(item)
                                    fetchData()
                                }}>Удалить</Button>
                            </Row>
                        </Rows>
                    );

                }) }
            </Table>
        </Content>
    );
}
