<template>
	<div class="note-title-display-card" 
		:style="{'background-color':color, 'color':fontColor, 'border-color':color }"
		:class="{'currently-open':currentlyOpen, 'bgboy':triggerClosedAnimation, 'title-view':titleView }"
	>


			<!-- Show title and snippet below it -->
			<div class="overflow-hidden note-card-text" @click="cardClicked" v-if="!titleView">

				<span class="subtext" v-if="note.shareUsername">
					Shared by {{ note.shareUsername }}

					<span v-if="note.opened == null && !beenClicked" class="ui tiny green compact right floated button">
						New
					</span>
					<span v-else-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
						Updated
					</span>
				</span>

				<span v-if="note.title == '' && note.subtext == '' && note.encrypted == 0">
					Empty Note
				</span>

				<span v-if="noteIcon" class="badge">
					<i :class="`large ${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
				</span>

				<!-- Title display  -->
				<span v-if="note.title.length > 0" 
					class="big-text"><p>{{ note.title }}</p></span>

				<!-- Sub text display -->
				<span v-if="note.subtext.length > 0"
					class="small-text"
					v-html="note.subtext"></span>

				
				<div class="ui fluid basic button" v-if="note.encrypted == 1">
					<i class="green lock icon"></i>
					Locked
				</div>

				<span class="subtext" v-if="note.shared == 2">
					You Shared this note
					<span v-if="note.updated > note.opened && !beenClicked" class="ui tiny green compact right floated basic button">
						Updated
					</span>
				</span>

			</div>
				
			<div v-if="titleView" class="single-line-text" @click="cardClicked">
				<span class="title-line" v-if="note.title.length > 0">{{ note.title }}<br></span>
				<span class="sub-line" v-if="note.subtext.length > 0">{{ removeHtml(note.subtext) }}</span>
				<span v-if="note.title.length == 0 && note.title.length == 0">Empty Note</span>
			</div>
				
			<!-- Toolbar on the bottom  -->
			<div class="tool-bar" @click.self="cardClicked" v-if="!titleView">
				<div class="icon-bar">
					
					<span class="tags" v-if="note.tags">
						<span  v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
						<br>
					</span>

					<span class="time-ago-display" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
						{{$helpers.timeAgo(note.updated)}}
					</span>

					<span class="teeny-buttons" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">

						<span v-if="!note.trashed">

							<i class="teeny-button" data-tooltip="Tags" data-inverted v-on:click="toggleTags(true)">
								<i class="tags icon"></i>
							</i>

							<i class="teeny-button"
								data-tooltip="Archive"
								:data-tooltip="note.archived ? 'Un-Archive':'Archive' " 
								data-inverted v-on:click="archiveNote">
								<i class="archive icon" :class="{'green':note.archived}"></i>
							</i>

							<i class="teeny-button" 
								:data-tooltip="note.pinned ? 'Un-Pin':'Pin' " 
								data-inverted v-on:click="pinNote">
								<i class="pin icon" :class="{'green':note.pinned}"></i>
							</i>

							<i class="teeny-button"
								data-tooltip="Move to Trash" 
								data-inverted v-on:click="trashNote()">
								<i class="trash icon"></i>
							</i>
						</span>

						<!-- Trash note options -->
						<span v-if="note.trashed">
							<i class="teeny-button" 
								data-tooltip="Un-Trash" 
								data-inverted v-on:click="trashNote()">
								<i class="reply icon"></i>
							</i>
							<delete-button class="teeny-button" :note-id="note.id" />
						</span>

						

					</span>
				</div>

				<div v-if="getThumbs.length > 0">
					<div class="tiny-thumb-box" v-on:click="openEditAttachment">
						<img v-for="thumb in getThumbs" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
					</div>
				</div>
			</div>

			<side-slide-menu v-if="showTagSlideMenu" v-on:close="toggleTags(false)" :full-shadow="true" :skip-history="true">
				<div class="ui basic segment">
					<note-tag-edit :noteId="note.id" :key="'display-tags-for-note-'+note.id"/>
				</div>
			</side-slide-menu>

		</div>



		

</template>

