<?php
require __DIR__ . '/../bootstrap.php';
error_reporting(E_ALL);ini_set('display_errors', true);

$em = \EmotionHero\Application::getInstance()->getEm();
/* @var $hitRepo EmotionHero\Models\HitRepository */
$hitRepo = $em->getRepository(\EmotionHero\Models\Hit::class);

/* @var $currentHit \EmotionHero\Models\Hit */
$currentHit = $hitRepo->findOneBy(['hasImage'=>true], ['id'=>'DESC']);


$printEmoBlocks = function($emotion, $feature, $steps = 6) use($em) {
	foreach(range(0, 100, 100/($steps-1)) as $i) {
	    /* @var $hitRepo EmotionHero\Models\HitRepository */
	    $hitRepo = $em->getRepository(EmotionHero\Models\Hit::class);
	    $hit = $hitRepo->getClosestHitWithImage($emotion, $i);
	    $img = $hit->getFeatureImgAsString($feature);
	    $score = $hit->getEmotions()->getEmotionScore($emotion);
	    
	    $percentage = sprintf("%.0f %%",$score);
		echo <<< EOSNIPPET
	<div class="block">
	<img src="data:image/x-icon;base64,$img" title="{$hit->getId()}">

	<span class="perc">$percentage</span>
	</div>
EOSNIPPET;
	}
};


?>
<html>
    <head>
        <title>Emotion Hero</title>
    </head>
    <style type="text/css">
        body{
            background:yellow;
		font-family:"Unifont";
font-weight:bold;
        }

	.block{
		width:150px;
	}
	img{
		width:100%;
		filter:saturate(0%);
		mix-blend-mode: multiply;
		/*mix-blend-mode: exclusion;*/
	}

	.nose .block{
		width:70px;
	}
	.perc{
		display:block;
		width:100%;
text-align:center;
	}

	.emo-block{
	float:left;
	margin-right:10px;
text-align:center;

		
	}
.emo-block-emos{
position:relative;
}

	.emo{
	text-align:center;
        float:left;

	}
	.brows{
	width:650px;
	}
	.nose{
	width:240px;
	}

	.current{
/*width:200px;*/
margin:0 auto;
text-align:center;
}
.current img{
    width:200px;
}
dd, dt{
    float:left;width:80px;
    text-align:left;
}
	img.curImg{
	position:absolute;
	left:0;
	mix-blend-mode:difference;
	}
        
        svg{
            width:300px;
            float:left;
        }
	
    </style>
    <body>
<?php

echo "<div class='current'>";
echo "<img src=\"data:image/x-icon;base64,{$currentHit->getFeatureImgAsString("brows")}\" title=\"{$currentHit->getId()}\">";
echo "<dl>";
foreach(EmotionHero\Models\Emotions::$EMOTIONS as $emotion) {
	echo "<dt>$emotion</dt><dd>" . sprintf("%.2f %%", $currentHit->getEmotions()->getEmotionScore($emotion)) . "</dd>";
}
echo "</dl>";
echo "</div>";

echo "<div class='brows emo'><h3>eye brows</h3>";


foreach(EmotionHero\Models\Emotions::$EMOTIONS as $emotion) {	
    echo "<div class='emo-block'>$emotion<div class='emo-block-emos'>";
    $printEmoBlocks($emotion, 'brows');
    echo "<img class='curImg' src=\"data:image/x-icon;base64,{$currentHit->getFeatureImgAsString("brows")}\" title=\"{$currentHit->getId()}\" style=\"top:{$currentHit->getEmotions()->getEmotionScore($emotion)}%\">";
    echo "</div></div>";
}

//
//echo "<div class='emo-block'>joy<div class='emo-block-emos'>";
//$printEmoBlocks('joy','brows');
//echo "<img class='curImg' src=\"data:image/x-icon;base64,{$currentHit->getFeatureImgAsString("brows")}\" title=\"{$currentHit->getId()}\" style=\"top:{$currentHit->getEmotions()->getJoy()}%\">";
//echo "</div></div>";
//
//echo "<div class='emo-block'>sadness<div class='emo-block-emos'>";
//$printEmoBlocks('sadness','brows');
//echo "<img class='curImg' src=\"data:image/x-icon;base64,{$currentHit->getFeatureImgAsString("brows")}\" title=\"{$currentHit->getId()}\" style=\"top:{$currentHit->getEmotions()->getSadness()}%\">";
//echo "</div></div>";
//
//echo "<div class='emo-block'>surprise<div class='emo-block-emos'>";
//$printEmoBlocks('surprise','brows');
//echo "<img class='curImg' src=\"data:image/x-icon;base64,{$currentHit->getFeatureImgAsString("brows")}\" title=\"{$currentHit->getId()}\" style=\"top:{$currentHit->getEmotions()->getSurprise()}%\">";
//echo "</div></div>";
//echo "</div>"; // .brows

echo "<div class='nose emo'><h3>nose</h3>";
foreach(EmotionHero\Models\Emotions::$EMOTIONS as $emotion) {	
    echo "<div class='emo-block'>$emotion<div class='emo-block-emos'>";
    $printEmoBlocks($emotion, 'nose');
    echo "<img class='curImg' src=\"data:image/x-icon;base64,{$currentHit->getFeatureImgAsString("nose")}\" title=\"{$currentHit->getId()}\" style=\"top:{$currentHit->getEmotions()->getEmotionScore($emotion)}%\">";
    echo "</div></div>";
}

echo "</div>"; // .nose

foreach(EmotionHero\Models\Emotions::$EMOTIONS as $emotion) {	
    echo "<div class='emo-block'>$emotion<div class='emo-block-emos'>";
    $printEmoBlocks($emotion, 'mouth_right');
    echo "<img class='curImg' src=\"data:image/x-icon;base64,{$currentHit->getFeatureImgAsString("mouth_right")}\" title=\"{$currentHit->getId()}\" style=\"top:{$currentHit->getEmotions()->getEmotionScore($emotion)}%\">";
    echo "</div></div>";
}


$circles = "";

foreach($hitRepo->getBetterHit($currentHit)->getPoints()->getNormalisedPoints() as $i => $point) {
    $circles .= '<circle
       style="fill:#66ff00;"
       id="point'.$i.'"
       cx="'.$point->getX().'"
       cy="'.$point->getY().'"
       r="1" />';
}

foreach($currentHit->getPoints()->getNormalisedPoints() as $i => $point) {
    $circles .= '<circle
       style="fill:#ff0000;"
       id="point'.$i.'"
       cx="'.$point->getX().'"
       cy="'.$point->getY().'"
       r="1" />';
}


echo <<< EOSVG
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="-1 -1 102 102"
   id="svg2"
   version="1.1">
  <g id="layer1">
    $circles
  </g>
</svg>
EOSVG;

?>
    </body>
</html>