<template>
	<div class='admin_moderation'>
		<div class='admin_moderation__header'>
			<moderation-header selected-tab='bans'></moderation-header>
			<button class='button button--blue' @click='toggleShowAddNewBanModal'>Add new ban</button>
		</div>

		<transition name='fade' mode='out-in'>
			<loading-message v-if='!bans' key='loading'></loading-message>

			<table class='admin_moderation__table' v-else-if='bans.length' key='bans'>
				<tr>
					<th>User</th>
					<th>Ban type</th>
					<th>Date banned</th>
					<th>Message</th>
					<th>Action</th>
				</tr>
				<tr :key='"ban-row-" + $index' v-for='(ban, $index) in bans'>
					<td>{{ban.User.username}}</td>
					<td>{{ban.type}}</td>
					<td>{{ban.createdAt | formatDate}}</td>
					<td>
						<template v-if='ban.message'>{{ban.message}}</template>
						<i v-else>No message given</i>
					</td>
					<td>
						<button
							class='button button--red'
							@click='deleteBan(ban, $index)'
						>
							Delete ban
						</button>
					</td>
				</tr>
			</table>

			<div class='overlay_message' v-else key='no bans'>
				<font-awesome-icon :icon='["fa", "thumbs-up"]' />
				No banned users
			</div>
		</transition>

		<modal-window
			v-model='$store.state.moderation.showAddNewBanModal'
			width='30rem'
			:no-padding='true'
		>
      <div slot="header">
        <h3>Ban a user</h3>
      </div>
			<div class='admin_moderation__add_new_ban_modal' slot='main'>
				<div
					class='admin_moderation__add_new_ban_modal__overlay'
					:class='{ "admin_moderation__add_new_ban_modal__overlay--show": loading }'
				>
					<loading-icon></loading-icon>
				</div>
        <p>Search for the user to ban, then select the relevant ban type for the user</p>

				<form @submit.prevent='addBan'>
					<div>
						<fancy-input
							placeholder='Username to ban'
							v-model='$store.state.moderation.username'
							width='15rem'
							:large='true'
						></fancy-input>
					</div>

					<div>
						<fancy-input
							placeholder='Message to user (optional)'
							v-model='$store.state.moderation.message'
							width='15rem'
							:large='true'
						></fancy-input>
					</div>

					<div>
						<select-button
							:options='$store.state.moderation.options'
							name='test'
							v-model='$store.state.moderation.selectedOption'
						>
						</select-button>
					</div>

					<input type='submit' style='display: none;' />
				</form>
			</div>
			<div slot='footer'>
				<button
					class='button button--modal button--green'
					@click='addBan'
				>
					Add ban
				</button>
				<button
					class='button button--modal'
					@click='toggleShowAddNewBanModal'
				>
					Cancel
				</button>
			</div>
		</modal-window>
	</div>
</template>

<script>
	import ModalWindow from '../ModalWindow'
	import FancyInput from '../FancyInput'
	import SelectButton from '../SelectButton'
	import ModerationHeader from '../ModerationHeader'
	import LoadingIcon from '../LoadingIcon'
	import LoadingMessage from '../LoadingMessage'

	import AjaxErrorHandler from '../../assets/js/errorHandler'

	export default {
		name: 'AdminDashboard',
		components: {
			ModalWindow,
			FancyInput,
			SelectButton,
			ModerationHeader,
			LoadingIcon,
			LoadingMessage
		},
		data () {
			return {
				loading: false,
				bans_: null
			}
		},
		computed: {
			bans () {
				if(!this.bans_) return null

				return this.bans_.map(ban => {
					if(ban.ipBanned) {
						ban.type = 'IP banned'
          } else if(ban.ReadOnlyMode) {
            ban.type = 'Read Only Mode (recommended)'
					} else {
						ban.type = 'Read Only Mode (recommended)'
					}

					return ban
				})
			}
		},
		methods: {
			toggleShowAddNewBanModal () {
				this.$store.commit(
					'moderation/setModal',
					!this.$store.state.moderation.showAddNewBanModal
				)
				this.$store.dispatch('moderation/clearModal')
			},
			addBan () {
				let store = this.$store.state.moderation

				let obj = { username: store.username }
				if(store.message.trim().length) {
					obj.message = store.message
				}
				if(store.selectedOption === 'both') {
					obj.ReadOnlyMode = true
					obj.ipBanned = true
				} else if(store.selectedOption === 'ReadOnlyMode') {
					obj.ReadOnlyMode = true
				} else if(store.selectedOption === 'ipBanned') {
					obj.ipBanned = true
				} else {
					obj.ReadOnlyMode = true
				}

				this.loading = true

				this.axios
					.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/ban', obj)
					.then(res => {
						this.loading = false
						this.bans_.push(res.data)
						this.toggleShowAddNewBanModal()
						this.$store.dispatch('moderation/clearModal')
					})
					.catch(e => {
						this.loading = false
						AjaxErrorHandler(this.$store)(e)
					})
			},
			deleteBan (ban, index) {
				this.axios
					.delete(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/ban/' + ban.id)
					.then(() => {
						this.bans_.splice(index, 1)
					})
					.catch(AjaxErrorHandler(this.$store))
			}
		},
		mounted () {
			this.$store.dispatch('setTitle', '')
			this.axios
				.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'admin/ban')
				.then(res => {
					this.bans_ = res.data
				})
				.catch(AjaxErrorHandler(this.$store))
		}
	}
</script>

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

	.admin_moderation {
		padding: 2rem;
		padding-top: 1rem;


		@at-root #{&}__header {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			button {
				margin-bottom: 1.2rem;
			}
		}

		@at-root #{&}__add_new_ban_modal {
			padding: 1rem;

			@at-root #{&}__overlay {
				margin-left: -1rem;
				@include loading-overlay(rgba(0, 0, 0, 0.3), 0.125rem);
			}

			h2 {
				padding: 0;
				margin: 0;
				margin-bottom: -0.5rem;
			}
		}

		@at-root #{&}__table {
			width: calc(100%);
			overflow: hidden;
			margin-top: 1rem;
			padding: 0.5rem;
			background-color: #fff;
			border-radius: 0.25rem;
			border-collapse: collapse;

			border: thin solid $color__gray--darker;

			td, th {
				padding: 0.5rem;
			}
			th {
				text-align: left;
			}
			tr:nth-child(even) {
				background-color: $color__lightgray--darker;
			}

		}
	}
</style>
