import type * as Style from '../index.js'

export type ElementDefinition<T = Style.Type.Element> = {
  name: string
  id: string
  type: T
  group?: string
  htmlTagName: keyof HTMLElementTagNameMap
  className: string
  elementName?: string
  label: string
  title?: string
  description?: string
  isCustom: boolean
  isImplicit: boolean
  canBeLink?: boolean
  placeholder?: string
  disguise: string
  attributes?: Record<string, any>
  priority?: number
}

export const text = [
  {
    name: 'paragraph',
    id: 'paragraph',
    type: 'text',
    htmlTagName: 'p',
    className: '-paragraph',
    disguise: null as string,
    isImplicit: true,
    isCustom: false,
    placeholder: 'Text element',
    title: 'Paragraphs',
    label: 'Paragraph',
    description: "Regular text element used for all text and copy that isn't heading"
  },
  {
    name: 'heading1',
    id: 'heading1',
    type: 'text',
    htmlTagName: 'h1',
    className: '-heading1',
    disguise: null as string,
    isImplicit: true,
    isCustom: false,
    title: 'Heading 1',
    label: 'Heading 1',
    description: 'Main heading of the document, used for largest of headings'
  },
  {
    name: 'heading2',
    id: 'heading2',
    type: 'text',
    htmlTagName: 'h2',
    className: '-heading2',
    disguise: null as string,
    isImplicit: true,
    isCustom: false,
    title: 'Heading 2',
    label: 'Heading 2',
    description: 'Second level of headings'
  },
  {
    name: 'heading3',
    id: 'heading3',
    type: 'text',
    htmlTagName: 'h3',
    className: '-heading3',
    disguise: null as string,
    isImplicit: true,
    isCustom: false,
    title: 'Heading 3',
    label: 'Heading 3',
    description: 'Third level of headings often used for taglines'
  },
  {
    name: 'heading4',
    id: 'heading4',
    type: 'text',
    htmlTagName: 'h4',
    className: '-heading4',
    disguise: null as string,
    isImplicit: true,
    isCustom: false,
    title: 'Heading 4',
    label: 'Heading 4',
    description: 'Further level of headings for complex document'
  },
  {
    name: 'heading5',
    id: 'heading5',
    type: 'text',
    htmlTagName: 'h5',
    className: '-heading5',
    disguise: null as string,
    isImplicit: true,
    isCustom: false,
    title: 'Heading 5',
    label: 'Heading 5',
    description: 'The deepest heading level available'
  },
  {
    name: 'listItem',
    id: 'listItem',
    type: 'text',
    htmlTagName: 'li',
    label: 'List item',
    disguise: 'paragraph',
    className: '-list-item',
    isImplicit: true,
    isCustom: false
  }
] as const satisfies readonly ElementDefinition[]

export const inline = [
  /** Builtin element styles */
  {
    name: 'link',
    id: 'link',
    type: 'inline',
    label: 'Link',
    htmlTagName: null as keyof HTMLElementTagNameMap,
    className: '-link',
    disguise: null as string,
    placeholder: 'New link',
    isImplicit: true,
    canBeLink: true,
    isCustom: false,
    attributes: {
      linkHref: ''
    },
    title: 'Links',
    description: 'Links inside text elements'
  },
  {
    name: 'button',
    id: 'button',
    type: 'inline',
    label: 'Button',
    htmlTagName: 'button',
    className: '-button',
    disguise: null as string,
    placeholder: 'Click me',
    isImplicit: true,
    isCustom: false,
    canBeLink: true,
    title: 'Buttons',
    description: 'Clickable element used for user interactions'
  },
  {
    name: 'badge',
    id: 'badge',
    type: 'inline',
    label: 'Badge',
    className: '-inline--badge',
    disguise: null as string,
    placeholder: 'Badge text',
    isImplicit: false,
    htmlTagName: null as keyof HTMLElementTagNameMap,
    isCustom: true,
    canBeLink: true,
    title: 'Badges',
    description: 'Element represeting status and other meta information'
  },
  {
    name: 'time',
    id: 'time',
    type: 'inline',
    label: 'Date',
    htmlTagName: 'time',
    className: '-inline--time',
    disguise: 'badge' as string,
    placeholder: '2023-01-01',
    isImplicit: true,
    isCustom: true,
    canBeLink: true,
    //title: 'Date',
    description: 'Present mapped date in human readable format'
  },
  {
    name: 'inline',
    id: 'inline',
    type: 'inline',
    label: 'Generic inline element',
    className: '-inline',
    disguise: null as string,
    isImplicit: false,
    placeholder: 'Inline element',
    canBeLink: true,
    htmlTagName: null as keyof HTMLElementTagNameMap,
    isCustom: false
  },
  {
    type: 'inline',
    id: 'var',
    label: 'Variable',
    name: 'var',
    className: '-variable' as string,
    placeholder: 'Double click to edit',
    disguise: null as string,
    htmlTagName: 'var' as keyof HTMLElementTagNameMap,
    isImplicit: true,
    isCustom: false,
    description: 'Inline placement to be substituted with mapped text',
    attributes: { 'data-path': '' }
  }
] as const satisfies readonly ElementDefinition[]

