<template>
<div class="mk-welcome">
	<img ref="pointer" class="pointer" src="/assets/pointer.png" alt="">
	<button @click="dark">
		<template v-if="$store.state.device.darkmode">%fa:moon%</template>
		<template v-else>%fa:R moon%</template>
	</button>
	<div class="body" :style="{ backgroundImage: `url('${ welcomeBgUrl }')` }">
		<div class="container">
			<main>
				<div class="about">
					<h1 v-if="name">{{ name }}</h1>
					<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey"></h1>
					<p class="powerd-by" v-if="name">powerd by <b>Misskey</b></p>
					<p class="desc" v-html="description || '%i18n:common.about%'"></p>
					<a ref="signup" @click="signup">📦 %i18n:@signup%</a>
				</div>
				<div class="login">
					<mk-signin/>
				</div>
			</main>
			<div class="info">
				<span>%i18n:common.misskey% <b>{{ host }}</b></span>
				<span class="stats" v-if="stats">
					<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
					<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
				</span>
			</div>
			<mk-nav class="nav"/>
		</div>
		<mk-forkit class="forkit"/>
		<img src="assets/title.dark.svg" alt="Misskey">
	</div>
	<div class="tl">
		<mk-welcome-timeline/>
	</div>
	<modal name="signup" width="500px" height="auto" scrollable>
		<header :class="$style.signupFormHeader">%i18n:@signup%</header>
		<mk-signup :class="$style.signupForm"/>
	</modal>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { host, name, description, copyright, welcomeBgUrl } from '../../../config';

export default Vue.extend({
	data() {
		return {
			stats: null,
			copyright,
			welcomeBgUrl,
			host,
			name,
			description,
			pointerInterval: null
		};
	},
	created() {
		(this as any).api('stats').then(stats => {
			this.stats = stats;
		});
	},
	mounted() {
		this.point();
		this.pointerInterval = setInterval(this.point, 100);
	},
	beforeDestroy() {
		clearInterval(this.pointerInterval);
	},
	methods: {
		point() {
			const x = this.$refs.signup.getBoundingClientRect();
			this.$refs.pointer.style.top = x.top + x.height + 'px';
			this.$refs.pointer.style.left = x.left + 'px';
		},
		signup() {
			this.$modal.show('signup');
		},
		signin() {
			this.$modal.show('signin');
		},
		dark() {
			this.$store.commit('device/set', {
				key: 'darkmode',
				value: !this.$store.state.device.darkmode
			});
		}
	}
});
</script>

<style>
#wait {
	right: auto;
	left: 15px;
}
</style>

<style lang="stylus" scoped>
@import '~const.styl'

root(isDark)
	display flex
	min-height 100vh

	> .pointer
		display block
		position absolute
		z-index 1
		top 0
		right 0
		width 180px
		margin 0 0 0 -180px
		transform rotateY(180deg) translateX(-10px) translateY(-48px)
		pointer-events none

	> button
		position fixed
		z-index 1
		top 0
		left 0
		padding 16px
		font-size 18px
		color #fff

		display none // TODO

	> .body
		flex 1
		padding 64px 0 0 0
		text-align center
		background #578394
		background-position center
		background-size cover

		&:before
			content ''
			display block
			position absolute
			top 0
			left 0
			right 0
			bottom 0
			background rgba(#000, 0.5)

		> .forkit
			position absolute
			top 0
			right 0

		> img
			position absolute
			bottom 16px
			right 16px
			width 150px

		> .container
			$aboutWidth = 380px
			$loginWidth = 340px
			$width = $aboutWidth + $loginWidth

			> main
				display flex
				margin auto
				width $width
				border-radius 8px
				overflow hidden
				box-shadow 0 2px 8px rgba(#000, 0.3)

				> .about
					width $aboutWidth
					color #444
					background #fff

					> h1
						margin 0 0 16px 0
						padding 32px 32px 0 32px
						color #444

						> img
							width 170px
							vertical-align bottom

					> .powerd-by
						margin 16px
						opacity 0.7

					> .desc
						margin 0
						padding 0 32px 16px 32px

					> a
						display inline-block
						margin 0 0 32px 0
						font-weight bold

				> .login
					width $loginWidth
					padding 16px 32px 32px 32px
					background #f5f5f5

			> .info
				margin 16px auto
				padding 12px
				width $width
				font-size 14px
				color #fff
				background rgba(#000, 0.2)
				border-radius 8px

				> .stats
					margin-left 16px
					padding-left 16px
					border-left solid 1px #fff

					> *
						margin-right 16px

			> .nav
				display block
				margin 16px 0
				font-size 14px
				color #fff

	> .tl
		margin 0
		width 410px
		height 100vh
		text-align left
		background isDark ? #313543 : #fff

		> *
			max-height 100%
			overflow auto

.mk-welcome[data-darkmode]
	root(true)

.mk-welcome:not([data-darkmode])
	root(false)

</style>

<style lang="stylus" module>
.signupForm
	padding 24px 48px 48px 48px

.signupFormHeader
	padding 48px 0 12px 0
	margin: 0 48px
	font-size 1.5em
	color #777
	border-bottom solid 1px #eee

.signinForm
	padding 24px 48px 48px 48px

.signinFormHeader
	padding 48px 0 12px 0
	margin: 0 48px
	font-size 1.5em
	color #777
	border-bottom solid 1px #eee

.nav
	a
		color #666
</style>