import { MemoryRouter, Link } from 'react-router-dom'
import { Workspace, Screen, WorkspaceProvider, withWorkspace } from '@admui/workspace'
import { ThemeProvider } from '@admui/theme'
import { Panel } from '@admui/panel'

const ToggleState = withWorkspace(({ expanded, toggle }) => (
  <a onClick={toggle} style={{ color: '#ffffff', marginRight: 8 }}>
    {expanded ? 'Collapse' : 'Expand'}
  </a>
))

;<ThemeProvider>
  <WorkspaceProvider>
    <MemoryRouter>
      <div style={{ width: '100%', overflow: 'hidden' }}>
        <div style={{ padding: 20 }}>
          <Link to='/' style={{ color: '#ffffff', marginRight: 8 }}>
            Main
          </Link>
          <Link to='/screens' style={{ color: '#ffffff', marginRight: 8 }}>
            Screens
          </Link>
          <ToggleState />
        </div>
        <div style={{ width: '100%', height: 300 }}>
          <Workspace>
            <Screen exact path='/'>
              <Panel>
                <span style={{ color: '#ffffff' }}>
                  Main
                </span>
              </Panel>
            </Screen>
            <Screen exact path='/screens'>
              <Panel>
                <Link to='/screens/1' style={{ color: '#ffffff', marginRight: 8 }}>
                  Screen1
                </Link>
                <Link to='/screens/2' style={{ color: '#ffffff', marginRight: 8 }}>
                  Screen2
                </Link>
              </Panel>
            </Screen>
            <Screen path='/screens/1'>
              <Panel>
                <span style={{ color: '#ffffff' }}>
                  Screen1
                </span>
              </Panel>
            </Screen>
            <Screen path='/screens/2'>
              <Panel>
                <span style={{ color: '#ffffff' }}>
                  Screen2
                </span>
              </Panel>
            </Screen>
          </Workspace>
        </div>
      </div>
    </MemoryRouter>
  </WorkspaceProvider>
</ThemeProvider>