import { useBlockProps } from "@wordpress/block-editor";

export default function Save({ attributes }) {
	const blockProps = useBlockProps.save();

	const additionalAttributes = {};

	if (attributes.modelDimensions && typeof attributes.mdsf === "number" && !isNaN(attributes.mdsf)) {
		additionalAttributes["data-scale-factor"] = attributes.mdsf;
	}

	if (attributes.modelDimensions && typeof attributes.mdx === "number" && !isNaN(attributes.mdx)) {
		additionalAttributes["data-dim-x"] = attributes.mdx;
	}

	if (attributes.modelDimensions && typeof attributes.mdy === "number" && !isNaN(attributes.mdy)) {
		additionalAttributes["data-dim-y"] = attributes.mdy;
	}

	if (attributes.modelDimensions && typeof attributes.mdz === "number" && !isNaN(attributes.mdz)) {
		additionalAttributes["data-dim-z"] = attributes.mdz;
	}

	return (
		<div class="u3dmv-model-viewer-wrapper">
			<model-viewer
				class="model-viewer"
				{...blockProps}
				{...(attributes.modelDimensions && {
					"data-dim-mode": attributes.mdc ? "custom" : "real",
				})}
				{...additionalAttributes}
				src={attributes.src}
				poster={attributes.poster}
				environment-image={attributes.environment}
				skybox-image={attributes.skybox}
				tone-mapping={attributes.toneMapping}
				exposure={attributes.exposure}
				shadow-intensity={attributes.shadowIntensity}
				shadow-softness={attributes.shadowSoftness}
				camera-orbit={attributes.cameraOrbit}
				max-camera-orbit={attributes.cameraMaxOrbit}
				min-camera-orbit={attributes.cameraMinOrbit}
				camera-target={attributes.cameraTarget}
				field-of-view={attributes.fieldOfView}
				max-field-of-view={attributes.fieldOfViewMax}
				min-field-of-view={attributes.fieldOfViewMin}
				loading={attributes.loading}
				{...(attributes.autoRotate && { "auto-rotate": "" })}
				{...(attributes.ar && { ar: "" })}
				{...(attributes.ar && { "ar-modes": "webxr scene-viewer quick-look" })}
				ios-src={attributes.iosSrc}
				interaction-prompt="auto"
				touch-action="pan-y"
				camera-controls=""
				autoplay>
				<div id="progress-text">Loading 0%</div>
				<div class="progress-bar hide">
					<div class="update-bar"></div>
				</div>
				{attributes.modelDimensions && (
					<>
						<button slot="hotspot-dot+X-Y+Z" class="dot" data-position="1 -1 1" data-normal="1 0 0"></button>
						<button slot="hotspot-dim+X-Y" class="dim" data-position="1 -1 0" data-normal="1 0 0"></button>
						<button slot="hotspot-dot+X-Y-Z" class="dot" data-position="1 -1 -1" data-normal="1 0 0"></button>
						<button slot="hotspot-dim+X-Z" class="dim" data-position="1 0 -1" data-normal="1 0 0"></button>
						<button slot="hotspot-dot+X+Y-Z" class="dot" data-position="1 1 -1" data-normal="0 1 0"></button>
						<button slot="hotspot-dim+Y-Z" class="dim" data-position="0 -1 -1" data-normal="0 1 0"></button>
						<button slot="hotspot-dot-X+Y-Z" class="dot" data-position="-1 1 -1" data-normal="0 1 0"></button>
						<button slot="hotspot-dim-X-Z" class="dim" data-position="-1 0 -1" data-normal="-1 0 0"></button>
						<button slot="hotspot-dot-X-Y-Z" class="dot" data-position="-1 -1 -1" data-normal="-1 0 0"></button>
						<button slot="hotspot-dim-X-Y" class="dim" data-position="-1 -1 0" data-normal="-1 0 0"></button>
						<button slot="hotspot-dot-X-Y+Z" class="dot" data-position="-1 -1 1" data-normal="-1 0 0"></button>
						<svg id="dimLines" width="100%" height="100%" class="dimensionLineContainer">
							<line class="dimensionLine"></line>
							<line class="dimensionLine"></line>
							<line class="dimensionLine"></line>
							<line class="dimensionLine"></line>
							<line class="dimensionLine"></line>
						</svg>
					</>
				)}
			</model-viewer>
		</div>
	);
}
