TheoryOfNekomata
/
bruhbot


			
				
					
						
						
							
							import Head from 'next/head';
import Link from 'next/link';
import styled, {createGlobalStyle} from 'styled-components';
import {Folder, Settings, Trash2} from 'react-feather';
import Button from '../../molecules/Button';
import TopBar from '../../organisms/widgets/TopBar';
import FolderItem from '../../organisms/tree/FolderItem';
import FolderViewMode from '../../../models/FolderViewMode';
import TextInput from '../../molecules/TextInput';
import {forClientSideState, Form} from '../../../utilities/handler';
import Method from '../../../utilities/handler/Method';
import {useRouter} from 'next/router';

const Variables = createGlobalStyle({
	':root': {
		'--size-sidebar': '360px',
	},
})

const Container = styled('div')({
	maxWidth: 720,
	padding: '0 1rem',
	boxSizing: 'border-box',
})

const SideBar = styled('div')({
	width: 'calc(50% - var(--size-sidebar) * 0.5)',
	backgroundColor: 'var(--color-bg, white)',
	position: 'fixed',
	top: 0,
	left: 0,
	height: '100%',
})

const SideBarContainer = styled('div')({
	marginLeft: 'auto',
	width: 'var(--size-sidebar)',
})

const Main = styled('div')({
	paddingLeft: 'calc(50% - var(--size-sidebar) * 0.5)',
})

const FolderInfoContainer = styled(Container)({
	display: 'flex',
	justifyContent: 'space-between',
	height: '4rem',
	alignItems: 'center',
})

const SidebarLink = styled('a')({
	display: 'flex',
	height: '4rem',
	alignItems: 'center',
})

const InnerSidebar = styled('div')({
	width: 'calc(var(--size-sidebar) - 4rem)',
	height: '100%',
	position: 'absolute',
	top: 0,
	right: 0,
	backgroundColor: 'var(--color-bg, white)',
})

const SideBarIcon = styled('div')({
	width: '4rem',
	height: '4rem',
	display: 'grid',
	placeContent: 'center',
})

const SidebarContents = styled('div')({
	width: '100%',
	height: '100%',
	position: 'relative',
})

const FolderListWrapper = styled('div')({
	width: '100%',
	height: '100%',
	overflow: 'auto',
})

const FolderList = styled('ul')({
	margin: 0,
	padding: 0,
})

const FolderListItem = styled('li')({
	display: 'block',
})

const FolderActions = styled('div')({
	position: 'sticky',
	display: 'flex',
	justifyContent: 'flex-end',
	alignItems: 'center',
	top: 0,
	left: 0,
	width: '100%',
	height: '4rem',
	backgroundColor: 'var(--color-bg, white)',
	padding: '0 1rem',
	boxSizing: 'border-box',
})

const FolderLink = styled('a')({
	display: 'inline-flex',
	minWidth: '100%',
	verticalAlign: 'top',
	height: '3rem',
	alignItems: 'center',
	whiteSpace: 'nowrap',
	padding: '0 1rem',
	boxSizing: 'border-box',
})

const FolderGrid = styled('div')({
	display: 'grid',
	gridTemplateColumns: 'repeat(3, 1fr)',
	gap: '0.5rem',
	margin: '2rem 0 4rem',
})

const FolderGridCell = styled('div')({
	paddingBottom: '100%',
	position: 'relative',
})

const FolderGridContents = styled('div')({
	position: 'absolute',
	top: 0,
	left: 0,
	width: '100%',
	height: '100%',
})

const Header = styled('div')({
	position: 'sticky',
	top: 'var(--size-topbar)',
	left: 0,
	width: '100%',
	zIndex: 2,
	backgroundColor: 'var(--color-bg, white)',
})

const FolderIdInput = styled('input')({
	fontFamily: 'monospace',
	fontSize: '0.875rem',
	display: 'block',
	width: '20em',
	border: 0,
	backgroundColor: 'transparent',
	color: 'inherit',
	padding: 0,
	margin: 0,
	outline: 0,
})

