<script>
    // a 'technology' object
    export let technology;
    export let licenses;
    export let affiliate_colours;
    import { Button, ButtonGroup, El, Modal, ModalBody, ModalFooter,
		ModalHeader, ModalTitle, Popover, PopoverBody, PopoverHeader } from 'yesvelte';

    export let showModal = false;

	const formatter = new Intl.ListFormat('en', {
	  style: 'long',
	  type: 'conjunction',
	});

	// combine an array of terms into a sentence with proper Oxford commas, dealing with the special cases
	// of one or two elements.
	function toOxfordCommaString(arr) {
		//console.log('arr: ', arr);
		return formatter.format(arr);
	}

	// return a singular or plural term depending on the value of 'count'
	function pluraliser(singular, plural, count) {
		if (count > 1) return plural;
		return singular;
	}

	//    console.log(technologies);
	// return true if a tech object includes valid instances
	function hasInstances(tech) {
		if (
			tech.hasOwnProperty('instances') &&
			tech.instances.constructor === Array &&
			tech.instances.length
		) {
			return true;
		}
		return false;
	}

</script>

<!-- making a dive act like a button: https://kvack.dev/blog/make-that-div-behave-like-a-button -->

<button on:click={() => (showModal = !showModal)} tabindex=0 class="tile technology" col>
    <h2>{technology.name}</h2>
    <div class="links">
		<span class="website">P</span>
		<Popover trigger="hover">
			<PopoverHeader><strong>Project website</strong> for {technology.name}</PopoverHeader>
			<PopoverBody><a href="{technology.website}">{technology.website}</a></PopoverBody>
		</Popover>
        {#if technology.repository}<span class="repository">S</span>
			<Popover trigger="hover">
				<PopoverHeader><strong>Source code</strong> repository for {technology.name}</PopoverHeader>
				<PopoverBody><a href={technology.repository}>{technology.repository}</a></PopoverBody>
			</Popover>
		{/if}
        {#if technology.wikipedia}<span class="wikipedia">W</span>
			<Popover trigger="hover">
				<PopoverHeader><strong>Wikipedia entry</strong> for {technology.name}</PopoverHeader>
				<PopoverBody><a href={technology.wikipedia}>{technology.wikipedia}</a></PopoverBody>
			</Popover>
		{/if}
    </div>

    <p class="description">{technology.description}{#if technology.extended_description}<span
        title={technology.extended_description}>i</span>{/if}
    </p>
    <div class="details">
    {#if technology.categories}<p class="property categories">{pluraliser('Category',
		'Categories', technology.categories.length)}: <span class="value">{toOxfordCommaString(technology.categories)}</span></p>{/if}
    {#if technology.analogues}<p class="property analogues">Alternative to <span
		class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
    {#if technology.license}<p class="property license"
        title="The libre license for this project is {technology.license}">License: <span
		class="value">{technology.license}</span></p>{/if}
	</div>
    {#if hasInstances(technology)}
        <div class="instances">
            <p>
            {#each technology.instances as instance}
				<span class="marker circle"
				style="background-color: {affiliate_colours[instance.affiliation].colour}"
				></span>
				<Popover trigger="hover">
					<PopoverHeader>{technology.name} Instance</PopoverHeader>
					<PopoverBody><a href="https://{instance.domain}">https://{instance.domain}</a> hosted on '{instance.host}' by {instance.affiliation}</PopoverBody>
				</Popover>
			{/each}
            </p>
        </div>
    {:else}
        <div class="instances">Nothing here yet...</div>
    {/if}
</button>

<Modal scrollable bind:show={showModal} autoClose dismissible>
	<ModalHeader>
		<ModalTitle>{technology.name}</ModalTitle>
	</ModalHeader>
	<ModalBody>
		<p class="description">{technology.description}{#if technology.extended_description}{technology.extended_description}{/if}
		</p>
		<div class="links">
			<p class="link"><span class="label">Project website</span>: <span class="website"><a href="{technology.website}" title="Project site for {technology.name}">{technology.website}</a></span></p>
			{#if technology.repository}<p class="link"><span class="label">Source code repository</span>: <span class="repository"><a
				href={technology.repository} title="The source code repository for {technology.name}">{technology.repository}</a></span></p>{/if}
			{#if technology.wikipedia}<p class="link"><span class="label">Wikipedia entry</span>: <span class="wikipedia"><a
				href={technology.wikipedia}
				title="Wikipedia Page for {technology.name}">{technology.wikipedia}</a></span></p>{/if}
		</div>
		<div class="details">
		{#if technology.categories}<p class="property categories">{pluraliser('Category',
			'Categories', technology.categories.length)}: <span class="value">{toOxfordCommaString(technology.categories)}</span></p>{/if}
		{#if technology.analogues}<p class="property analogues">Alternative to <span
			class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
		{#if technology.license}<p class="property license"
			title="The libre license for this project is {technology.license}">License: <span
			class="value"><a href="{licenses[technology.license].url}">{licenses[technology.license].name}</a></span></p>{/if}
		</div>
	</ModalBody>
	{#if hasInstances(technology)}
		<div class="instances">
			<p class="instances">Instances of {technology.name}:</p>
			<ol>
			{#each technology.instances as instance}
				<li>
					<p class="instance"><a href="https://{instance.domain}">{instance.domain}</a>  hosted on '{instance.host}' <span class="marker circle" style="background-color: {affiliate_colours[instance.affiliation].colour}"/> by {instance.affiliation}".
					</p>
				</li>
			{/each}
			</ol>
		</div>
	{:else}
		<div class="instances">Nothing here yet...</div>
	{/if}
	<!--<ModalFooter>
		Previous and Next buttons to go here.
	</ModalFooter>-->
</Modal>

<style>
	.tile.technology {

		background-color: #eee;
		border: solid 3px #3a8ea5;
		border-radius: 15px;
		box-shadow: 5px 5px 3px #6a6d6a;
		box-sizing: border-box;
        display: inline-block;
		height: 515px;
		line-height: 1.2;
		margin-bottom: 10px;
		margin-right: 18px;
		margin-top: 8px;
		overflow: hidden;
		padding: 0;
		position: relative;
		text-align: left;
		text-overflow: ellipsis;
		vertical-align: top !important;
		width: 290px;
	}
	.tile.technology .links {
		position: absolute;
		top: 0;
		right: 0;
		padding: 2px 6px;
		font-size: 90%;
	}
	.tile.technology:hover {
		box-shadow: 6px 6px 5px #727372;
	}
	.tile.technology:active {
		box-shadow: 0 0 0;
		border-color: #000;
	}
	.tile.technology .links h2 a {
		color: #e6c4fc;
	}
	.tile.technology .links a:visited {
		color: #ced0ff;
	}
	.tile.technology .links a:hover,
	.tile.technology:hover h2 a {
		color: #fff !important;
	}
	.tile.technology h2 {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		background-color: #999;
		text-align: center;
		padding: 0.5em;
		margin: 0;
	}
	.tile.technology h2 a {
		color: #e6c4fc;
	}
	.tile.technology h2 a:visited {
		color: #ced0ff;
	}
	.tile.technology h2 a:hover {
		color: #fff;
	}
	.tile.technology .description {
		height: 200px;
		line-height: 1.2em;
		text-overflow: ellipsis;
		overflow: hidden;
		padding-top: 0.5em;
		vertical-align: top;
	}
	.tile.technology p {
		padding: 0 0.7em 0.2em 0.7em;
		font-size: 80%;
		color: #555;
	}
	.tile.technology p.property {
		padding: 0.2em 0.7em;
		margin: 0;
	}
	.tile.technology .details {
		vertical-align: bottom;
	}
	.tile.technology .instances {
		background-color: #ddd;
		position: absolute;
		bottom: 0;
		height: 2.5em;
		width: 100% !important;
		vertical-align: middle;
	}
	.tile.technology .instances p {
		width: 100%;
		padding-top: 0.7em;
		vertical-align: middle;
	}
	.tile.technology .instances .marker {
		margin-right: 3px;
	}
	.value {
		font-weight: bold;
		color: #000;
	}
	.marker {
		vertical-align: middle;
	}
	.circle {
		height: 20px;
		width: 20px;
		background-color: #555;
		border-radius: 50%;
		display: inline-block;
		border: 1px solid #777;
	}
	.circle:hover {
		border: 1px solid #000;
	}
</style>
