import {styled} from "@qinetik/emotion";
import {createSignal, Show} from "solid-js";
import {Anique, AppBar, DrawerItem, IconButton, LabeledCheckbox, MenuItem, Row, StaticDrawer} from "@qinetik/anique";
import {Scaffold} from "@qinetik/anique/scaffold";
import {MoreVertIcon} from "@qinetik/anique-icons";
import {DropdownMenu} from "@qinetik/anique/dropdown";
import {AniqueThemeAutoSetup, ColorScheme, saveThemeIntoLocalStorage} from "@qinetik/anique/theme";
import Menu from "../../../../solid/icons/Menu";
import LightDarkIcon from "../../../../solid/icons/LightDarkIcon";
const MobileIconButton = styled(IconButton)`
${Anique.breakpoints.up("md")} {
display: none;
}
`
function DemoFooter() {
return (
<div style={{width: "100%", height: "200px"}}>
This is my footer
</div>
)
}
export default function ScaffoldExample() {
const [mobileDrawerOpen, setMobileDrawerOpen] = createSignal(false)
let content: string[] = []
for (let i = 1; i <= 500; i++) {
content = [...content, `Content ${i}`]
}
const [hasTopBar, setHasTopBar] = createSignal(true)
const [hasLeftSidebar, setHasLeftSidebar] = createSignal(true)
const [hasRightSidebar, setHasRightSidebar] = createSignal(true)
const [dropdown, setDropdown] = createSignal(false)
return (
<>
<AniqueThemeAutoSetup/>
<Scaffold
topBar={hasTopBar() ? (() => (
<AppBar
navIcon={() => (
<IconButton onClick={() => setMobileDrawerOpen((e) => !e)}>
<Menu/>
</IconButton>
)}
title={"Scaffold Demo"}
actions={
<Row gap={"0.5em"}>
<LabeledCheckbox
label={"Left Sidebar"}
isChecked={hasLeftSidebar}
onChange={(e) => setHasLeftSidebar(e)}
/>
<LabeledCheckbox
label={"Right Sidebar"}
isChecked={hasRightSidebar}
onChange={(e) => setHasRightSidebar(e)}
/>
<ThemeSwitcher />
<div style={{position: "relative"}}>
<IconButton onClick={() => setDropdown((e) => !e)}>
<MoreVertIcon/>
</IconButton>
<Show when={dropdown()}>
<DropdownMenu style={{right: "0"}} onCloseRequest={() => setDropdown(false)}>
<MenuItem>Demo Dropdown</MenuItem>
</DropdownMenu>
</Show>
</div>
</Row>
}
/>
)) : undefined}
drawerContent={hasLeftSidebar() ? () => <DemoStaticDrawer mobile={false}/> : undefined}
drawerWidth={"300px"}
oppositeDrawerWidth={"300px"}
oppositeDrawerContent={hasRightSidebar() ? () => <DemoStaticDrawer mobile={false}/> : undefined}
showMobileDrawer={mobileDrawerOpen}
mobileDrawerContent={() => <DemoStaticDrawer mobile={true}/>}
onDismissMobileDrawer={() => setMobileDrawerOpen(false)}
>
{/*{!hasTopBar() ? (*/}
{/* <LabeledCheckbox*/}
{/* label={"App Bar"}*/}
{/* description={"Note that Currently AppBar works best if turned off from code"}*/}
{/* isChecked={() => false}*/}
{/* onChange={(e) => setHasTopBar(e)}*/}
{/* />*/}
{/*) : null}*/}
{content.map(e => <div>{e}</div>)}
<DemoFooter/>
</Scaffold>
</>
)
}
function DemoStaticDrawer(props: { mobile: boolean }) {
let content: string[] = []
for (let i = 1; i <= 25; i++) {
content = [...content, `Content ${i}`]
}
return (
<StaticDrawer>
<DrawerItem isActive={true}>
The Chosen One
</DrawerItem>
<Show when={props.mobile}>
<DrawerItem>
Second Something
</DrawerItem>
<DrawerItem>
Third Something
</DrawerItem>
<DrawerItem>
Fourth Something
</DrawerItem>
</Show>
{content.map(e => <DrawerItem>{e}</DrawerItem>)}
</StaticDrawer>
)
}
function ThemeSwitcher() {
return (
<IconButton
onClick={() => {
const prev = document.documentElement.className
let next: ColorScheme
if (prev == ColorScheme.Light) {
next = ColorScheme.Dark
} else {
next = ColorScheme.Light
}
document.documentElement.className = next
saveThemeIntoLocalStorage(next)
}}
>
<LightDarkIcon/>
</IconButton>
)
}