import "../../assets/styles/ReorderMedias.scss";
import { ActionButton, syncOpenModalDialog, } from "@paroicms/internal-front-lib";
import { Button } from "primereact/button";
import { classNames } from "primereact/utils";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { ReactSortable } from "react-sortablejs";
import GalleryItem from "../GalleryItem/GalleryItem";
export default function ReorderMedias(props) {
    const { t } = useTranslation();
    const { isMobile } = props;
    return (<Button className={classNames("Button ReorderMedias-btn", {
            mobile: !!isMobile,
        })} onClick={() => syncOpenModalDialog(makeReorderMediasDialog, props)} size="small" severity="secondary">
      {t("frontMediaGallery.orderTheMedia")}
    </Button>);
}
function makeReorderMediasDialog({ closeDialog, parameter: { medias, setOrdering }, }) {
    const { t } = useTranslation();
    const header = t("frontMediaGallery.dragAndDropMedia");
    const [sortableItems, setSortableItems] = useState([]);
    const applyOrdering = async () => {
        await setOrdering(sortableItems);
        closeDialog();
    };
    useEffect(() => {
        setSortableItems(medias.map((m) => ({
            id: m.uid, // needed by the UI library
            ...m,
        })));
    }, [medias]);
    const content = (<>
      <ReactSortable tag="div" className="Gallery flex-wrap" list={sortableItems} setList={setSortableItems}>
        {sortableItems.map((item) => (<GalleryItem key={item.uid} media={item}/>))}
      </ReactSortable>
    </>);
    const footer = (<>
      <Button onClick={() => closeDialog()}>{t("frontMediaGallery.cancel")}</Button>
      <ActionButton action={applyOrdering}>{t("frontMediaGallery.save")}</ActionButton>
    </>);
    return { header, content, footer };
}