<script>

	import axios from 'axios'

	export default {
	name: 'NoteTitleDisplayCard',
		props: [ 'onClick', 'data', 'currentlyOpen', 'textResults', 'attachmentResults', 'tagResults', 'titleView' ],
		components: {
			'delete-button': require('@/components/NoteDeleteButtonComponent.vue').default,
			'note-tag-edit': require('@/components/NoteTagEdit.vue').default,
			'side-slide-menu': require('@/components/SideSlideMenuComponent.vue').default,
		},
		methods:{
			cardClicked(){
				// console.log(this.note)
				this.beenClicked = true
				this.onClick(this.note.id)
			},
			removeHtml(string){
				if(string == undefined || string == null || string.length == 0){
					return ''
				}

				return string
					.replace(/&[[#A-Za-z0-9]+A-Za-z0-9]+;/g,' ') //Rip out all HTML entities
					.replace(/<[^>]+>/g, ' ') //Rip out all HTML tags
					.replace(/\s+/g, ' ') //Remove all whitespace
					.trim()
			},
			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
			},
			splitTags(text){
				return text.split(',')
			},
			openEditAttachment(){
				this.$router.push('/attachments/note/'+this.note.id)
			},
			pinNote(){ //togglePinned() <- old name
				let postData = {'pinned': !this.note.pinned, 'noteId':this.note.id}
				axios.post('/api/note/setpinned', postData)
				.then(data => {
					// this.$bus.$emit('update_single_note', this.note.id)
				})
				.catch(error => { this.$bus.$emit('notification', 'Failed to Pin Note') })
			},
			archiveNote(){ //toggleArchived() <- old name
				let postData = {'archived': !this.note.archived, 'noteId':this.note.id}
				axios.post('/api/note/setarchived', postData)
				.then(data => {

					//Show message so no one worries where note went
					let message = 'Moved to Archive'
					if(postData.archived != 1){
						message = 'Moved to main list'
					}
					this.$bus.$emit('notification', message)

					// this.$bus.$emit('update_single_note', this.note.id)
				})
				.catch(error => { this.$bus.$emit('notification', 'Failed to Archive Note') })
			},
			trashNote(){ //toggleArchived() <- old name
				let postData = {'trashed': !this.note.trashed, 'noteId':this.note.id}
				axios.post('/api/note/settrashed', postData)
				.then(data => {

					//Show message so no one worries where note went
					let message = 'Moved to Trash'
					if(postData.trashed == 0){
						message = 'Moved to main list'
					}
					this.$bus.$emit('notification', message)

				})
				.catch(error => { this.$bus.$emit('notification', 'Failed to Trash Note') })
			},
			toggleTags(state){

				this.showTagSlideMenu = state

				if(state == false){
					this.$bus.$emit('update_single_note', this.note.id)
				}
				
			},
			justClosed(){

				//Scroll note into view
				// this.$el.scrollIntoView({
				// 	behavior: 'smooth',
				// 	block: 'center',
				// 	inline: 'center'
				// })

				//After scroll, trigger green outline animation
				setTimeout(() => {

					this.triggerClosedAnimation = true
					setTimeout(()=>{
						//After 3 seconds, hide it
						this.triggerClosedAnimation = false
					}, 3000)

				}, 500)
				
			},
		},
		data () {
			return {
				note: null,
				color: null,
				fontColor: null,
				noteIcon: null,
				iconColor: null,
				beenClicked: false,
				showTagSlideMenu: false,
				triggerClosedAnimation: false, //Show just closed animation
			}
		},
		computed: {
			getThumbs(){
				if(!this.note.thumbs){
					return []
				}

				let notDisplaying = []

				//Remove images displaying in text from the thumbnails
				this.note.thumbs.forEach( path => {

					const titleLocation = String(this.note.title).indexOf(path)
					const subtextLocation = String(this.note.subtext).indexOf(path)

					if(titleLocation != -1 || subtextLocation != -1){
						return
					}

					notDisplaying.push(path)
				})

				return notDisplaying
			}
		},
		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">

	.teeny-buttons {
		float: right;
		width: 65%;
		text-align: right;
	}
	.time-ago-display {
		width: 35%;
		float: left;
		text-align: center;
	}
	.tags {
		width: 100%;
		display: inline-block;
	}

	.teeny-button {
		border: 1px solid var(--border_color);
		border-radius: 5px;
		padding: 0px 0px 0px 4px;
		text-align: center;
		margin: 0 0 3px 5px;
		display: inline-block;
		min-width: 30px;
		color: var(--text_color);
		background-color: var(--small_element_bg_color);
	}
	.subtext {
		display: inline-block;
		width: 100%;
	}

	/*Strict font sizes for card display*/
	.small-text {
		max-height: 261px;
		overflow: hidden;
		display: inline-block;
	}
	.small-text, .small-text > p, .small-text > h1, .small-text > h2 {
		/*font-size: 1.0em !important;*/
		font-size: 16px !important;
	}
	.small-text > p, , .small-text > h1, .small-text > h2 {
		margin-bottom: 0.5em;
	}
	.big-text > p:first-child,
	.big-text > h1, .big-text > h2 {
		/*font-size: 1.3em !important;*/
		font-size: 17px !important;
		font-weight: bold;
		margin-bottom: 0.5em;
	}
	.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;
		background-color: var(--small_element_bg_color);
		/*The subtle shadow*/
		/*box-shadow: 0px 1px 2px 1px rgba(210, 211, 211, 0.46);*/
		transition: box-shadow ease 0.5s, transform linear 0.1s;
		margin: 5px;
		/*padding: 0.7em 1em;*/
		border-radius: .28571429rem;
		border: 1px solid transparent;
		border-color: var(--border_color);
		/*width: calc(33.333% - 10px);*/
		width: calc(25% - 10px);
		min-width: 190px;
		min-height: 130px;
		/*transition: box-shadow 0.3s;*/
		box-sizing: border-box;
		cursor: pointer;

		line-height: 1.8rem;
		letter-spacing: 0.02rem;
		display: flex;
		flex-direction: column;
		text-align: left;
	}
	.note-title-display-card:hover {
		/*box-shadow: 0px 2px 2px 1px rgba(210, 211, 211, 0.8);*/
		/*transform: translateY(-2px);*/
		box-shadow: 0 8px 24px rgba(0,0,0,0.1);
	}
	.note-title-display-card.title-view {
		width: 100%;
		min-height: 20px;
		max-width: none;
		/*box-shadow: 0px 0px 1px 1px rgba(210, 211, 211, 0.46);*/
	}
		
	.single-line-text {
		width: calc(100% - 25px);
		margin: 5px 10px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		box-sizing: border-box;
	}
	.title-line {
		font-weight: bold;
		font-size: 1.2em;
		padding: 0 20px 0 0;
	}

	.icon-bar {
		display: inline-block;
		padding: 5px 10px 0;
		opacity: 1;
		width: 100%;
	}
	.hover-hide {
		opacity: 0.0;
		transition: opacity ease 0.6s;
	}
	.little-tag {
		font-size: 0.7em;
		padding: 5px 5px;
		border: 1px solid var(--border_color);
		margin: 0 3px 5px 0;
		border-radius: 3px;
		white-space: nowrap;
		max-width: 175px;
		overflow: hidden;
		display: inline-block;
		line-height: 0.8em;
		text-overflow: ellipsis;
		float: left;
	}
	.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;
	}

	.note-card-text {
		width: 100%;
		display: inline-block;
		align-self: flex-start;
		flex-grow: 1;
		padding: 10px 10px 0;
	}
	.tool-bar {
		width: 100%;
		display: inline-block;
		align-self: flex-end;
		flex-grow: 0;
	}
	

	.one-column .note-title-display-card {
		width: 100%;
		max-width: none;
		/*margin: 0px -5px 10px -5px;*/
	}
	.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 {
		display: inline-block;
		float: right;
	}

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

	/*Animations for cool border effects*/
	@keyframes bgin {
    	0% {
		    background-image:   
		    linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* TopLeft to Right */
            linear-gradient(to bottom, #21BA45 50%, #21BA45 100%), /* TopRight to Bottom */
            linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* BottomLeft to Right*/
            linear-gradient(to bottom, #21BA45 50%, #21BA45 100%); /* TopLeft to Bottom */
            /*Initial state, no BG*/
	        background-size: 0 4px, 4px 0, 0 4px, 4px 0;
	    }
	    10% {
	    	/*Middre state, some filled */
	        background-size: 100% 4px, 4px 0, 100% 4px, 4px 0;
	    }
	    20% {
	    	/*final state, all filled */
	        background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
	    }
	    30% {
	    	background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
	    	background-image:   
		    linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* TopLeft to Right */
            linear-gradient(to bottom, #21BA45 50%, #21BA45 100%), /* TopRight to Bottom */
            linear-gradient(to right, #21BA45 50%, #21BA45 100%), /* BottomLeft to Right*/
            linear-gradient(to bottom, #21BA45 50%, #21BA45 100%); /* TopLeft to Bottom */
	    }
	    100% {
    	    background-image:
    	    linear-gradient(to right, transparent 50%, transparent 100%), /* TopLeft to Right */
            linear-gradient(to bottom, transparent 50%, transparent 100%), /* TopRight to Bottom */
            linear-gradient(to right, transparent 50%, transparent 100%), /* BottomLeft to Right*/
            linear-gradient(to bottom, transparent 50%, transparent 100%); /* TopLeft to Bottom */
	    }
	}

.bgboy {

	overflow: hidden;
    background-repeat: no-repeat;
    background-size:    100% 0, 0 100%, 100% 0, 0 100%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    animation: bgin 4s cubic-bezier(0.19, 1, 0.22, 1) 1;
}

</style>