<?php

	function photographer_child_scripts()
	{
		wp_enqueue_style('photographer-parent-style', get_template_directory_uri(). '/style.css');
	}
	
	add_action('wp_enqueue_scripts', 'photographer_child_scripts');


/* Custom Functions */
// "javascript: 200,500,700,200 | css: 500,600,600,700"
// Implementation is [fts_timeline data="javascript: 200,500,700,200 | css: 500,600,600,700"]
add_shortcode( 'fts_timeline', 'fts_timeline_func' );
function fts_timeline_func( $atts ) {
	$colors = ["#801517","#71cff5","#a9c438","#FAA613","#F44708","#F26A8D","#064789"."#427AA1","#0A100D","#B9BAA3","#697A21","#526760","#8B8BAE"];
	$dataset = '';
	$data = str_replace("\n","",$atts['data']);
	$data = str_replace("<br />","",$data);
	$skill_pieces = explode("|", $data);
	foreach ($skill_pieces as &$piece) {
		$skill_elements = explode(":", $piece);
		$dataset .= '{"label":"'.$skill_elements[0].'",
			"data":['.$skill_elements[1].'],
			"fill":true,
			"borderColor":"'.$colors[0].'",
			"lineTension":0.1},';
		array_shift ( $colors );
	}
	$uid = "skills-chart-" . microtime();
	return '<canvas id="'.$uid.'" height="200"></canvas>
<script>
new Chart(document.getElementById("'.$uid.'"),
	{
		"type":"line",
		"data":{"labels":["2010","2011","2012","2013","2014","2015","2016","2017","2018","2019"],
		"datasets":['.$dataset.']},
		"options":{
			title: {
				display: true,
				text: "'.$atts['title'].'",
				fontSize: 24
			},
			legend: {
				display: true,
				position: "bottom"
			},
			scales: {
				yAxes: [{
					scaleLabel: {
						display: true,
						labelString: "Hours per year"
					}
				}]
			}
		}
	});
</script>';
}

add_action('wp_head', 'chartjs_cdn'); 
function chartjs_cdn() { 
    echo '<script src="https://cdn.jsdelivr.net/npm/chart.js@2/dist/Chart.min.js"></script>'; 
}

// {"label":"Javascript","data":[650,590,800,810,560,550,400,500,650,1000],
// 	"fill":false,
// 	"borderColor":"rgb(75, 192, 192)",
// 	"lineTension":0.1},
// 	{"label":"Adobe Illustrator","data":[650,800,750,810,670,950,950,400,450,800],
// 	"fill":false,
// 	"borderColor":"rgb(75, 192, 52)",
// 	"lineTension":0.01},
// 	{"label":"React","data":[0,0,0,0,0,0,0,60,870,990],
// 	"fill":true,
// 	"borderColor":"rgb(160, 19, 192)",
// 	"lineTension":0.01}