import { useEffect, useState } from "react";
import ImageFormContent from "./ImageFormContent";
import DialogLoading from "@/core/components/DialogLoading";
import useRequest from "@/lib/hooks/useRequest";
import { GET_TOLL_HOUSE_IMAGES } from "@/core/utils/routes";
import { Typography } from "@mui/material";
const titles = ["نمای کلی از راهداری", "آشیانه ماشین آلات", "انباری شن و ماسه", "محیط کاری", "سایر تصاویر"];

const ImagesContent = ({ rowId }) => {
    const requestServer = useRequest();
    const [tollHouseImages, setTollHouseImages] = useState(null);
    const [tollHouseImagesLoading, setTollHouseImagesLoading] = useState(false);
    useEffect(() => {
        setTollHouseImagesLoading(true);
        requestServer(`${GET_TOLL_HOUSE_IMAGES}/${rowId}`, "get")
            .then((response) => {
                setTollHouseImages(response.data.data);
                setTollHouseImagesLoading(false);
            })
            .catch((e) => {
                setTollHouseImagesLoading(false);
            });
    }, [rowId]);

    return (
        <>
            {tollHouseImagesLoading ? (
                <DialogLoading />
            ) : tollHouseImages ? (
                tollHouseImages.map((image, index) => {
                    return <ImageFormContent key={index} image={image.path} title={titles[index]} />;
                })
            ) : (
                <Typography textAlign={"center"}>تصویری در سامانه یافت نشد</Typography>
            )}
        </>
    );
};
export default ImagesContent;