import { Layouts, Widgets } from '@tesseract-design/viewfinder-react';
import {Span} from '@tesseract-design/viewfinder-base';
import {Brand} from '~/components/Brand';
import {DummyLinks} from '~/components/DummyLinks';
import {useSearchParams, Link} from '@remix-run/react';

const LeftSidebarWithMenuLayoutPage = () => {
  const params = useSearchParams();
  const { open } = Object.fromEntries(params.entries()) as unknown as Record<string, string>;
  const sidebarOpen = open === 'sidebar';

  return (
    <Layouts.LeftSidebarWithMenu.Root
      sidebarBaseWidget={
        <Widgets.LeftSidebarWithMenuBase
          span={Span.WIDE}
          open={sidebarOpen}
          style={{
            backgroundColor: 'inherit',
          }}
          items={[
            {
              id: '1',
              label: 'Item 1',
              icon: '1',
              url: '#',
            }
          ]}
          linkComponent={({
            url,
            label,
            icon,
          }) => (
            <a
              href={url}
            >
              <Layouts.LeftSidebarWithMenu.SidebarContentContainer>
                <Layouts.LeftSidebarWithMenu.SidebarContentContainer>
                  {icon}
                </Layouts.LeftSidebarWithMenu.SidebarContentContainer>
                {label}
              </Layouts.LeftSidebarWithMenu.SidebarContentContainer>
            </a>
          )}
        >
          <Layouts.LeftSidebarWithMenu.SidebarContentContainer>
            Sidebar
          </Layouts.LeftSidebarWithMenu.SidebarContentContainer>
        </Widgets.LeftSidebarWithMenuBase>
      }
      topBarWidget={
        <Widgets.TopBar
          brand={
            <Brand />
          }
          style={{
            backgroundColor: 'inherit',
          }}
          menuLink={
            <Link
              to="?open=sidebar"
            >
              Open
            </Link>
          }
          span={Span.WIDE}
        >
          <DummyLinks />
        </Widgets.TopBar>
      }
    >
      <Layouts.LeftSidebarWithMenu.MainContentContainer>
        Hello
      </Layouts.LeftSidebarWithMenu.MainContentContainer>
    </Layouts.LeftSidebarWithMenu.Root>
  )
}

export default LeftSidebarWithMenuLayoutPage