<template>
	<div class='route_container user_route'>
      <div class="column is-4" style="float: left">
        <div class="box has-text-centered">
          <div class="columns is-vcentered is-mobile">
            <div class="column is-narrow"><h1 class="title">{{username}}</h1></div>
            <b-tooltip v-if='user && user.system' class="is-success" label="This user is a system user operated by administrators that mainly run API operations.">
              &nbsp;
              <b-tag rounded class="is-success">SYSTEM&nbsp;<i class="fas fa-info-circle"></i>&nbsp;</b-tag>
              &nbsp;
            </b-tooltip>
              <b-tooltip v-if='user && user.bot' class="is-info" label="This user is a bot account that can run automated API operations.">
                &nbsp;
                <b-tag rounded class="is-info">BOT&nbsp;<i class="fas fa-info-circle"></i>&nbsp;</b-tag>
                &nbsp;
              </b-tooltip>
            <b-tooltip class="is-primary" label="User is boosting the Kaverti Discord server.">
              <b-tag class="is-primary" rounded v-if='user && user.booster'>BOOSTER&nbsp;<i class="fas fa-info-circle"></i></b-tag>
            </b-tooltip>
              <b-tooltip v-if='user && user.admin' class="is-danger" label="User is an official Kaverti administrator.">
                &nbsp;
                <b-tag rounded class="is-danger">ADMIN&nbsp;<i class="fas fa-info-circle"></i>&nbsp;</b-tag>
                &nbsp;
              </b-tooltip>
              <b-tooltip v-if='user && user.hidden' class="is-info" label="User is not discoverable in the user list.">
                &nbsp;
                <b-tag rounded>HIDDEN&nbsp;<i class="fas fa-info-circle"></i>&nbsp;</b-tag>
                &nbsp;
                <b-tooltip class="is-info" label="User is boosting the Kaverti Discord server.">
                  <b-tag rounded class="is-info" v-if='user && user.booster'>BOOSTER&nbsp;<i class="fas fa-info-circle"></i></b-tag>
                </b-tooltip>
              </b-tooltip>
          </div>
          <figure class="image is-250">
          <img width="250px"
               :src = userPicture
          >
          </figure>
          <div class='user_description' v-if='user && user.description && user.description.length' v-html='user.description'></div>
          <br>
          <div v-if='user'>{{user.createdAt | formatDate('date') }}</div>
          <menu-button
            v-if='$store.state.admin'
            :options='[
					{ event: "scrub_username", value: "Scrub Username" },
					{ event: "scrub_desc", value: "Scrub Description" }
					]'
            @scrub_desc='scrubDesc'
            @scrub_username='scrubUsername'
          >
            <button class='button button--thin_text'>
              <font-awesome-icon :icon='["fa", "cog"]' style='margin-right: 0.25rem;' />
              Manage user
            </button>
          </menu-button>
        </div>
      </div>
    <div class="column is-8" style="float: right">
      <b-button
        class="menu_button"
        :key='"user-menu-item-" + index'
        v-for='(item, index) in menuItems'
        :class="{'user__links__menu_item--selected': index === selected}"
        @click='$router.push(`/user/${username}/${item.route}`)'
      >
        {{item.name}}
      </b-button>
      <br/> <br/>
      <router-view :username='username'></router-view>
    </div>
  </div>
</template>

