'use client'

import React from 'react'
import { PktTable } from '../table/Table'
import { PktTableHeader } from '../table/TableHeader'
import { PktTableBody } from '../table/TableBody'
import { PktTableRow } from '../table/TableRow'
import { PktTableHeaderCell } from '../table/TableHeaderCell'
import { PktTableDataCell } from '../table/TableDataCell'

export interface ISpecObject {
  name?: string
  'css-class'?: string
  'dark-mode'?: boolean
  isElement?: boolean
  props?: Record<string, PropObject | string[]>
  events?: Record<string, PropObject>
  slots?: Record<string, any>
  default?: any
}

type PropObject = {
  name?: string
  description?: string
  type?: string | string[]
  variant?: string
  converter?: string
  reflect?: boolean
  default?: any
  previewDefault?: any
  items?: PropObject
}

export const PktPreviewSpecs: React.FC<{ specs: ISpecObject }> = ({ specs }) => {
  const formatType = (type: string | string[]) => {
    if (Array.isArray(type)) {
      return type.join(' \n')
    }
    return type
  }

  const formatValue = (value: any) => {
    if (typeof value === 'boolean') {
      return value ? 'true' : 'false'
    }
    return value
  }

  return (
    <>
      <h2>Egenskaper</h2>
      <PktTable compact>
        <PktTableHeader>
          <PktTableRow>
            <PktTableHeaderCell>Prop</PktTableHeaderCell>
            <PktTableHeaderCell>Navn</PktTableHeaderCell>
            <PktTableHeaderCell>Beskrivelse</PktTableHeaderCell>
            <PktTableHeaderCell>Type</PktTableHeaderCell>
            <PktTableHeaderCell>Standardverdi</PktTableHeaderCell>
          </PktTableRow>
        </PktTableHeader>
        <PktTableBody>
          {Object.entries(specs.props || {}).map(([key, value]) => (
            <PktTableRow key={key}>
              <PktTableDataCell dataLabel="Prop">
                <pre>{key}</pre>
              </PktTableDataCell>
              <PktTableDataCell dataLabel="Navn">{(!Array.isArray(value) && value.name) || key}</PktTableDataCell>
              {Array.isArray(value) ? (
                <>
                  <PktTableDataCell dataLabel="Beskrivelse"></PktTableDataCell>
                  <PktTableDataCell dataLabel="Type">
                    <pre>{value.join('\n')}</pre>
                  </PktTableDataCell>
                </>
              ) : (
                <>
                  <PktTableDataCell dataLabel="Beskrivelse">
                    <span dangerouslySetInnerHTML={{ __html: value.description || '' }}></span>
                  </PktTableDataCell>
                  <PktTableDataCell dataLabel="Type">
                    <pre>{value.type && formatType(value.type)}</pre>
                  </PktTableDataCell>
                  <PktTableDataCell dataLabel="Standardverdi">
                    <pre>{formatValue(value.default)}</pre>
                  </PktTableDataCell>
                </>
              )}
            </PktTableRow>
          ))}
        </PktTableBody>
      </PktTable>
      {specs.events && (
        <>
          <h2>Hendelser / handlinger</h2>
          <PktTable compact>
            <PktTableHeader>
              <PktTableRow>
                <PktTableHeaderCell>Event</PktTableHeaderCell>
                <PktTableHeaderCell>Beskrivelse</PktTableHeaderCell>
                <PktTableHeaderCell>Type</PktTableHeaderCell>
              </PktTableRow>
            </PktTableHeader>
            <PktTableBody>
              {Object.entries(specs.events || {}).map(([key, value]) => (
                <PktTableRow key={key}>
                  <PktTableDataCell dataLabel="Event">
                    <pre>{key}</pre>
                  </PktTableDataCell>
                  <PktTableDataCell dataLabel="Beskrivelse">
                    <span dangerouslySetInnerHTML={{ __html: value.description || '' }}></span>
                  </PktTableDataCell>
                  <PktTableDataCell dataLabel="Type">{value.type}</PktTableDataCell>
                </PktTableRow>
              ))}
            </PktTableBody>
          </PktTable>
        </>
      )}
      {specs.slots && (
        <>
          <h2>Innhold</h2>
          <PktTable compact>
            <PktTableHeader>
              <PktTableRow>
                <PktTableHeaderCell>Slot</PktTableHeaderCell>
                <PktTableHeaderCell>Beskrivelse</PktTableHeaderCell>
              </PktTableRow>
            </PktTableHeader>
            <PktTableBody>
              {Object.entries(specs.slots || {}).map(([key, value]) => (
                <PktTableRow key={key}>
                  <PktTableDataCell dataLabel="Slot">
                    <pre>{key}</pre>
                  </PktTableDataCell>
                  <PktTableDataCell dataLabel="Beskrivelse">
                    <span dangerouslySetInnerHTML={{ __html: value.description || '' }}></span>
                  </PktTableDataCell>
                </PktTableRow>
              ))}
            </PktTableBody>
          </PktTable>
        </>
      )}
    </>
  )
}