import { ComponentType, createComponent, renderComponentList, type CordoComponent } from "../component"
import type { CordoModifier } from "../modifier"


export type AllowedComponents = CordoComponent<'ActionRow' | 'Button' | 'TextDisplay' | 'Section' | 'MediaGallery' | 'Seperator' | 'File' | 'StringSelect'> | CordoModifier
type AllowedComponentArray = Array<AllowedComponents | AllowedComponents[]>

export function container(...components: AllowedComponentArray) {
  let accentColor: string | number | undefined = undefined
  let spoiler: boolean | undefined = undefined

  const out = {
    ...createComponent('Container', ({ hirarchy, attributes }) => ({
      type: ComponentType.Container,
      components: renderComponentList(components.flat(), 'Container', hirarchy, attributes),
      accent_color: typeof accentColor === 'string' ? parseInt(accentColor.slice(1), 16) : accentColor,
      spoiler
    })),

    accentColor: (color: string | number | null) => {
      accentColor = color ?? undefined
      return out
    },
    spoiler: (value: boolean = true) => {
      spoiler = value
      return out
    },
    *[Symbol.iterator]() {
      for (const component of components) {
        if (Array.isArray(component))
          yield* component
        else
          yield component
      }
    }
  }

  return out
}