import React, {useEffect, useState} from 'react';
import { createArea, updatedArea } from './area-factory-3d';
import * as SharedStyle from '../../shared-style';
import Translator from '../../translator/translator';

let translator = new Translator();

export default function AreaFactory(name, info, textures) {

  let areaElement = {
    name,
    prototype: 'areas',
    info: {
      ...info,
      visibility: {
        catalog: false,
        layerElementsVisible: false
      }
    },
    properties: {
      patternColor: {
        label: translator.t('color'),
        type: 'color',
        defaultValue: SharedStyle.AREA_MESH_COLOR.unselected
      },
      landlordPatternColor: {
        label: translator.t('color'),
        type: 'color',
        defaultValue: SharedStyle.AREA_LANDLORD_MESH_COLOR.unselected
      },
      patternColorHover: {
        label: translator.t('color'),
        type: 'color',
        defaultValue: SharedStyle.AREA_MESH_COLOR_HOVER.unselected
      },
      landlordPatternColorHover: {
        label: translator.t('color'),
        type: 'color',
        defaultValue: SharedStyle.AREA_LANDLORD_MESH_COLOR_HOVER.unselected
      },
      thickness: {
        label: translator.t('thickness'),
        type: 'length-measure',
        defaultValue: {
          length: 0,
        }
      }
    },
    render2D: function (element, layer, scene) {

      const [landlordBool, setlandlordBool] = useState(false);
      const [isHover, setIsHover] = useState(false)

      useEffect(() => {
        // console.log(element)
        setlandlordBool(element.get('properties').get('landlordBool'))
      }, [element])

      const handleMouseEnter = () => {
        setIsHover(true)
      }

      const handleMouseLeave = () => {
        setIsHover(false)
      }
      
      let path = '';

      ///print area path
      element.vertices.forEach((vertexID, ind) => {
        let vertex = layer.vertices.get(vertexID);
        path += (ind ? 'L' : 'M') + vertex.x + ' ' + vertex.y + ' ';
      });

      //add holes
      element.holes.forEach(areaID => {
        let area = layer.areas.get(areaID);

        area.vertices.reverse().forEach((vertexID, ind) => {
          let vertex = layer.vertices.get(vertexID);
          path += (ind ? 'L' : 'M') + vertex.x + ' ' + vertex.y + ' ';
        });

      });

      let fill = element.selected ? (landlordBool ? SharedStyle.AREA_LANDLORD_MESH_COLOR.selected : SharedStyle.AREA_MESH_COLOR.selected) : (landlordBool ? element.properties.get('landlordPatternColor') : element.properties.get('patternColor'));
      let fill_hover = element.selected ? (landlordBool ? SharedStyle.AREA_LANDLORD_MESH_COLOR_HOVER.selected : SharedStyle.AREA_MESH_COLOR_HOVER.selected) : (landlordBool ? element.properties.get('landlordPatternColorHover') : element.properties.get('patternColorHover'));

      return (
        <a 
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        >
          {
            isHover ? 
            <path d={path} fill={fill_hover}/>
            :
            <path d={path} fill={fill}/>
          }
        </a>
      );
    },

    render3D: function (element, layer, scene) {
      return createArea(element, layer, scene, textures)
    },

    updateRender3D: (element, layer, scene, mesh, oldElement, differences, selfDestroy, selfBuild) => {
      return updatedArea(element, layer, scene, textures, mesh, oldElement, differences, selfDestroy, selfBuild);
    }

  };

  if (textures && textures !== {}) {

    let textureValues = { 'none': 'None' };

    for (let textureName in textures) {
      textureValues[textureName] = textures[textureName].name
    }

    areaElement.properties.texture = {
      label: translator.t('texture'),
      type: 'enum',
      defaultValue: 'none',
      values: textureValues
    };

  }

  return areaElement

}