<template>
	<div class="note-title-display-card" 
		:style="{'background-color':color, 'color':fontColor, 'border-color':color }"
		:class="{'currently-open':currentlyOpen}"
	>
	<!-- fade-in-fwd -->
		<div v-if="noteIcon" class="badge">
			<i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
		</div>
		
		<div class="ui grid max-height">

			<!-- Show title and snippet below it -->
			<div class="top aligned row" @click.self="onClick(note.id)">

				<div class="sixteen wide column overflow-hidden note-card-text" @click="e => onClick(note.id, e)">

					<!-- Title display  -->
					<div v-if="note.title.length > 0" 
						data-test-id="title"
						:class="{ 'big-text':(note.titleLength <= 100), 'small-text-title':(note.titleLength >= 100) }"
						v-html="note.title"></div>

					<!-- Sub text display -->
					<div v-if="note.subtext.length > 0 && !isShowingSearchResults()"
						data-test-id="subtext"
						:class="{ 'big-text':(note.subtextLength <= 100 && note.titleLength <= 100), 'small-text':(note.subtextLength >= 100) }"
						v-html="note.subtext"></div>

					<!-- Display highlights from solr results  -->
					<div v-if="note.note_highlights.length > 0 && textResults" class="term-usage">
						<div 
						class="usage-row" 
						v-for="highlight in note.note_highlights"
						:class="{ 'big-text':(highlight <= 100), 'small-text-title':(highlight >= 100) }"
						v-html="cleanHighlight(highlight)"></div>
					</div>

				</div>
				
			</div>

				
			<!-- Toolbar on the bottom  -->
			<div class="bottom aligned row" @click.self="onClick(note.id)">
				<div class="sixteen wide column">
					<div class="ui grid reduced-padding">

						<div class="thirteen wide column clickable icon-bar" @click="onClick(note.id)">
							<!-- {{$helpers.timeAgo(note.updated)}}  -->
							<span v-if="note.tags">
								<span v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
							</span>
							<span v-if="note.pinned == 1" data-position="top right" data-tooltip="Pinned" data-inverted="">
								<i class="green pin icon"></i>
							</span>
							<span v-if="note.archived == 1" data-position="top right" data-tooltip="Archived" data-inverted="">
								<i class="green archive icon"></i>
							</span>
						</div>
						<div class="three wide right aligned column">
							<delete-button :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
						</div>

						<div class="row" v-if="note.thumbs">
							<div class="tiny-thumb-box" v-on:click="openEditAttachment">
								<img v-for="thumb in note.thumbs.split(',').reverse()" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>

	export default {
	name: 'NoteTitleDisplayCard',
		props: [ 'onClick', 'data', 'currentlyOpen', 'textResults', 'attachmentResults', 'tagResults' ],
		components: {
			'delete-button': require('@/components/NoteDeleteButtonComponent.vue').default,
		},
		methods:{
			cleanHighlight(text){
				//Basically just remove whitespace
				let updated = text.replace(/&nbsp;/g, '').replace(/<br>/g,'')
					.replace(/<p><\/p>/g,'').replace(/<p>&nbsp;<\/p>/g,'')

				return updated
			},
			isShowingSearchResults(){
				if(this.note.note_highlights.length > 0 || this.note.attachment_highlights.length > 0 || this.note.tag_highlights.length > 0){
					return true
				}
				return false
			},
			splitTags(text){
				return text.split(',')
			},
			openEditAttachment(){
				this.$router.push('/attachments/note/'+this.note.id)
			},
		},
		data () {
			return {
				note: null,
				color: null,
				fontColor: null,
				noteIcon: null,
				iconColor: null,
			}
		},
		beforeMount(){

			this.note = this.data

			if(this.note.color != null){

				const styles = JSON.parse(this.note.color)

				//Set background color
				if(styles.noteBackground){
					this.color = styles.noteBackground
				}

				//set text color
				if(styles.noteText){
					this.fontColor = styles.noteText
				}

				if(styles.noteIcon){
					this.noteIcon = styles.noteIcon
				}

				if(styles.iconColor){
					this.iconColor = styles.iconColor
				}

			}
		}
	}
