import React, { Fragment, useEffect, useRef, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { Link, useNavigate } from 'react-router-dom';
import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/views/Home.styled';
import BoardAvatar from '../BoardAvatar';
import OfflineIndicator from '../OfflineIndicator';
import CreateBoardModal from '../modals/CreateBoardModal';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json';
import { Tooltip } from 'react-tooltip';
const { version } = packageJson;
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';

const SubplebbitTitle = ({ address }) => {
	const subplebbitAddress = address;
	const subplebbit = useSubplebbit({ subplebbitAddress });
	const title = subplebbit.title ?? null;

	return <>{title ? <span>{title}</span> : <span style={{ userSelect: 'none' }}>&nbsp;</span>}</>;
};

const Home = () => {
	const { bodyStyle, setBodyStyle, defaultSubplebbits, setSelectedAddress, selectedStyle, setSelectedStyle, setSelectedTitle } = useGeneralStore((state) => state);

	const account = useAccount();
	const navigate = useNavigate();

	const inputRef = useRef(null);
	const prevStyle = useRef(selectedStyle);
	const prevBodyStyle = useRef(bodyStyle);

	const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);

	// prevent dark mode
	useEffect(() => {
		const currentPrevStyle = prevStyle.current;
		const currentPrevBodyStyle = prevBodyStyle.current;

		setBodyStyle({
			background: '#ffe url(assets/fade.png) top repeat-x',
			color: 'maroon',
			fontFamily: 'Helvetica, Arial, sans-serif',
		});
		setSelectedStyle('Yotsuba');

		return () => {
			setSelectedStyle(currentPrevStyle);
			setBodyStyle(currentPrevBodyStyle);
		};
	}, [setBodyStyle, setSelectedStyle]);

	return (
		<>
			<CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
			<Helmet>
				<title>plebchan</title>
			</Helmet>
			<Container>
				<Tooltip id='tooltip' className='tooltip' />
				<Header>
					<Logo>
						<Link to='/'>
							<img alt='plebchan' src='assets/logo/logo-transparent.png' />
						</Link>
					</Logo>
				</Header>
				<Page>
					<Search>
						<input
							type='text'
							placeholder='"board.eth" or "12D3KooW..."'
							ref={inputRef}
							onKeyDown={(event) => {
								if (event.key === 'Enter') {
									event.preventDefault();
									const address = inputRef.current.value;
									if (address) {
										setSelectedAddress(address);
										navigate(`/p/${address}`);
									}
								}
							}}
						/>
						<input
							type='submit'
							value='Search'
							onClick={() => {
								const address = inputRef.current.value;
								if (address) {
									setSelectedAddress(address);
									navigate(`/p/${address}`);
								}
							}}
						/>
					</Search>
					<About>
						<AboutTitle>
							<h2>What is plebchan?</h2>
						</AboutTitle>
						<AboutContent>
							<div id='content'>
								<p>
									Plebchan is the only serverless, adminless, fully decentralized 4chan alternative where any pleb can create and own unlimited boards, and nobody can
									take them down. Boards can always find competition, and board owners can monetize freely, so janitors aren't needed. Plebchan is a client for{' '}
									<a href='https://plebbit.com' target='_blank' rel='noreferrer'>
										plebbit
									</a>
									, a pure P2P protocol and tooling for creating decentralized forum applications. All data is just text, and plebchan's speed depends on how many users
									are{' '}
									<button
										style={{ all: 'unset', cursor: 'pointer' }}
										onClick={() => {
											alert(
												'You can seed automatically simply by using the plebchan desktop app, which is a plebbit full node. Download it here:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can use plebbit-cli with the --seed flag:\nhttps://github.com/plebbit/plebbit-cli\n\n',
											);
										}}
									>
										seeding
									</button>
									. Search for any board address above, or feel free to click on a popular board below that interests you and jump right in!{' '}
								</p>
								<br />
								<p>There are no global rules, each board is completely independent and its owner decides how/if it should be moderated.</p>
								<br />
								<p>
									{' '}
									HOW TO RUN A BOARD (currently via CLI only): <strong>(1)</strong> have a computer you can use as server, because users will connect to your board
									peer-to-peer; <strong>(2)</strong> go to{' '}
									<a href='https://github.com/plebbit/plebbit-cli#install' target='_blank' rel='noreferrer'>
										https://github.com/plebbit/plebbit-cli#install
									</a>{' '}
									and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings; <strong>(3)</strong> users can always connect to your
									board via its address, but it can be whitelisted by submitting a pull request here:{' '}
									<a href='https://github.com/plebbit/temporary-default-subplebbits' target='_blank' rel='noreferrer'>
										https://github.com/plebbit/temporary-default-subplebbits
									</a>{' '}
									this will be automated with a plebbit DAO using the plebbit token.
								</p>
							</div>
						</AboutContent>
					</About>
					{account?.subscriptions?.length > 0 ? (
						<Boards>
							<BoardsTitle>
								<h2>Subscriptions</h2>
							</BoardsTitle>
							<BoardsContent id='subscriptions'>
								<h3 style={{ textDecoration: 'underline', display: 'inline' }}>
									You have subscribed to {account?.subscriptions?.length} board{account?.subscriptions?.length > 1 ? 's' : null}
								</h3>
								&nbsp;
								<Link
									to='/p/subscriptions'
									id='view-all'
									onClick={() => {
										window.scrollTo(0, 0);
									}}
								>
									[view all]
								</Link>
								<br />
								{account?.subscriptions?.map((subscription, index) => (
									<Fragment key={`frag-${index}`}>
										<Link
											key={`sub-${index}`}
											className='boardlink'
											onClick={() => {
												window.scrollTo(0, 0);
											}}
											to={`/p/${subscription}`}
										>
											<br id='mobile-br' />
											{subscription}&nbsp;
										</Link>
										<OfflineIndicator key={`offline-${index}`} address={subscription} className='disconnected' isText={true} />
										<br key={`br-${index}`} />
									</Fragment>
								))}
								<br id='mobile-br' />
							</BoardsContent>
						</Boards>
					) : null}
					<Boards>
						<BoardsTitle>
							<h2>Whitelisted Boards</h2>
						</BoardsTitle>
						<BoardsContent>
							{defaultSubplebbits.map((subplebbit, index) => (
								<div className='board' key={`board-${index}`}>
									<div className='board-title' key='board-title'>
										{subplebbit.title ?? <SubplebbitTitle address={subplebbit.address} />}
									</div>
									<div className='board-avatar-container' key='board-avatar-container'>
										<Link
											to={`/p/${subplebbit.address}`}
											key='link'
											onClick={() => {
												setSelectedTitle(subplebbit.title);
												setSelectedAddress(subplebbit.address);
												window.scrollTo(0, 0);
											}}
										>
											<BoardAvatar key='baordavatar' address={subplebbit.address} />
										</Link>
										<OfflineIndicator address={subplebbit.address} className='offline-indicator' tooltipPlace='top' key='oi2' />
									</div>
									<div className='board-text' key='bt'>
										<b key='b'>{subplebbit.address}</b>
									</div>
								</div>
							))}
						</BoardsContent>
					</Boards>
				</Page>
				<Footer>
					<ul>
						<li className='fill'></li>
						<li className='first'>
							<a href='https://etherscan.io/token/0xEA81DaB2e0EcBc6B5c4172DE4c22B6Ef6E55Bd8f' target='_blank' rel='noopener noreferrer'>
								Token
							</a>
						</li>
						<li>
							<a href='https://gitcoin.co/grants/5515/plebbit-a-serverless-adminless-decentralized-redd' target='_blank' rel='noopener noreferrer'>
								Donate
							</a>
						</li>
						<li>
							<a href='https://github.com/plebbit/whitepaper/discussions/2' target='_blank' rel='noopener noreferrer'>
								Whitepaper
							</a>
						</li>
						<li>
							<a href='https://github.com/plebbit/plebchan' target='_blank' rel='noopener noreferrer'>
								GitHub
							</a>
						</li>
						<li>
							<a href='https://matrix.to/#/#plebbit:plebbitchat.org' target='_blank' rel='noopener noreferrer'>
								Matrix
							</a>
						</li>
						<li>
							<a href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>
								Telegram
							</a>
						</li>
						<li>
							<a href='https://twitter.com/plebchan_eth' target='_blank' rel='noopener noreferrer'>
								Twitter
							</a>
						</li>
						<li>
							<a href='https://discord.gg/E7ejphwzGW' target='_blank' rel='noopener noreferrer'>
								Discord
							</a>
						</li>
					</ul>
				</Footer>
				<div
					style={{
						textAlign: 'center',
						fontSize: '11px',
						marginBottom: '2em',
					}}
				>
					plebchan v{version}
					{commitRef}. GPL-2.0
				</div>
			</Container>
		</>
	);
};

export default Home;
