import { PageBreadcrumb } from '@frontend/components/layout/PageBreadcrumb';

export type PublicGalleryPhoto = {
    id: number;
    caption: string;
    image: string;
};

function Photo({ photo }: { photo: PublicGalleryPhoto }) {
    const label = photo.caption !== '' ? photo.caption : 'Gallery photo';

    return (
        <div className="photo-gallery">
            <div className="photo-gallery-image">
                <figure className="image-anime">
                    <img src={photo.image} alt={label} />
                </figure>
            </div>
            <div className="photo-gallery-icon">
                <a className="photo-popup" href={photo.image} aria-label={label}>
                    <i className="fa-solid fa-plus"></i>
                </a>
            </div>
        </div>
    );
}

function MosaicChunk({ photos }: { photos: PublicGalleryPhoto[] }) {
    const lead = photos[0];
    const quad = photos.slice(1, 5);
    const thirds = photos.slice(5, 8);
    const pair = photos.slice(8, 10);

    return (
        <>
            {lead && (
                <div className="col-lg-6 col-md-6 col-sm-12">
                    <Photo photo={lead} />
                </div>
            )}
            {quad.length > 0 && (
                <div className="col-lg-6 col-md-6 col-sm-12">
                    <div className="row">
                        {quad.map((photo) => (
                            <div className="col-lg-6 col-md-6 col-sm-6" key={photo.id}>
                                <Photo photo={photo} />
                            </div>
                        ))}
                    </div>
                </div>
            )}
            {thirds.map((photo) => (
                <div className="col-lg-4 col-md-4 col-sm-12" key={photo.id}>
                    <Photo photo={photo} />
                </div>
            ))}
            {pair.length > 0 && (
                <div className="col-lg-12">
                    <div className="row">
                        {pair.map((photo) => (
                            <div className="col-lg-6 col-md-6 col-sm-6" key={photo.id}>
                                <Photo photo={photo} />
                            </div>
                        ))}
                    </div>
                </div>
            )}
        </>
    );
}

function chunksOfTen(photos: PublicGalleryPhoto[]): PublicGalleryPhoto[][] {
    const chunks: PublicGalleryPhoto[][] = [];

    for (let index = 0; index < photos.length; index += 10) {
        chunks.push(photos.slice(index, index + 10));
    }

    return chunks;
}

export function GalleryMain({ photos }: { photos: PublicGalleryPhoto[] }) {
    const chunks = chunksOfTen(photos);

    return (
        <>
            <PageBreadcrumb page="gallery" />

            {photos.length > 0 && (
                <div className="gallery-section pt-100 md-pt-80 pb-70 md-pb-50">
                    <div className="container">
                        <div className="row">
                            {chunks.map((chunk, index) => (
                                <MosaicChunk photos={chunk} key={chunk[0]?.id ?? index} />
                            ))}
                        </div>
                    </div>
                </div>
            )}
        </>
    );
}