import React, {useRef, useEffect, useState} from 'react'

import GenericRenderWindow from 'vtk.js/Sources/Rendering/Misc/GenericRenderWindow'

import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkCubeSource from 'vtk.js/Sources/Filters/Sources/CubeSource';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';

export default () => {
    const container = useRef(null)

    const [pipelines, setPipelines] = useState([])

    const genericRenderWindow = useRef()
    const renderer = useRef()
    const renderWindow = useRef()

    const [width, setWidth] = useState(window.innerWidth * 0.8)
    const [height, setHeight] = useState(window.innerHeight - 200)

    useEffect(()=> {
        genericRenderWindow.current = GenericRenderWindow.newInstance({
            background: [0.32, 0.34, 0.43],
            listenWindowResize: true,
            rootContainer: container.current,
        })
        renderer.current = genericRenderWindow.current.getRenderer();
        renderWindow.current = genericRenderWindow.current.getRenderWindow();
        genericRenderWindow.current.setContainer(container.current)
        genericRenderWindow.current.resize()

        window.addEventListener('resize', updateSize)
    },[])

    useEffect(() => {
        renderer.current.removeAllActors()
        pipelines.forEach(p => {
            renderer.current.addActor(p.actor)
        });
        renderer.current.getActors() // <- Strange behaviour here
        renderer.current.resetCamera();
        renderer.current.resetCameraClippingRange();
        renderWindow.current.render();
    },[pipelines])

    const updateSize = () => {
        setWidth(window.innerWidth * 0.8)
        setHeight(window.innerHeight - 200)
        genericRenderWindow.current.resize()
    }

    function createCubePipeline() {
        const cubeSource = vtkCubeSource.newInstance();
        const actor = vtkActor.newInstance();
        const mapper = vtkMapper.newInstance();

        mapper.setInputConnection(cubeSource.getOutputPort());
        actor.getProperty().setColor(1, 0, 0);
        actor.setMapper(mapper);

        return { cubeSource, mapper, actor };
    }

    const addPipeline = pipeline => {
        setPipelines(prev => ([...prev, pipeline]))
    }

    const clearPipelines = () => {
        setPipelines([])
    }

    return (
        <>
            <div style={{width: width, height: height - 20}} ref={container}/>
            <button onClick={() => addPipeline(createCubePipeline())}>Press</button>
            <button onClick={clearPipelines}>Clear</button>
        </>
    )
}