<template>
	<section class="settings-account">
		<div class="settings-account__grid">
			<div class="settings-account__fields">
				<label v-html="$t('GENERAL_FULL_NAME')" />
				<small>
					Your full name, displayed publically
				</small>
				<w-input
					v-model="profile.fullName"
				/>

				<label v-html="$t('GENERAL_EMAIL')" />
				<small>
					Your public e-mail address
				</small>
				<w-input
					v-model="profile.email"
				/>

				<label v-html="$t('GENERAL_USERNAME')" />
				<small>
					Your unique username
				</small>
				<w-input
					v-model="profile.username"
				/>

				<label v-html="$t('SETTINGS_PROFILE_BIO')" />
				<small>
					A short description of yourself
				</small>

				<template v-if="isEditingBio">
					<VindiEditor
						ref="bioEditor"
						v-model="profile.bio"
						:placeholder="$t('SETTINGS_PROFILE_BIO_PLACEHOLDER')"
					/>
				</template>
				<div
					v-else
					@click="isEditingBio = true"
				>
					<div
						v-if="profile.bio"
						v-html="renderedBio"
					/>
					<div
						v-else
						class="task-viewer__description-placeholder"
					>
						{{ $t('SETTINGS_PROFILE_BIO_PLACEHOLDER') }}
					</div>
				</div>

				<label v-html="$t('SETTINGS_PROFILE_LOCATION')" />
				<small>
					Your location (optional)
				</small>
				<w-input
					v-model="profile.location"
					:placeholder="$t('SETTINGS_PROFILE_LOCATION_PLACEHOLDER')"
				/>

				<label v-html="$t('SETTINGS_PROFILE_WEBSITE')" />
				<small>
					Your website (optional)
				</small>
				<w-input
					v-model="profile.website"
					:placeholder="$t('SETTINGS_PROFILE_WEBSITE_PLACEHOLDER')"
				/>
			</div>
			<div class="settings-account__uploads">
				<label>
					Avatar
				</label>
				<small>
					Change your public avatar.
				</small>
				<div class="settings-account__avatar">
					<VindiFileUpload
						v-model="profile.avatar"
						class="settings-account__avatar-upload" 
						show-cropper
						:crop-props="{'stencil-props': { aspectRatio: 1 }}"
						:max-size="10485760"
						@preview="showPreview"
					>
						<template #activator="{ on }">
							<img
								class="settings-account__avatar-preview" 
								:src="preview || require('~/assets/img/avatar-placeholder.svg')"
							>
							<w-button
								class="settings-account__avatar-button"
								icon="mdi mdi-pencil"
								bg-color="primary"
								color="white"
								lg
								v-on="on"
							/>
						</template>
					</VindiFileUpload>
				</div>
				<small>
					It is recommended to upload a square image with a maximum size of 256x256 pixels.
				</small>
			</div>
		</div>
	</section>
</template>

<script lang="ts">
import Vue from 'vue';
import { marked } from 'marked';

export default Vue.extend({
	name: 'ProfileTab',

	props: {
		profile: {
			type: Object
		}
	},

	data: () => ({
		isSaving: false,
		isEditingBio: false,
		avatar: null,
		preview: '',
	}),

	computed: {
		renderedBio(): string {
			return this.profile.bio ? marked(this.profile.bio) : '';
		}
	},

	watch: {
		'profile.avatar'(value) {
			this.preview = value || '';
		}
	},
	
	mounted() {
		this.preview = this.profile.avatar || '';
	},

	methods: {
		showPreview(preview: string) {
			this.preview = preview;
		},

		discardBio() {
			this.isEditingBio = false;
			this.profile.bio = this.$store.state.profile.bio;
		}
	}
});
</script>

<style lang="scss">
.settings-account {
	@include padding(2, t);

	&__grid {
		display: flex;
		flex-direction: column;
		gap: 2.5rem;

		@include breakpoint(lg) {
			flex-direction: row;
		}
	}

	&__fields {
		flex: 1;
		
		@include breakpoint(lg) {
			width: 0; // fix spacing issue
		}
	}

	&__uploads {
		width: 200px;
		order: -1;

		@include breakpoint(lg) {
			order: 1;
		}
	}

	&__fields, &__uploads {
		> label:not(:first-child), > .w-divider {
			@include margin(7, t);
		}
	}

	&__avatar {
		@include padding(4, y);

		width: 180px;
		margin: 0 auto;
		position: relative;
	}
	
	&__avatar-preview {
		@include rounded(full);

		width: 100%;
		height: 100%;
	}

	&__avatar-button.w-button {
		@include rounded(full);
		@include shadow;

		right: 0;
		bottom: 0.85rem;
		width: 2.75rem;
		height: 2.75rem;
		position: absolute;
	}

	// appending .w-button fixes prioritization
	&__cover-option.w-button {
		@include rounded(full);
		@include shadow;

		width: 2.75rem;
		height: 2.75rem;
	}
}
</style>