/* eslint-disable */
import { createViewer } from "./util";
import { radios, withKnobs, optionsKnob } from "@storybook/addon-knobs";
let { viewer, element } = createViewer();

const bodyParts = viewer.playerObject.skin;
const skinParts = {};

// set inner parts
skinParts.head = bodyParts.head.innerLayer;
skinParts.body = bodyParts.body.innerLayer;
skinParts.leftArm = bodyParts.leftArm.innerLayer;
skinParts.rightArm = bodyParts.rightArm.innerLayer;
skinParts.leftLeg = bodyParts.leftLeg.innerLayer;
skinParts.rightLeg = bodyParts.rightLeg.innerLayer;

// set outter parts
skinParts.head2 = bodyParts.head.outerLayer;
skinParts.body2 = bodyParts.body.outerLayer;
skinParts.leftArm2 = bodyParts.leftArm.outerLayer;
skinParts.rightArm2 = bodyParts.rightArm.outerLayer;
skinParts.leftLeg2 = bodyParts.leftLeg.outerLayer;
skinParts.rightLeg2 = bodyParts.rightLeg.outerLayer;

export default {
	title: "Skinview3d",
	name: "Textures",
	decorators: [withKnobs],
};

export const Textures = () => {
	const skinOptions = {
		"1.8 Skin": "1_8_texturemap_redux",
		"Classic Skin": "Hacksore",
		"HD Skin": "ironman_hd",
	};
	const skinUrl = radios("Skin Textures", skinOptions, "1_8_texturemap_redux");

	const capeOptions = {
		None: "none",
		"Classic Cape": "cape",
		"HD Cape": "hd_cape",
	};

	const capeUrl = radios("Cape Textures", capeOptions, "none");
	viewer.loadSkin(`textures/${skinUrl}.png`);

	if (capeUrl === "none") {
		viewer.loadCape(null);
	} else {
		viewer.loadCape(`textures/${capeUrl}.png`);
	}

	// bottom layers
	const valuesBottomLayer = {
		Head: "head",
		Body: "body",
		LeftArm: "leftArm",
		RightArm: "rightArm",
		RightLeg: "rightLeg",
		LeftLeg: "leftLeg",
	};

	const optionsBottomLayer = optionsKnob(
		"Bottom Layer",
		valuesBottomLayer,
		Object.values(valuesBottomLayer),
		{
			display: "inline-check",
		}
	);

	// bottom layers
	const valuesTopLayer = {
		Head2: "head2",
		Body2: "body2",
		LeftArm2: "leftArm2",
		RightArm2: "rightArm2",
		RightLeg2: "rightLeg2",
		LeftLeg2: "leftLeg2",
	};

	const optionsTopLayer = optionsKnob(
		"Top Layer",
		valuesTopLayer,
		Object.values(valuesTopLayer),
		{
			display: "inline-check",
		}
	);

	// toggle parts
	console.log(skinParts);
	for (let partName in skinParts) {
		const visible = optionsBottomLayer
			.concat(optionsTopLayer)
			.includes(partName);

		skinParts[partName].visible = visible;
	}

	return element;
};