import {LeftSidebarWithMenu} from '@theoryofnekomata/viewfinder';
import Brand from '../../../molecules/brand/Brand';
import Link from '../../../molecules/navigation/Link';
import OmnisearchForm from '../../forms/Omnisearch';
import {moreLinkMenuItem, sidebarMenuItems} from '../../../../data/layout';
import {FC, FormEventHandler} from 'react';
import {Session} from '@auth0/nextjs-auth0';
import styled from 'styled-components';
import Avatar from '../../../molecules/presentation/Avatar';

const TopBarComponent = styled('div')({
	backgroundColor: 'var(--color-bg, white)',
	position: 'relative',
	'::before': {
		content: "''",
		position: 'absolute',
		bottom: 0,
		left: 0,
		width: '100%',
		height: '0.0625rem',
		pointerEvents: 'none',
		backgroundColor: 'currentcolor',
		opacity: 0.25,
	},
})

const SidebarMenuComponent = styled('div')({
	backgroundColor: 'var(--color-bg, white)',
	'::before': {
		content: "''",
		position: 'absolute',
		top: 0,
		right: 0,
		height: '100%',
		width: '0.0625rem',
		pointerEvents: 'none',
		backgroundColor: 'currentcolor',
		opacity: 0.25,
	},
})

type Props = {
	onSearch?: FormEventHandler,
	session?: Partial<Session>,
}

const BasicLayout: FC<Props> = ({
	onSearch,
	session,
	children,
}) => {
	return (
		<LeftSidebarWithMenu.Layout
			brand={
				<Brand />
			}
			userLink={
				<Link
					href={{
						query: {
							popup: 'user',
						},
					}}
				>
					<Avatar
						src={session.user.picture}
					/>
				</Link>
			}
			topBarComponent={TopBarComponent}
			sidebarMenuComponent={SidebarMenuComponent}
			topBarCenter={
				<OmnisearchForm
					labels={{
						form: 'Search',
						query: 'Query',
					}}
					onSubmit={onSearch}
					action="/api/a/search"
				/>
			}
			linkComponent={({ url, icon, label, }) => (
				<Link
					href={url}
				>
					<LeftSidebarWithMenu.SidebarMenuContainer>
						<LeftSidebarWithMenu.SidebarMenuItemIcon>
							{icon}
						</LeftSidebarWithMenu.SidebarMenuItemIcon>
						{label}
					</LeftSidebarWithMenu.SidebarMenuContainer>
				</Link>
			)}
			moreLinkMenuItem={moreLinkMenuItem}
			moreLinkComponent={({ url, icon, label, }) => (
				<Link
					href={url}
				>
					<LeftSidebarWithMenu.MoreSidebarMenuContainer>
						<LeftSidebarWithMenu.MoreSidebarMenuItemIcon>
							{icon}
						</LeftSidebarWithMenu.MoreSidebarMenuItemIcon>
						{label}
					</LeftSidebarWithMenu.MoreSidebarMenuContainer>
				</Link>
			)}
			sidebarMenuItems={sidebarMenuItems}
		>
			{children}
		</LeftSidebarWithMenu.Layout>
	)
}

export default BasicLayout