import { Style } from '../sdk.js'

export const Embeds = [
  {
    type: 'html',
    title: 'HTML Embed',
    getConfiguration: (context: Style.Context) => null as string,
    condition: (context: Style.Context) => ('name' in context ? context.name : context.localName) == 'embed',
    isRenderable: false
  },
  {
    type: 'form',
    title: 'Sitecore Form',
    getConfiguration: (context: Style.Context) =>
      context.getAttribute('data-embed-title') || context.getAttribute('data-external-id')?.includes('formId') || null,
    condition: (context: Style.Context) =>
      String(context.getAttribute('class')).includes('-component--form') ||
      context.getAttribute('data-embed-type') == 'form',
    isRenderable: false
  },
  {
    type: 'feaas',
    title: 'Sitecore component',
    getConfiguration: (context: Style.Context) =>
      context.getAttribute('library') && context.getAttribute('component') ? true : false,
    condition: (context: Style.Context) =>
      context.getAttribute('data-embed-as') == 'feaas-component' || context.getAttribute('data-embed-type') == 'feaas',
    isRenderable: true
  },
  {
    type: 'web',
    title: 'Web component',
    getConfiguration: (context: Style.Context) => context.getAttribute('data-embed-as'),
    condition: (context: Style.Context) =>
      context.getAttribute('data-embed-as') && context.getAttribute('data-embed-as') != 'feaas-external',
    isRenderable: true
  },
  {
    type: 'byoc',
    title: 'Component',
    getConfiguration: (context: Style.Context) =>
      context.getAttribute('data-embed-title') || context.getAttribute('data-external-id'),
    condition: (context: Style.Context) =>
      ['embed', 'component'].includes('name' in context ? context.name : context.localName),
    isRenderable: false
  }
] as const

export function getEmbedDefinition(context: Style.Context) {
  return Embeds.find((e) => e.condition(context))
}