<script>
	import '$lib/css/base.css';
	import '$lib/css/social.css';

	import anime from 'animejs';
	import SvgIcon from '@jamescoyle/svelte-icon';

	let social_list = [
		{
			pic: 'https://cdn.simpleicons.org/instagram',
			color: 'E4405F',
			alt: 'Instagram',
			name: '@yo.boujon',
			link: 'https://www.instagram.com/yoboujon/'
		},
		{
			pic: 'https://cdn.simpleicons.org/github',
			color: '181717',
			alt: 'Github',
			name: 'yoboujon',
			link: 'https://github.com/yoboujon'
		},
		{
			pic: 'https://cdn.simpleicons.org/youtube',
			color: 'FF0000',
			alt: 'Youtube',
			name: '@yoboujon',
			link: 'https://www.youtube.com/@yoboujon'
		},
		{
			pic: 'https://img.icons8.com/?size=200&id=8808&format=png&color=0A66C2',
			color: '0A66C2',
			alt: 'Linkedin',
			name: 'Yohan Boujon',
			link: 'https://www.linkedin.com/in/yohan-boujon-a08511202/'
		},
		{
			icon: 'M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z',
			color: 'AD62AA',
			alt: 'Etheryo',
			name: 'Etheryo',
			link: 'https://www.etheryo.fr'
		}
	];

	let div_social;
	const resetcolor = {
		r: 15,
		g: 11,
		b: 17,
		a: 0.1
	};
	let oldcolor = resetcolor;

	function changeBackground(color, reset) {
		let newcolor = resetcolor;
		if (!reset) {
			newcolor = {
				r: parseInt(color.substring(0, 2), 16),
				g: parseInt(color.substring(2, 4), 16),
				b: parseInt(color.substring(4, 6), 16),
				a: 0.2
			};
		}

		anime({
			targets: { red: oldcolor.r, green: oldcolor.g, blue: oldcolor.b, alpha: oldcolor.a },
			red: [oldcolor.r, newcolor.r],
			green: [oldcolor.g, newcolor.g],
			blue: [oldcolor.b, newcolor.b],
			alpha: [oldcolor.a, newcolor.a],
			duration: 500,
			easing: 'easeInOutQuad',
			update: function (anim) {
				div_social.style.backgroundImage = `linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(${anim.animations[0].currentValue},${anim.animations[1].currentValue},${anim.animations[2].currentValue},${anim.animations[3].currentValue}) 100%)`;
				oldcolor = {
					r: anim.animations[0].currentValue,
					g: anim.animations[1].currentValue,
					b: anim.animations[2].currentValue,
					a: anim.animations[3].currentValue
				};
			}
		});
	}
</script>

<div class="social social-width" bind:this={div_social}>
	<h1>Liens</h1>
	{#each social_list as s}
		<div
			class="social-link align-center"
			style="--social-color: #{s.color};"
			role="button"
			tabindex="0"
			title={s.alt}
			on:mouseenter={() => {
				changeBackground(s.color, false);
			}}
			on:mouseleave={() => {
				changeBackground(s.color, true);
			}}
		>
			{#if s.pic === undefined}
				<SvgIcon size="32" type="mdi" path={s.icon}></SvgIcon>
			{:else}
				<img alt={s.alt} src={s.pic} />
			{/if}
			<a href={s.link} target="_blank">{s.name}</a>
		</div>
	{/each}
</div>
