import type { Optional, Unformatted } from '../index.js'
import { nanoid } from './values/id.js'
import type * as Style from './index.js'
import { TypeDefinitions } from './definition.js'

export interface Details {
  id: string
  title: string
  collectionId?: string
  slug?: string
  description?: string
  exampleContent?: any
  elementId?: string
  instanceId?: string
  isDefault?: boolean
  isHidden?: boolean
  isInternal?: boolean
  override?: string
}
export type AspectForm<T extends Style.Type.ElementAspect = Style.Type.ElementAspect> =
  (typeof TypeDefinitions)[T]['forms']

export type Form<P extends any = any> = {
  id: string
  label: string
  extractProperties: (props: P) => Partial<P>
  validate: (props: Partial<P>) => boolean
  fieldset?: any
}

export type FormsByAspect<T extends Style.Type.ElementAspect = Style.Type.ElementAspect> = {
  [key in T]: (typeof Style.TypeDefinitions)[key]['forms'][number]
}

export const DetailsForm: Style.Form = {
  label: 'Details',
  id: 'details',
  validate: () => true,
  extractProperties(props) {
    return props
  }
}

export const OverrideForm: Style.Form = {
  label: 'Custom CSS',
  id: 'override',
  validate: () => true,
  extractProperties(props) {
    return { override: props.override }
  }
}

export function Details(details: Unformatted<Optional<Details, 'title' | 'description' | 'id'>>) {
  return {
    title: '',
    description: '',
    id: details?.id || nanoid(10),
    ...details
  }
}

/*
type Aspect<Type extends string> = {
  type: Type
}

export function Form<Type extends string, Label extends string, Props>(form: {
  id: Type
  label: Label
  extractProperties: (props: any) => Partial<Props>
  validate: (props: Partial<Props>) => boolean
  fieldset?: any
}) {
  return form
}
 */