import type { Color as BasedUIColor, CodeBlockProps } from '@based/ui'
import type { ComponentDoc } from 'react-docgen-typescript'

export declare global {
  namespace Based {
    namespace UI {
      namespace Playground {
        type TypedRoute = {
          name: string
          params: RouterParams
        }

        type RedirectProps = {
          to: string
        } & Partial<RouterParams>

        type RouterParams = {
          section: 'components' | 'colors' | 'typography'
          component: string
          block: string
          state: 'code' | 'preview' | 'bold' | 'medium' | 'regular'
          view: 'fullscreen' | 'compact'
        }

        type Layout = {
          header: JSX.Element | boolean
          sidebar: JSX.Element | boolean
          content: JSX.Element | boolean
        }

        namespace Content {
          type HeaderButton = Based.UI.Extractor.MetaButtons

          type HeaderMenu = {
            label: string
            items: {
              id: string
              label: string
              description?: string
            }[]
          }

          type Header = {
            title: string
            subtitle?: string
            description?: string
            buttons?: HeaderButton[]
            menu?: HeaderMenu
          }

          type Code = {
            code: string
            copy?: boolean
            language?: string
            showLines?: boolean
          }

          type Color = {
            name: BasedUIColor
            var: string
            hex: string
            hsl: string
            rgba: string
          }

          type Compact = {
            component: string
            showApi?: boolean
            showUsage?: boolean
          }

          type Colors = {
            id: string
            theme?: 'dark' | 'light'
            tag?: 'static' | 'dynamic' | 'invertable'
          }

          type ColorItem = {
            colorInfo: Color
            iconBadge: IconProps['variant']
            copyLabel: string
            colorMode: keyof Color
            isDarkMode: boolean
            isStatic: boolean
            onCLick: (colorInfo: Color) => void
          }

          type Typography = {
            text?: string
            id: string
          }

          type Preview = {
            code: string
          }

          type Block = Based.UI.Extractor.BlocksDescriptor & {
            id: string
            componentName?: string
            blocks?: {
              id: string
              name: string
            }[]
          }

          type Usage = {
            title: string
            code: string
            language?: CodeBlockProps['language']
          }

          type Api = {
            title: string
            description: string
            props: ComponentDoc['props']
          }
        }

        namespace Sidebar {
          type Component = {
            name: string
            icon: string
            id: string
          }

          type Group = {
            name: string
            components: Component[]
          }

          type Props = {
            groups: Group[]
          }
        }
      }
    }
  }
}
