import { Galleria } from '@/components/lib/galleria/Galleria';
import { useRef, useState } from 'react';

export function BasicDoc() {
    const [galleriaImages, setGalleriaImages] = useState([]);
    const [galleriaImagesActiveIndex, setGalleriaImagesActiveIndex] = useState(0);
    const galleriaRef = useRef(null);
    const galleriaItemTemplate = (item) => (
        <img
            src={item}
            alt=""
            style={{
                maxWidth: '100vw',
                display: 'block',
                padding: '0 10px',
                maxHeight: '90vh'
            }}
        />
    );
    const galleriaThumbnailTemplate = (item) => <img src={item} alt="" style={{ height: '100px', marginLeft: '10px' }} />;

    return (
        <>
            <button
                type="button"
                onClick={() => {
                    setGalleriaImages(['https://picsum.photos/200/200', 'https://picsum.photos/300/300', 'https://picsum.photos/200/300', 'https://picsum.photos/300/200']);
                    setGalleriaImagesActiveIndex(0);

                    galleriaRef.current?.show();
                }}
            >
                Not Working Version
            </button>

            <Galleria
                ref={galleriaRef}
                value={galleriaImages}
                item={galleriaItemTemplate}
                thumbnail={galleriaThumbnailTemplate}
                fullScreen
                showThumbnails={false}
                activeIndex={galleriaImagesActiveIndex}
                onItemChange={(e) => setGalleriaImagesActiveIndex(e.index)}
                circular
                showItemNavigators
                showThumbnailNavigators={false}
            />
        </>
    );
}