import {
  Avatar,
  IconProps,
  Menu,
  Sidebar,
  Text,
  TextInput,
  colors,
} from '@based/ui'
import { useState } from 'react'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Sidebar',
  group: 'Blocks',
  section: 'components',
  icon: 'edit',
  component: Sidebar,
  subtitle:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  showApi: true,
  showUsage: true,
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Default',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      size: '100%',
      frame: true,
    },
    render: () => {
      const [value, setValue] = useState('')
      const sidebarItems: Record<
        string,
        { value: string; label: string; icon: IconProps['variant'] }[]
      > = {
        Platform: [
          {
            value: 'website',
            label: 'Website',
            icon: 'website',
          },
          {
            value: 'subscribers',
            label: 'Subscribers',
            icon: 'users',
          },
        ],
        'Content management': [
          {
            value: 'games',
            label: 'Games',
            icon: 'dice',
          },
          {
            value: 'articles',
            label: 'Articles',
            icon: 'article',
          },
          {
            value: 'media-library',
            label: 'Media library',
            icon: 'image',
          },
          {
            value: 'players',
            label: 'Players',
            icon: 'call',
          },
        ],
        Insights: [
          {
            value: 'analytics',
            label: 'Analytics',
            icon: 'insight',
          },
          {
            value: 'ab-tests',
            label: 'A/B tests',
            icon: 'trend-up',
          },
        ],
        Workspace: [
          {
            value: 'settings',
            label: 'Settings',
            icon: 'settings',
          },
          {
            value: 'members',
            label: 'Members',
            icon: 'user-setting',
          },
          {
            value: 'updates',
            label: 'Updates',
            icon: 'history',
          },
        ],
      }

      return (
        <div style={{ height: '100svh', width: 312 }}>
          <Sidebar value={value} onChange={setValue}>
            <Sidebar.Header>
              <div
                style={{
                  width: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 16,
                }}
              >
                <svg fill="none" viewBox="0 0 80 80" width="40" height="40">
                  <path
                    d="m60.822 26.3984-19.0829 19.0829h-19.0829l19.0829-19.0829z"
                    fill="#4b41ff"
                  />
                  <path
                    d="m65.3125 45.481-19.0829 19.0828h-23.5734l19.0829-19.0828z"
                    fill="#ff1f85"
                  />
                  <path
                    d="m41.7391 8.4375-19.0829 19.0829v17.9606l19.0829-19.0829z"
                    fill="#008cff"
                  />
                </svg>
                <TextInput
                  value=""
                  onChange={() => {}}
                  keyHint="F"
                  placeholder="Find anything"
                />
              </div>
            </Sidebar.Header>
            <Sidebar.Items>
              {Object.entries(sidebarItems).map(([key, value], index) => (
                <Sidebar.Group key={index} title={key}>
                  {value.map((item, index) => (
                    <Sidebar.Item
                      key={index}
                      value={item.value}
                      icon={item.icon}
                    >
                      {item.label}
                    </Sidebar.Item>
                  ))}
                </Sidebar.Group>
              ))}
            </Sidebar.Items>
            <Sidebar.Footer>
              <Menu>
                <Menu.Trigger>
                  {({ open }) => (
                    <div
                      data-open={open}
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: 8,
                        padding: '4px 8px 4px 6px',
                        margin: '0 -8px 0 -6px',
                        borderRadius: '8px',
                        cursor: 'pointer',
                        background: open ? colors.neutral100 : 'transparent',
                      }}
                    >
                      <Avatar src="https://public.linear.app/9fa6f7a2-5e7d-4fb8-af60-d35ba4592b2c/d14d4591-6cc5-4afc-8c47-c384475b5de2/16cd9278-4497-41fa-8ec2-5de1dfc2c5ad" />
                      <Text
                        color={open ? 'neutralInverted100' : 'neutral100'}
                        variant="display-medium"
                      >
                        Sándor Zelenka
                      </Text>
                    </div>
                  )}
                </Menu.Trigger>
                <Menu.Items>
                  <Menu.Item leadIcon="user">Profile</Menu.Item>
                  <Menu.Item leadIcon="log-out">Logout</Menu.Item>
                </Menu.Items>
              </Menu>
            </Sidebar.Footer>
          </Sidebar>
        </div>
      )
    },
  },
]
