import { useEffect, useRef, useState } from "react";

export function Breathe(){
    const [isVisible, setVisible] = useState(false);
    const domRef = useRef(null)!;
    useEffect(() => {
        const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => setVisible(entry.isIntersecting));
        });
        observer.observe(domRef.current!);
    }, []);

    const [isVisible2, setVisible2] = useState(false);
    const domRef2 = useRef(null)!;
    useEffect(() => {
        const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => setVisible2(entry.isIntersecting));
        });
        observer.observe(domRef2.current!);
    }, []);

    const [isVisible3, setVisible3] = useState(false);
    const domRef3 = useRef(null)!;
    useEffect(() => {
        const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => setVisible3(entry.isIntersecting));
        });
        observer.observe(domRef3.current!);
    }, []);
    
    const [isVisible4, setVisible4] = useState(false);
    const domRef4 = useRef(null)!;
    useEffect(() => {
        const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => setVisible4(entry.isIntersecting));
        });
        observer.observe(domRef4.current!);
    }, []);

    
    const [isVisible5, setVisible5] = useState(false);
    const domRef5 = useRef(null)!;
    useEffect(() => {
        const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => setVisible5(entry.isIntersecting));
        });
        observer.observe(domRef5.current!);
    }, []);

    
    const [isVisible6, setVisible6] = useState(false);
    const domRef6 = useRef(null)!;
    useEffect(() => {
        const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => setVisible6(entry.isIntersecting));
        });
        observer.observe(domRef6.current!);
    }, []);

    const [isVisible7, setVisible7] = useState(false);
    const domRef7 = useRef(null)!;
    useEffect(() => {
        const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => setVisible7(entry.isIntersecting));
        });
        observer.observe(domRef7.current!);
    }, []);
    
    const [isVisible8, setVisible8] = useState(false);
    const domRef8 = useRef(null)!;
    useEffect(() => {
        const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => setVisible8(entry.isIntersecting));
        });
        observer.observe(domRef8.current!);
    }, []);

    return (
        <>
            {/* purple */}
            <div 
                className='col'
                style={{ 'height': '700vh'}}
                ref={domRef}>
                    <img 
                        style={{
                            'zIndex': '1', 
                            'position': 'fixed',
                            'top': '20vh',
                            'left': '20vw',
                            'width': '60vw',
                            'height': '60vh',
                            'transition': 'opacity 0.6s ease-out',
                            'opacity': `${isVisible ? '1' : '0'}`,
                            'visibility': `${isVisible ? 'visible' : 'hidden'}`
                        }}
                        src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp">
                    </img>
                    {/* Spacing Block */}
                    <div className='col' style={{ 'height': '100vh' }}></div>
                    <div style={{ 'height': '100vh'}} ref={domRef2}>
                        <p>Take a moment to</p>
                        <p>deeply breathe in...</p>
                        <img style={{
                            'position': 'fixed',
                            'top': '20vh',
                            'left': '20vw',
                            'width': '60vw',
                            'height': '60vh',
                            'transition': 'scale 2.0s ease-out',
                            'scale': `${isVisible2 ? '1' : '0'}`,
                            'visibility': `${isVisible2 ? 'visible' : 'hidden'}`
                        }}
                        src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
                    </div>
                    {/* Spacing Block */}
                    <div className='col' style={{ 'height': '95vh' }}></div>
                    <div style={{ 'height': '100vh'}} ref={domRef3}>
                        <p>and deeply.</p>
                        <p>breathe out...</p>
                        <img style={{
                            'position': 'fixed',
                            'top': '20vh',
                            'left': '20vw',
                            'width': '60vw',
                            'height': '60vh',
                            'transition': 'scale 2.0s ease-out',
                            'scale': `${isVisible3 ? '0' : '1'}`,
                            'visibility': `${isVisible3 ? 'visible' : 'hidden'}`
                        }}
                        src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
                    </div>
                    {/* Spacing Block */}
                    <div className='col' style={{ 'height': '100vh' }}></div>
                    <p>Your feel <strong>revitalized</strong></p>
                    <p>Your body and mind</p>
                    <p>become <strong>grounded</strong>.</p>
                    {/* Spacing Block */}
                    <div className='col' style={{ 'height': '100vh' }}></div>
                    <p>Now deeply breathe in</p>
                    <p>and hold your breath.</p>
                    <div style={{ 'height': '100vh'}} ref={domRef4}>
                        <img style={{
                            'position': 'fixed',
                            'top': '20vh',
                            'left': '20vw',
                            'width': '60vw',
                            'height': '60vh',
                            'transition': 'scale 2.0s ease-out',
                            'scale': `${isVisible4 ? '1' : '0'}`,
                            'visibility': `${isVisible4 ? 'visible' : 'hidden'}`
                        }}
                        src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
                    </div>
            </div>
            {/* black */}
            <div 
                style={{ 'height': '400vh'}}  ref={domRef5}>
                    <img 
                        style={{
                            'zIndex': '1', 
                            'position': 'fixed',
                            'top': '20vh',
                            'left': '20vw',
                            'width': '60vw',
                            'height': '60vh',
                            'transition': 'opacity 0.6s ease-out',
                            'opacity': `${isVisible5 ? '1' : '0'}`,
                            'visibility': `${isVisible5 ? 'visible' : 'hidden'}`
                        }}
                        src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
                    </img>
                    <div style={{ 'height': '100vh'}}  ref={domRef6}>
                        <img style={{
                            'position': 'fixed',
                            'top': '20vh',
                            'left': '20vw',
                            'width': '60vw',
                            'height': '60vh',
                            'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
                        }}
                        src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkpurplecircle.webp"></img>
                    </div>
                    {/* Spacing Block */}
                    <div className='col' style={{ 'height': '100vh' }}></div>
                    <p>With every second,</p>
                    <p>you feel more stressed.</p>
                    <p>Your body fights</p>
                    <p>against it, and your</p>
                    <p>mind begins to panic...</p>
                    <div style={{ 'height': '100vh'}}  ref={domRef7}>
                        <img style={{
                            'position': 'fixed',
                            'top': '20vh',
                            'left': '20vw',
                            'width': '60vw',
                            'height': '60vh',
                            'scale': `${isVisible7 ? '1' : '0'}`,
                            'visibility': `${isVisible7 ? 'visible' : 'hidden'}`
                        }}
                        src="https://static.igem.wiki/teams/5247/landing/breath/circles/blackcircle.webp"></img>
                    </div>
                    {/* Spacing Block */}
                    <div className='col' style={{ 'height': '100vh' }}></div>
                    <p>Breathe out!</p>
                    <p>Feel the relief!</p>
            </div>
            {/* grey */}
            <div 
                style={{ 'height': '200vh'}}  ref={domRef8}>
                    <img 
                        style={{
                            'zIndex': '1', 
                            'position': 'fixed',
                            'top': '20vh',
                            'left': '20vw',
                            'width': '60vw',
                            'height': '60vh',
                            'transition': 'opacity 0.6s ease-out',
                            'opacity': `${isVisible8 ? '1' : '0'}`,
                            'visibility': `${isVisible8 ? 'visible' : 'hidden'}`
                        }}
                        src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
                    </img>
                </div>
                <p>Imagine yourself living in</p>
                <p>constant fear of suffocation,</p>
                <p>because breathing deeply is a</p>
                <p><strong>privilage not everyone can enjoy</strong></p>
                            
                {/* Spacing Block */}
                <div className='col' style={{ 'height': '100vh' }}></div>
            </>
    );
}