import * as Three from 'three';
import React from 'react';

import fontFile from '../../utils/gentilis_bold.typeface.json'

const RADIUS = 3;

const material_legs = new Three.MeshLambertMaterial( {color: 0xd9d7d7} );

function makeObjectMaxLOD(newWidth,newHeight,newDepth, element) {

  let table = new Three.Mesh();
  let PlaneGeometry = new Three.BoxGeometry( newWidth, newHeight/20, newDepth );
  let PlaneMaterial = new Three.MeshLambertMaterial( {color: 0xd9d7d7});

  let plane = new Three.Mesh( PlaneGeometry, PlaneMaterial );
  plane.position.y = newHeight;
  table.add(plane);

  return table;
}

function makeObjectMinLOD(newWidth,newHeight,newDepth, element) {

  let table = new Three.Mesh();

  let PlaneGeometry = new Three.BoxGeometry( newWidth, newHeight/20, newDepth );

  let PlaneMaterial = new Three.MeshLambertMaterial( {color: 0xd9d7d7} );

  let plane = new Three.Mesh( PlaneGeometry, PlaneMaterial );
  plane.position.y = newHeight;
  table.add(plane);
  return table;
}

export default {
  name: "floorplan",
  prototype: "items",

  info: {
    tag: ['furnishing'],
    title: "floorplan",
    description: "floorplan",
    image: require('./floorplan.jpg')
  },

  properties: {
    width: {
      label: "width",
      type: "length-measure",
      defaultValue: {
        length: 900,
        unit: 'cm'
      }
    },
    depth: {
      label: "height",
      type: "length-measure",
      defaultValue: {
        length: 500,
        unit: 'cm'
      }
    },
    altitude: {
      label: "altitude",
      type: "length-measure",
      defaultValue: {
        length: 0,
        unit: 'cm'
      }
    }
    ,
    background: {
      label: "Image",
      type: "image",
      defaultValue: 
        "floorplan.jpg"      
    }
  },

  render2D: function (element, layer, scene) {

    let newWidth = element.properties.get('width').get('length');
    let newDepth = element.properties.get('depth').get('length');
    let fileUrl = element.properties.get('background')
    let angle = element.rotation + 90;

    let textRotation = 0;
    if (Math.sin(angle * Math.PI / 180) < 0) {
      textRotation = 180;
    }

    return (
      <g transform={`translate(${-newWidth / 2},${-newDepth / 2})`}>
        <image href={require(`./${fileUrl}`)}  width={newWidth} height={newDepth} transform={`translate(0, ${newDepth}) scale(1,-1)`} preserveAspectRatio="none" />
      </g>
    )
  },

  render3D: function (element, layer, scene) {

    let newWidth = element.properties.get('width').get('length');
    let newDepth = element.properties.get('depth').get('length');
    let newHeight = 0;
    let newAltitude = element.properties.get('altitude').get('length');
    /********** lod max ************/

    let tableMaxLOD = new Three.Object3D();
    let objectMaxLod = makeObjectMaxLOD(newWidth,newHeight,newDepth, element);
    tableMaxLOD.add(objectMaxLod.clone());
    tableMaxLOD.position.y += newHeight/20 + newAltitude;


    /********** lod min ************/

    let tableMinLOD = new Three.Object3D();
    
    let objectMinLod = makeObjectMinLOD(newWidth,newHeight,newDepth, element);
    tableMinLOD.add(objectMinLod.clone());
    tableMinLOD.position.y += newHeight/20 + newAltitude;
    // var loader = new Three.FontLoader();
    // let font = loader.parse(fontFile);
   
    // var geometry = new Three.TextGeometry( 'Hello three.js!', {
    //   font: font,
    //   size: 80,
    //   height: 5,
    //   curveSegments: 12,
    //   bevelEnabled: true,
    //   bevelThickness: 10,
    //   bevelSize: 8,
    //   bevelOffset: 0,
    //   bevelSegments: 5
    // } );

    // let textMesh = new Three.Mesh(geometry)



    /**** all level of detail ***/

    let lod = new Three.LOD();
    lod.addLevel(tableMaxLOD, 10);
    lod.addLevel(tableMinLOD, 20);

    // lod.addLevel(textMesh, 1000);

    lod.updateMatrix();
    lod.matrixAutoUpdate = false;

    if (element.selected) {
      let bbox = new Three.BoxHelper(lod, "green");
      bbox.material.linewidth = 5;
      bbox.renderOrder = 1000;
      bbox.material.depthTest = false;
      lod.add(bbox);
    }

   

    return Promise.resolve(lod);
  }
};