</script>
<style type="text/css">

	/*Strict font sizes for card display*/
	.small-text, .small-text > p, .small-text > h1, .small-text > h2 {
		/*font-size: 1.0em !important;*/
		font-size: 15px !important;
	}
	.small-text > p, , .small-text > h1, .small-text > h2 {
		margin-bottom: 0.5em;
	}
	.big-text, .big-text > p, .big-text > h1, .big-text > h2 {
		/*font-size: 1.3em !important;*/
		font-size: 16px !important;
		font-weight: bold;
	}
	.big-text > p, .big-text > h1, .big-text > h2 {
		margin-bottom: 0.3em;
	}

	.note-title-display-card h3 {
		font-size: 1rem;
		font-weight: bold;
		line-height: 1.5rem;
	}

	.term-usage {
		/*border-bottom: 1px solid #DDD;*/
		/*padding-bottom: 10px;*/
		margin-top: 15px;
		width: 100%;
	}
	.term-usage em {
		color: green;
		font-weight: bold;
		font-size: 1.1rem;
		font-style: normal;
	}
	.usage-row + .usage-row {
		padding: 8px 0 0;
		border-top: 1px solid #DDD;
		margin: 8px 0 0;
	}

	.note-title-display-card {
		position: relative;
		/*box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);*/
		box-shadow: 0 0px 5px 1px rgba(34,36,38,0);
		margin: 5px;
		padding: 0.7em 1em;
		border-radius: .28571429rem;
		border: 1px solid;
		border-color: var(--border_color);
		/*width: calc(33.333% - 10px);*/
		width: calc(25% - 10px);
		/*transition: box-shadow 0.3s;*/
		box-sizing: border-box;
		cursor: pointer;

		line-height: 1.8rem;
		letter-spacing: 0.02rem;
	}
	.note-title-display-card:hover {
		/*box-shadow: 0 3px 6px -0 rgba(34,36,38,.50);*/
		box-shadow: 0 0px 5px 1px rgba(34,36,38,0.3);
	}
	.icon-bar {
		opacity: 0.8;
		/*margin-top: -2.2rem;*/
	}
	.hover-hide {
		opacity: 0.0;
	}
	.little-tag {
		font-size: 0.7em;
		padding: 5px 5px;
		border: 1px solid var(--border_color);
		margin: 5px 3px 0 0;
		border-radius: 3px;
		white-space: nowrap;
		max-width: 100px;
		overflow: hidden;
		display: inline-block;
		line-height: 0.8em;
		text-overflow: ellipsis;
	}
	.tiny-thumb-box {
		max-height: 70px;
		overflow: hidden;
		width: 100%;
		display: inline-block;
		background-color: rgba(200, 200, 200, 0.2);
		white-space: nowrap;
		overflow-x: scroll;
		border: 1px solid var(--border_color);
		border-left: none;
		border-right: none;
		text-align: center;
		scrollbar-width: none;
	}
	.tiny-thumb {
		max-height: 70px;
		display: inline-block;
	}

	.note-title-display-card:hover .icon-bar {
		opacity: 1;
	}
	.note-title-display-card:hover .hover-hide {
		opacity: 1;
	}
	

	.one-column .note-title-display-card {
		/*margin-right: 65%;*/
		/*width: 33%;*/
		width: 100%;
	}
	.overflow-hidden {
		overflow: hidden;
	}
	.overflow-hidden p, .overflow-hidden h3 {
		word-break: break-word;
	}
	.max-height {
		height: calc(100% + 30px);
	}
	.currently-open:after {
		content: 'Open';
		position: absolute;
		cursor: default;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: #000000b0;
		vertical-align: middle;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #cecece;
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
		font-size: 3rem;
	}

	.badge {
		position: absolute;
		top: 7px;
		right: 6px;
	}

	/* Tweak mobile display to show only one column */
	@media only screen and (max-width: 740px) {
		.note-title-display-card {
			width: calc(100% + 10px);
			margin: 0px -5px 10px -5px;
		}
	}
</style>