export const block = [
  {
    name: 'section',
    id: 'section',
    type: 'block',
    label: 'Section',
    htmlTagName: 'section',
    className: '-section',
    disguise: null as string,
    isImplicit: true,
    isCustom: false,
    title: 'Sections',
    description: 'Themeable essential boxes represeting top-level chunks of a component',
    priority: -1,
    attributes: { class: '-grid--custom' }
  },
  {
    name: 'card',
    id: 'card',
    type: 'block',
    label: 'Card',
    htmlTagName: null as keyof HTMLElementTagNameMap,
    className: '-card',
    disguise: null as string,
    isImplicit: true,
    canBeLink: true,
    isCustom: false,
    title: 'Cards',
    description: 'Themable nestable boxes that provide visual framing for content',
    priority: -1
  },
  {
    name: 'blockquote',
    id: 'blockquote',
    type: 'block',
    label: 'Block quote',
    htmlTagName: 'blockquote',
    className: '-blockquote',
    disguise: null as string,
    isImplicit: true,
    canBeLink: true,
    isCustom: false,
    title: 'Block quotes',
    description: 'Quotes, tweets and rich styled text references',
    priority: -1
  } /*,
 
  {
    name: 'video',
    type: 'block',
    label: 'Video',
    htmlTagName: null as keyof HTMLElementTagNameMap,
    isImplicit: false,
    isCustom: false,
    canBeLink: true,
    className: '-media--image',
    disguise: 'media',
    title: 'Video',
    description: 'Video with optional caption'
  } */,
  {
    name: 'form',
    id: 'form',
    type: 'block',
    label: 'Form',
    group: 'external',
    elementName: 'component',
    className: '-component--form',
    disguise: 'media',
    canBeLink: false,
    htmlTagName: null as keyof HTMLElementTagNameMap,
    isImplicit: true,
    isCustom: true,
    description: 'Form created in Sitecore Forms',
    priority: 2
  },

  {
    name: 'component',
    id: 'component',
    type: 'block',
    label: 'Component',
    group: 'external',
    className: '-component',
    disguise: 'media',
    canBeLink: false,
    htmlTagName: null as keyof HTMLElementTagNameMap,
    isImplicit: true,
    isCustom: false,
    description: 'Nested web, react or FEAAS component',
    priority: 1
  },
  {
    name: 'embed',
    id: 'embed',
    type: 'block',
    group: 'block',
    label: 'HTML Block',
    className: '-embed',
    disguise: 'media',
    canBeLink: true,
    htmlTagName: null as keyof HTMLElementTagNameMap,
    isImplicit: true,
    isCustom: false,
    description: 'Raw HTML content embedded into the component',
    priority: 3
  },
  {
    name: 'media',
    id: 'media',
    type: 'block',
    label: 'Image',
    htmlTagName: null as keyof HTMLElementTagNameMap,
    isImplicit: true,
    isCustom: false,
    canBeLink: true,
    className: '-block--media',
    disguise: null as string,
    title: 'Image blocks',
    description: 'Image with optional accompanying text content', //'Images, videos and combination of both',
    priority: -1,
    attributes: {
      image: ''
    }
  },

  {
    name: 'block',
    id: 'block',
    type: 'block',
    label: 'Generic block element',
    className: '-block',
    disguise: null as string,
    isImplicit: false,
    canBeLink: true,
    htmlTagName: null as keyof HTMLElementTagNameMap,
    isCustom: false,
    priority: 1
  },
  {
    name: 'spacer',
    id: 'spacer',
    type: 'block',
    label: 'Spacer',
    className: '-spacer',
    disguise: null as string,
    canBeLink: false,
    htmlTagName: null as keyof HTMLElementTagNameMap,
    isImplicit: true,
    isCustom: false,
    description: 'Flexible spacer that expands to take all available space',
    priority: 2
  },
  {
    name: 'container',
    id: 'container',
    type: 'block',
    label: 'Block',
    className: '-container',
    disguise: null as string,
    canBeLink: true,
    isImplicit: true,
    isCustom: false,
    htmlTagName: null as keyof HTMLElementTagNameMap,
    priority: -1,
    description: 'Unstyled container for layout purposes'
  }
] as const satisfies readonly ElementDefinition[]

export const all = [...inline, ...block, ...text]