import React from 'react'
import { Button } from '../button'
import { Tags } from '../tags'
import { Text } from '../text'
import { View } from '../view'
import { ContentHeader } from '../content-header'
import { AppHeader } from '../app-header'
import { ComponentSlotsProvider } from '../component-slots'
import { Page } from './Page.jsx'
import { appLogoSlots } from '../app-header/appLogoSlots.jsx'
import { DemoSidebar } from './DemoSidebar.jsx'

export default {
  title: 'Design System/Page',
  component: Page,
  parameters: {
    docs: {
      description: {
        component:
          'Renders a `View layout="page"` grid with registered slots for each region (`page.header`, `page.content`, …). Register region components via `ComponentSlotsProvider`; extra props pass through to the root `View`.',
      },
    },
  },
}

const PageHeaderExample = () => (
  <AppHeader
    far={(
      <>
        <Button variant="link" prefix="sun" label="Cloud Light" />
        <Button variant="link" prefix="profile" label="Profile" />
      </>
    )}
  />
)

const PageBody = () => (
  <ContentHeader
    title="design-system.story.pageTitle"
    description="design-system.story.pageDescription"
    near={<Tags tags={['Beta']} size="s" />}
    far={<Button variant="cta" label="design-system.add" />}
  />
)

const SidebarPrimary = () => <DemoSidebar />

const AppFooter = () => (
  <View as="footer" inset="m">
    <Text variant="small">Platform Demo — explore capabilities in a live workspace</Text>
  </View>
)

const defaultPageSlots = {
  'page.header': PageHeaderExample,
  'page.sidebar-primary': SidebarPrimary,
  'page.content': PageBody,
  'page.footer': AppFooter,
}

/** Typical route page: regions registered on `page.*` keys. */
export const Default = () => (
  <ComponentSlotsProvider slots={{ ...appLogoSlots, ...defaultPageSlots }}>
    <Page />
  </ComponentSlotsProvider>
)