From 6430907af9483d4da82b33c94f87dbb547a12387 Mon Sep 17 00:00:00 2001
From: rand0mC0d3r <11176977+rand0mC0d3r@users.noreply.github.com>
Date: Sun, 27 Aug 2023 17:28:08 +0200
Subject: [PATCH] WIP

---
 src/App.tsx                            | 14 +++--
 src/components/ChatClient.tsx          |  6 +-
 src/components/ControlPanel.tsx        | 66 +++++++++++----------
 src/components/KeyboardShortcuts.tsx   |  6 +-
 src/components/Preopen.tsx             | 33 +++++++++--
 src/components/Samples.tsx             |  2 +-
 src/components/StatusCoreGenerator.tsx | 82 ++++++++++++++++++++++++++
 7 files changed, 159 insertions(+), 50 deletions(-)
 create mode 100644 src/components/StatusCoreGenerator.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 14d659e..aefa26e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,9 +16,10 @@ import Preopen from './components/Preopen'
 import Samples from './components/Samples'
 import Search from './components/Search'
 import SpeedMonitor from './components/SpeedMonitor'
+// import Sidebars from './components/Sidebars'
 
 import './App.css'
-// import Sidebars from './components/Sidebars'
+import StatusCoreGenerator from './components/StatusCoreGenerator'
 
 function App() {
   const [width, setWidth] = useState('100%')
@@ -33,7 +34,7 @@ function App() {
 
   return <>
     <IndustrialProvider
-      debug
+      // debug
       fullWidth={fullWidth}
       hasLock={true}
       hasBorder={hasBorder}
@@ -42,8 +43,9 @@ function App() {
       size="medium"
       variant={variant}
     >
+      <StatusCoreGenerator />
       {/* <Sidebars /> */}
-      <Samples />
+      {/* <Samples />
       <Search />
       <GithubPage />
       <NotificationsGenerator />
@@ -53,9 +55,11 @@ function App() {
       <ChatClient />
       <KeyboardShortcuts />
       {!loggedIn && <Preopen />}
+      <SpeedMonitor /> */}
+      {/* {!loggedIn && <Preopen />} */}
+      {/* <Commands {...{ wikiFrame, setWikiFrame }} /> */}
       <SpeedMonitor />
-      <Commands {...{ wikiFrame, setWikiFrame }} />
-
+      <KeyboardShortcuts />
       <ControlPanel {...{
         wikiFrame, setWikiFrame,
         variant, setVariant,
diff --git a/src/components/ChatClient.tsx b/src/components/ChatClient.tsx
index 0bf265b..39e14b1 100644
--- a/src/components/ChatClient.tsx
+++ b/src/components/ChatClient.tsx
@@ -99,9 +99,9 @@ export default function () {
         childrenOrder = {5}
         text="Chats" >
         <Fragment>
-          <Status.Template mask image={'https://avatars.githubusercontent.com/u/79695292?v=4'}/>
-          <Status.Template mask image={'https://avatars.githubusercontent.com/u/11871180?v=4'}/>
-          <Status.Template mask image={'https://avatars.githubusercontent.com/u/11874180?v=4'}/>
+          <Status.Template icon={<Avatar src='https://avatars.githubusercontent.com/u/79695292?v=4' />}/>
+          <Status.Template icon={<Avatar src='https://avatars.githubusercontent.com/u/11871180?v=4'/>}/>
+          <Status.Template icon={<Avatar src='https://avatars.githubusercontent.com/u/11874180?v=4'/>}/>
         </Fragment>
       </Status.Template>
     </Status>
diff --git a/src/components/ControlPanel.tsx b/src/components/ControlPanel.tsx
index b5727fc..6d9854f 100644
--- a/src/components/ControlPanel.tsx
+++ b/src/components/ControlPanel.tsx
@@ -172,38 +172,40 @@ export default function ({
           <Accordion expanded={expanded} onChange={handleChange}>
             <AccordionSummary>Control Panel</AccordionSummary>
             <AccordionDetails>
-              <div style={{
-                alignItems: 'stretch',
-                flexDirection: 'column',
-                display: 'flex',
-                border: '1px solid #888',
-                borderRadius: '8px',
-                padding: '16px',
-                gap: '16px'
-              }}>
-                {toggleBlock('Simulate logged in', loggedIn, setLoggedIn)}
-                {toggleBlock('Border', hasBorder, setHasBorder)}
-                {toggleBlock('FullWidth', fullWidth, setFullWidth)}
-                {toggleOptions('Variant', ['default', 'outlined'], setVariant, variant)}
-                {toggleOptions('Position', ['top', 'bottom'], setPosition, position)}
-                {toggleOptions('Width', ['75vw', '100%', '60%', '1400px'], setWidth, width)}
-                {toggleOptions('Margin', ['0px', '4px', '16px'], setMargin, margin)}
-              </div>
-              <div style={{ alignItems: 'center', flexDirection: 'column', display: 'flex', gap: '16px' }}>
-                <Button onClick={() => window.location.reload()} variant='contained' color="primary"
-                  fullWidth>
-                  <ReplayIcon /> Reload
-                </Button>
-                <textarea onMouseUp={() => {
-                  let textVal = selectionRef.current
-                  let cursorStart = textVal.selectionStart
-                  let cursorEnd = textVal.selectionEnd
-                  let selectedText = text.substring(cursorStart,cursorEnd)
-                  setSelectionIndexes({ start: cursorStart, end: cursorEnd })
-                  setSelectedText(selectedText)
-                }} ref={selectionRef} style={{ width: '100%', height: '400px' }}
-                defaultValue={text.trim()} />
-              </div>
+              {expanded && <>
+                <div style={{
+                  alignItems: 'stretch',
+                  flexDirection: 'column',
+                  display: 'flex',
+                  border: '1px solid #888',
+                  borderRadius: '8px',
+                  padding: '16px',
+                  gap: '16px'
+                }}>
+                  {toggleBlock('Simulate logged in', loggedIn, setLoggedIn)}
+                  {toggleBlock('Border', hasBorder, setHasBorder)}
+                  {toggleBlock('FullWidth', fullWidth, setFullWidth)}
+                  {toggleOptions('Variant', ['default', 'outlined'], setVariant, variant)}
+                  {toggleOptions('Position', ['top', 'bottom'], setPosition, position)}
+                  {toggleOptions('Width', ['75vw', '100%', '60%', '1400px'], setWidth, width)}
+                  {toggleOptions('Margin', ['0px', '4px', '16px'], setMargin, margin)}
+                </div>
+                <div style={{ alignItems: 'center', flexDirection: 'column', display: 'flex', gap: '16px' }}>
+                  <Button onClick={() => window.location.reload()} variant='contained' color="primary"
+                    fullWidth>
+                    <ReplayIcon /> Reload
+                  </Button>
+                  <textarea onMouseUp={() => {
+                    let textVal = selectionRef.current
+                    let cursorStart = textVal.selectionStart
+                    let cursorEnd = textVal.selectionEnd
+                    let selectedText = text.substring(cursorStart,cursorEnd)
+                    setSelectionIndexes({ start: cursorStart, end: cursorEnd })
+                    setSelectedText(selectedText)
+                  }} ref={selectionRef} style={{ width: '100%', height: '400px' }}
+                  defaultValue={text.trim()} />
+                </div>
+              </>}
             </AccordionDetails>
           </Accordion>
         </>}
diff --git a/src/components/KeyboardShortcuts.tsx b/src/components/KeyboardShortcuts.tsx
index db59c34..48aeead 100644
--- a/src/components/KeyboardShortcuts.tsx
+++ b/src/components/KeyboardShortcuts.tsx
@@ -2,7 +2,7 @@ import Crop32OutlinedIcon from '@mui/icons-material/Crop32Outlined'
 import EditAttributesIcon from '@mui/icons-material/EditAttributes'
 import KeyboardIcon from '@mui/icons-material/Keyboard'
 import { ListItemText, MenuItem, MenuList } from '@mui/material'
-import { KeyboardHelper, PopperWidth, Status, StatusType, useConfig, useRegisterShortcut, useShortcuts } from 'mui-industrial'
+import { KeyboardHelper, PopperWidth, ShortcutObject, Status, StatusType, useConfig, useRegisterShortcut, useShortcuts } from 'mui-industrial'
 import { useEffect, useState } from 'react'
 
 const kbdId = 'bkdShortcut'
@@ -16,7 +16,7 @@ const i18n = {
 
 export default function () {
   const shortcuts = useShortcuts()
-  const [open, setOpen] = useState<boolean>(false)
+  const [open, setOpen] = useState<boolean>(true)
   const [edit, setEdit] = useState<boolean>(false)
   const [asChip, setAsChip] = useState<boolean>(true)
   const { handleKeyboardGetLabel } =  useRegisterShortcut()
@@ -31,7 +31,7 @@ export default function () {
 
   const keyboards = [
     { id: kbdId, ctrlKey: true, char: 'K', onTrigger: () => setOpen((prev) => !prev), label: 'Toggle Shortcuts' }
-  ]
+  ] as ShortcutObject[]
 
   useEffect(() => {
     config({ keyboards })
diff --git a/src/components/Preopen.tsx b/src/components/Preopen.tsx
index 0ddea14..eda0f12 100644
--- a/src/components/Preopen.tsx
+++ b/src/components/Preopen.tsx
@@ -4,7 +4,8 @@ import FacebookIcon from '@mui/icons-material/Facebook'
 import GitHubIcon from '@mui/icons-material/GitHub'
 import GoogleIcon from '@mui/icons-material/Google'
 import PasswordIcon from '@mui/icons-material/Password'
-import { Box, Typography } from '@mui/material'
+import { Avatar, Box, Typography } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
 import { Highlight, KeyboardHelper, PopperWidth, Status, StatusType, useConfig } from 'mui-industrial'
 import { useEffect, useState } from 'react'
 
@@ -12,8 +13,10 @@ const id = 'preOpen'
 const kbdId = 'preLogin'
 
 export default function () {
+  const theme = useTheme()
   const { config, configUnmount } = useConfig()
   const [open, setOpen] = useState<boolean>(true)
+  const [isLogged, setIsLogged] = useState<boolean>(false)
 
   const keyboards = [
     { id: kbdId, ctrlKey: true, char: 'L', onTrigger: () => setOpen((prev: any) => !prev), label: 'Toggle Login' },
@@ -24,14 +27,21 @@ export default function () {
     { id: 'googleLogin',
       icon : <GoogleIcon />,
       shortcutId: 'googleLogin',
-      onTrigger: () => console.log('Google command', id),
+      onTrigger: () => {
+        console.log('Google command', id)
+        setIsLogged(true)
+      },
       label: 'Google Login' },
     { id: 'facebookLogin', icon : <FacebookIcon />, onTrigger: () => console.log('Facebook', id), label: 'Facebook Login' },
     { id: 'githubLogin', icon : <GitHubIcon />, onTrigger: () => console.log('Github', id), label: 'Github Login' },
   ]
 
-  const content = <Box style={{ padding: '32px', textAlign: 'center' }}>
-    <Typography variant='subtitle2' color="textSecondary">Login buttons...</Typography>
+  const content = <Box display="flex" style={{ padding: '32px 16px', gap: '16px',  textAlign: 'center' }} flexDirection="column">
+    {/* {isLogged ? 'yes' : 'no'} */}
+    {!isLogged && <Avatar sx={{ width: '64px', backgroundColor: theme.palette.primary.light, height: '64px', margin: 'auto' }} >AU</Avatar>}
+    {isLogged && <Avatar src='https://avatars.githubusercontent.com/u/79695292?v=4'
+      sx={{ width: '64px', backgroundColor: theme.palette.primary.light, height: '64px', margin: 'auto' }} />}
+    <Typography variant='h6'>{isLogged ? 'Anonymous User' : 'Login...'}</Typography>
   </Box>
 
   useEffect(() => {
@@ -51,7 +61,10 @@ export default function () {
         onClose: () => setOpen(false)
       },
       actions: [
-        { icon: <GoogleIcon />, tooltip: 'Login with Google', onClick: () => console.log('Google button') },
+        { icon: <GoogleIcon />, tooltip: 'Login with Google', onClick: () => {
+          console.log('Google button')
+          setIsLogged(true)
+        } },
         { icon: <FacebookIcon />, tooltip: 'Login with Facebook', onClick: () => console.log('Facebook') },
         { icon: <GitHubIcon />, tooltip: 'Login with GitHub', onClick: () => console.log('GitHub') }
       ],
@@ -64,6 +77,14 @@ export default function () {
       content
     }}
   >
-    <Status.Template icon={<PasswordIcon />} text="Login" />
+    <Status.Template
+      childrenOrder={10}
+      text={isLogged ? 'Random Guy' : 'Login now'}
+    >
+      <>
+        {!isLogged && <Status.Template icon={<PasswordIcon />}/>}
+        {isLogged && <Status.Template icon={<Avatar src='https://avatars.githubusercontent.com/u/79695292?v=4'/>}/>}
+      </>
+    </Status.Template>
   </Status>
 }
diff --git a/src/components/Samples.tsx b/src/components/Samples.tsx
index fb6dfec..1e51ce5 100644
--- a/src/components/Samples.tsx
+++ b/src/components/Samples.tsx
@@ -18,7 +18,7 @@ export default () => <>
     <Status.Template badge="badge" />
   </Status>
 
-  <Status id="onlyIcon" onClick={() => {}}>
+  <Status  id="onlyIcon" onClick={() => {}}>
     <Status.Template icon={<ListAltIcon />} />
   </Status>
 </>
diff --git a/src/components/StatusCoreGenerator.tsx b/src/components/StatusCoreGenerator.tsx
new file mode 100644
index 0000000..d482abc
--- /dev/null
+++ b/src/components/StatusCoreGenerator.tsx
@@ -0,0 +1,82 @@
+/* eslint-disable no-console */
+/* eslint-disable no-unused-vars */
+import FacebookIcon from '@mui/icons-material/Facebook'
+import GitHubIcon from '@mui/icons-material/GitHub'
+import GoogleIcon from '@mui/icons-material/Google'
+import PasswordIcon from '@mui/icons-material/Password'
+import { Avatar, Box, Checkbox, MenuItem, Select, TextField, Typography } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+import { Highlight, KeyboardHelper, PopperWidth, Status, StatusType, useConfig } from 'mui-industrial'
+import { useEffect, useState } from 'react'
+
+const id = 'statusCoreGenerator'
+
+export default function () {
+  const theme = useTheme()
+  const [open, setOpen] = useState<boolean>(false)
+
+  const [primaryText, setPrimaryText] = useState<string>('Sample')
+  const [badgeText, setBadgeText] = useState<string>('')
+  const [tooltip, setTooltip] = useState<string>('Tooltip')
+  const [popperText, setPopperText] = useState<string>('Status Generator Popper')
+  const [highlight, setHighlight] = useState<string>(Highlight.DEFAULT)
+
+  const [order, setOrder] = useState<number>(0)
+
+  const [reverse, setReverse] = useState<boolean>(false)
+  const [secondary, setSecondary] = useState<boolean>(false)
+  const [showIcon, setShowIcon] = useState<boolean>(false)
+
+  const content = <Box display="flex" style={{ padding: '32px 16px', gap: '16px',  textAlign: 'center' }} flexDirection="column">
+    <TextField value={primaryText} onChange={(e) => setPrimaryText(e.target.value)} label="Primary Text" />
+    <TextField value={popperText} onChange={(e) => setPopperText(e.target.value)} label="Popper Text" />
+    <TextField value={badgeText} onChange={(e) => setBadgeText(e.target.value)} label="Badge Text" />
+    <TextField value={tooltip} onChange={(e) => setTooltip(e.target.value)} label="Tooltip Text" />
+    <TextField value={order} onChange={(e) => setOrder(Number(e.target.value))} label="Order"
+      type={'number'} />
+    <Select value={highlight} onChange={(e) => {
+      setHighlight(e.target.value)
+    } } label="Highlight">
+      <MenuItem value={Highlight.PRIMARY}>Primary</MenuItem>
+      <MenuItem value={Highlight.SECONDARY}>Secondary</MenuItem>
+      <MenuItem value={Highlight.DEFAULT}>None</MenuItem>
+    </Select>
+    <Box display="flex" sx={{ gap: '4px' }} alignItems="center">
+      <Checkbox  checked={reverse} onChange={(e) => setReverse(e.target.checked)} />
+      <Typography>Reverse</Typography>
+    </Box>
+
+    <Box display="flex" sx={{ gap: '4px' }} alignItems="center">
+      <Checkbox  checked={secondary} onChange={(e) => setSecondary(e.target.checked)} />
+      <Typography>Secondary</Typography>
+    </Box>
+
+    <Box display="flex" sx={{ gap: '4px' }} alignItems="center">
+      <Checkbox  checked={showIcon} onChange={(e) => setShowIcon(e.target.checked)} />
+      <Typography>Show Icon</Typography>
+    </Box>
+
+  </Box>
+
+  return <Status {...{ id, order, secondary, tooltip }}
+    highlight={highlight as Highlight}
+    onClick={() => setOpen((p: any) => !p)}
+    options = {{
+      as: StatusType.POPPER,
+      popper: {
+        width: PopperWidth.SM,
+        onClose: () => setOpen(false),
+      },
+      title: `${open ? 'open' : 'closed'} - ${popperText}`,
+      content,
+      open
+    }}
+  >
+    <Status.Template
+      icon={showIcon ? <Avatar src="https://mui.com/static/images/avatar/1.jpg" /> : undefined}
+      badge={badgeText}
+      reverse={reverse}
+      text={primaryText}
+    />
+  </Status>
+}