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 EngineModal from "@/modals/Engine";
import {useEngineContext} from "@/api/context/Engine";
import {Rows} from "@/components/Table/Rows";
import {Row} from "@/components/Table/Row";
import {remove} from "@/api/engines";

export default function Engine() {
    const { setContentModal } = useModalContext();
    const { engine, fetchData } = useEngineContext();

    if (!engine) {
        return <div>Loading...</div>;
    }

    return (
        <Content>
            <Button onClickAction={() => setContentModal(<EngineModal />)}>Добавить элемент</Button>
            <Table header={['Код', 'Тип двигателя', 'Мощность (в лошадиных силах)', 'Объем двигателя', "Действия"]}>
                { engine.map((item, index) => (
                    <Rows key={index}>
                        <Row>{item.id}</Row>
                        <Row>{item.type}</Row>
                        <Row>{item.powerHR}</Row>
                        <Row>{item.volume}</Row>
                        <Row>
                            <Button onClickAction={() => setContentModal(<EngineModal initialData={item} />)}>Редактировать</Button>
                            <Button onClickAction={async () => {
                                await remove(item)
                                fetchData()
                            }}>Удалить</Button>
                        </Row>
                    </Rows>
                )) }
            </Table>
        </Content>
    );
}
