import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

import { LoginForm } from '../components/LoginForm';
import styled from 'styled-components';
import { useSelector } from '../store';
import { IsMobileProp } from '../misc/is-mobile-prop';
import Twemoji from 'react-twemoji';
import { useAnnouncements } from '../hooks/useAnnouncements';

const Hero = styled.div<IsMobileProp>`
	display: flex;
	position: relative;
	background: linear-gradient(-135deg, rgb(1, 169, 46), rgb(134, 179, 0) 35%);
	color: var(--white);
	padding: ${f => f.isMobile ? '16px' : '60px 90px'};
	overflow: hidden;
	gap: var(--margin);
	> .hero {
		flex: 2;
		min-width: 0;
		position: relative;
		z-index: 1000;
		p {
			${f => f.isMobile ? 'font-size: 1rem;' : ''}
		}
	}
	> .announcements {
		flex: 1;
		min-width: 0;
		max-height: 512px;
		overflow: auto;
		padding: var(--margin);
		border-radius: var(--radius);
		background: var(--black-50);
		backdrop-filter: blur(4px) brightness(120%);
		z-index: 1000;
		@media screen and (max-width: 800px) {
			display: none;
		}
	}
	> .rects {
		position: absolute;
		display: grid;
		right: 160px;
		bottom: -120px;
		width: 400px;
		height: 400px;
		gap: 8px;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		transform-origin: center center;
		transform: rotate(45deg);
		opacity: 0.5;
		> .rect {
			border: 2px solid var(--white);
			border-radius: 24px;
			box-shadow: 0 2px 4px var(--shadow-color);
		}
	}
`;

const FormWrapper = styled.div`
	max-width: 500px;
	color: var(--fg);
`;

export const IndexWelcomePage: React.VFC = () => {
	const {isMobile} = useSelector(state => state.screen);
	const {t} = useTranslation();

	const announcements = useAnnouncements();

	return (
		<>
			<Hero className="fluid shadow-2" isMobile={isMobile}>
				<div className="hero">
					<h1 className="shadow-t">{t('title')}</h1>
					<p className="shadow-t">{t('description1')}</p>
					<p className="shadow-t">{t('description2')}</p>
					<FormWrapper className="bg-panel pa-2 mt-4 rounded shadow-2">
						<LoginForm />
					</FormWrapper>
				</div>
				<div className="announcements">
					<h2><i className="fas fa-bell"></i> {t('announcements')}</h2>
					<div className="menu xmenu">
						{announcements.map(a => (
							<Link className="item fluid" key={a.id} to={`/announcements/${a.id}`}>
								{a.title}
							</Link>
						))}
					</div>
				</div>
				<div className="rects">
					<div className="rect"></div>
					<div className="rect"></div>
					<div className="rect"></div>
					<div className="rect"></div>
				</div>
			</Hero>
			<Twemoji options={{className: 'twemoji'}}>
				<div className="py-4 text-125 text-center">
					👍&emsp;❤&emsp;😆&emsp;🎉&emsp;🍮
				</div>
			</Twemoji>
			<article className="xarticle vstack pa-2">
				<header>
					<h2>{t('_welcome.title')}</h2>
					<p>{t('_welcome.description')}</p>
				</header>
				<div className="row">
					<article className="col-4 col-12-sm">
						<h3><i className="fas fa-bullhorn"/> {t('_welcome.misshaiAlertTitle')}</h3>
						<p>{t('_welcome.misshaiAlertDescription')}</p>
					</article>
					<article className="col-4 col-12-sm">
						<h3><i className="fas fa-ranking-star"/> {t('_missHai.ranking')}</h3>
						<p>{t('_welcome.misshaiRankingDescription')}</p>
						<Link to="/apps/miss-hai/ranking">{t('_missHai.showRanking')}</Link>
					</article>
					<article className="col-4 col-12-sm">
						<h3><i className="fas fa-crop-simple"/> {t('catAdjuster')}</h3>
						<p>{t('_welcome.catAdjusterDescription')}</p>
					</article>
				</div>
				<article className="mt-5">
					<h3>{t('_welcome.nextFeaturesTitle')}</h3>
					<p>{t('_welcome.nextFeaturesDescription')}</p>
				</article>
			</article>
		</>
	);
};