<script>
	import AjaxErrorHandler from '../../assets/js/errorHandler'
  import MenuButton from '../MenuButton'

  export default {
		name: 'user',
    components: {MenuButton},
		data () {
			return {
				menuItems: [
					{ name: 'Posts', route: 'posts' },
					{ name: 'Threads', route: 'threads' }
        ],
				selected: 0,

				username: this.$route.params.username,
				user: null
			}
		},
		watch: {
			$route (to) {
				this.selected = this.getIndexFromRoute(to.path)
			}
		},
		computed: {
			userColor () {
				if(this.user) {
					return this.user.color
				} else {
					return null
				}
			},
			userPicture () {
				if(this.user && this.user.picture) {
					return 'https://cdn.kaverti.com/user/avatars/full/' + this.user.picture + '.png'
				} else {
					return null
				}
			}
		},
		methods: {
      scrubDesc () {
        this.axios
          .put('/api/v1/admin/user/scrub', {
            description: "descscram",
            user: this.username
          })
          .then(() => {
            this.description.loading = false
          })
          .catch(e => {
            this.description.loading = false

            AjaxErrorHandler(this.$store)(e, error => {
              this.description.error = error.message
            })
          })
        this.$router.go('/user/' + this.username)
      },
      scrubUsername () {
        this.axios
          .put('/api/v1/admin/user/scrub', {
            username: "usernamescram",
            user: this.username
          })
          .then(() => {
            this.description.loading = false
          })
          .catch(e => {
            this.description.loading = false

            AjaxErrorHandler(this.$store)(e, error => {
              this.description.error = error.message
            })
          })
        this.$router.go('/user/' + this.username)
      },
			getIndexFromRoute (path) {
				let selectedIndex
				let route = path.split('/')[3]

				this.menuItems.forEach((item, index) => {
					if(item.route === route) {
						selectedIndex = index
					}
				})

				return selectedIndex
			}
		},
		created () {
			this.selected = this.getIndexFromRoute(this.$route.path)

			this.axios
				.get(`/api/v1/user/${this.$route.params.username}`)
				.then(res => this.user = res.data)
				.catch(e => {
					let invalidId = e.response.data.errors.find(error => {
						return error.name === 'accountDoesNotExist'
					})

					if(invalidId) {
						this.$store.commit('set404Page', true)
					} else {
						AjaxErrorHandler(this.$store)(e)
					}
				})
		}
	}
</script>

<style lang='scss' scoped>
	@import '../../assets/scss/variables.scss';

	.user_route {
		width: 70%;
	}

	.user_header {
		display: flex;
		align-items: flex-start;
		margin-bottom: 1.5rem;
		background-color: #fff;
		padding: 1rem;
		border-radius: 0.25rem;
		border: thin solid $color__gray--darker;

		@at-root #{&}__icon {
			height: 6rem;
			width: 6rem;
			line-height: 5.5rem;
			@include text($font--role-emphasis, 5rem);
			text-align: center;
			background-color: $color__gray--darkest;
			color: #fff;
		}
		@at-root #{&}__info {
			display: flex;
			flex-direction: column;
			margin-left: 1rem;
			width: calc(100% - 6rem);
		}
		@at-root #{&}__username {
			margin-top: -0.25rem;
			font-size: 2rem;
			font-weight: bold
		}
		@at-root #{&}__date {
			color: $color__darkgray--primary;
			font-size: 1.5rem;
		}
	}
	.user_description {
		white-space: pre-line;
		margin-top: 0.5rem;
	}
	.user__view_holder {
		display: flex;
		flex-direction: row;
	}
	.user__links {
		width: 8rem;
		display: table;

		@at-root #{&}__menu_item {
			cursor: pointer;
			margin-bottom: 0.5rem;
			position: relative;

			&:hover { color: $color__darkgray--primary; }

			@at-root #{&}--selected {
				font-weight: bold;
			}
		}
	}
  .menu_button {
    margin: 2px;
  }
	.user__view {
		flex-grow: 1;
		width: 0;
	}

	@media (max-width: $breakpoint--tablet) {
		.user_route {
			width: inherit;
			overflow-x: hidden;
		}
		.user__view_holder {
			flex-direction: column;
		}
		.user_header {
			@at-root #{&}__icon {
				height: 250px;
				width: 50px;
			}
			@at-root #{&}__username {
				font-size: 1.75rem;
			}
			@at-root #{&}__date {
				font-size: 1.25rem;
			}
		}
		.user__links {
			display: flex;
			flex-direction: row;

			@at-root #{&}__menu_item {
				margin-right: 0.5rem;

				&:hover {
					color: $color__text--primary;
				}

				@at-root #{&}--selected::before {
					width: 100%;
					height: 0.2rem;
					left: 0rem;
					top: auto;
					border-radius: 1rem;
					bottom: -0.375rem;
				}
			}
		}
		.user__view {
			width: auto;
		}
	}
</style>
