import * as React from "react";
import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
import { Pannellum } from "pannellum-react-update";

/**
 * The generic type argument provided to `FormElementProps<T>` controls the type
 * of `props.value` and `props.setValue(value)`. If your element doesn't need a
 * `value`, you can omit the type argument.
 *
 * You can also declare additional public properties of your element by adding
 * properties to this interface. The properties will be managed by the Workflow
 * runtime, and passed in as `props`. You can update the properties by using
 * `props.setProperty(key, value)`.
 */
interface Viewer360Props extends FormElementProps<string> {
    value: string //url of image
    pitch: number; //pitch of the image
    yaw: number; //yaw of the image
    hfov: number; //horizontal field of view
    minHfov: number; //minimum horizontal field of view
    haov: number; //horizontal angle of view
    vaov: number; //vertical angle of view
    setting?: {
        width?: string;
        height?: string;
    };
}

/**
 * A Workflow element built using React.
 * @displayName Viewer360
 * @description 360 viewer for propeller imagery.
 * @param props The props that will be provided by the Workflow runtime.
 */
function Viewer360(props: Viewer360Props): React.ReactElement {
    const { setting, value , pitch ,yaw, hfov, minHfov , haov, vaov, raiseEvent } = props;
   

    // Copy SVG assets to consumer's public folder and reference them
    React.useEffect(() => {
        // Ensure pannellum CSS has correct asset paths
        const customCSS = `
            .pnlm-container {
                background-image: url('/img/background.svg');
            }
            .pnlm-compass {
                background-image: url ('/img/compass.svg');
            }
            .pnlm-grab {
                cursor: url( '/img/grab.svg'), grab;
            }
            .pnlm-grabbing {
                cursor: url( '/img/grabbing.svg'), grabbing;
            }
            .pnlm-sprite {
                background-image: url( '/img/sprites.svg');
            }
        `;
        
        const styleElement = document.createElement('style');
        styleElement.textContent = customCSS;
        document.head.appendChild(styleElement);
        
        return () => {
            document.head.removeChild(styleElement);
        };
    }, []);
   
   
    console.log("rendering 360VIEWER")
    return (
        <>
            <Pannellum
                width={setting?.width || "100%"}
                height={setting?.height || "auto"}
                image={value}
                pitch={pitch || -20}
                yaw={yaw || 120}
                hfov={hfov || 110}
                haov={haov || 360}
                vaov={vaov || 180}
                minHfov={minHfov || 10}
                autoLoad
                onLoad={() => {
                    raiseEvent("loaded" as any, value);
                    console.log("panorama loaded");
                }}
            ></Pannellum>
        </>
    );
}

const Viewer360ElementRegistration: FormElementRegistration<Viewer360Props> = {
    component: Viewer360,
    getInitialProperties: () => ({}),
    id: "Viewer360",
};

export default Viewer360ElementRegistration;