const FolderIdBox = styled('span')({
	display: 'inline-block',
	verticalAlign: 'middle',
})

const FolderTemplate = ({
	query,
	children,
	items = [],
	mode,
	hierarchy,
}) => {
	const router = useRouter()
	const [currentFolder] = hierarchy.slice(-1)
	return (
		<>
			<Head>
				<title>
					{currentFolder.name} | Bruhbot
				</title>
				<link rel="icon" href="/favicon.ico" />
			</Head>
			<Variables />
			<TopBar
				query={query}
			/>
			<SideBar>
				<SidebarContents>
					<Link
						href={{
							pathname: '/my/folders',
						}}
						passHref
					>
						<SidebarLink>
							<SideBarContainer>
								<SideBarIcon>
									<Folder />
								</SideBarIcon>
							</SideBarContainer>
						</SidebarLink>
					</Link>
					<Link
						href={{
							pathname: '/my/bin',
						}}
						passHref
					>
						<SidebarLink>
							<SideBarContainer>
								<SideBarIcon>
									<Trash2 />
								</SideBarIcon>
							</SideBarContainer>
						</SidebarLink>
					</Link>
					<Link
						href={{
							pathname: '/my/settings',
						}}
						passHref
					>
						<SidebarLink>
							<SideBarContainer>
								<SideBarIcon>
									<Settings />
								</SideBarIcon>
							</SideBarContainer>
						</SidebarLink>
					</Link>
					<InnerSidebar>
						<FolderListWrapper>
							<FolderActions>
								<form
									action="/api/a/folders/new"
									method={Method.GET}
									onSubmit={forClientSideState({ router, })(() => {

									})}
								>
									{(
										<Button
											type="submit"
										>
											New Folder
										</Button>
									)}
								</form>
							</FolderActions>
							{
								mode === FolderViewMode.NEW_FOLDER
								&& (
									<FolderList>
										<form
											action="/api/a/folders/create"
											method={Method.POST}
										>
											<input
												type="hidden"
												name="parent_id"
												value={currentFolder.id}
											/>
											<TextInput
												name="name"
											/>
											<Button>
												Create
											</Button>
										</form>
									</FolderList>
								)
							}
							<FolderList>
								{children.map(c => (
									<FolderListItem
										key={c.id}
									>
										<Link
											href={{
												pathname: '/my/folders/[id]',
												query: {
													id: c.id,
												},
											}}
											passHref
										>
											<FolderLink>
												{c.name}
											</FolderLink>
										</Link>
									</FolderListItem>
								))}
							</FolderList>
						</FolderListWrapper>
					</InnerSidebar>
				</SidebarContents>
			</SideBar>
			<Main>
				<Header>
					<FolderInfoContainer>
						<div>
							{hierarchy.map(h => (
								<>
									{'/ '}
									<Link
										href={{
											pathname: '/my/folders/[id]',
											query: {
												id: h.id,
											},
										}}
									>
										<a>
											{h.name}
										</a>
									</Link>
									{' '}
								</>
							))}
						</div>
						<div>
							<FolderIdBox>
								Folder ID
								<FolderIdInput
									readOnly
									value={currentFolder.id}
								/>
							</FolderIdBox>
							<Button>
								Delete
							</Button>
						</div>
					</FolderInfoContainer>
				</Header>
				<Container>
					{
						Array.isArray(items)
						&& items.length < 1
						&& (
							<>
								This folder is empty.
							</>
						)
					}
					{
						Array.isArray(items)
						&& items.length > 0
						&& (
							<FolderGrid>
								{
									items.map(i => (
										<FolderGridCell
											key={i.id}
										>
											<FolderGridContents>
												<FolderItem
													name={i.name}
													url={i.url}
												/>
											</FolderGridContents>
										</FolderGridCell>
									))
								}
							</FolderGrid>
						)
					}
				</Container>
			</Main>
		</>
	)
}

export default FolderTemplate