/// <reference types="react" />

import { AssetSource } from 'sanity'
import { AssetSourceComponentProps } from 'sanity'
import { FieldDefinition } from 'sanity'
import { default as React_2 } from 'react'
import { SanityDocument } from 'sanity'
import { SanityImageObject } from '@sanity/image-url/lib/types/types'

export declare function BuildEditorAssetSource(
  config: EditorConfiguration,
): AssetSource['component']

export declare interface DialogLabels {
  /**
   * Title above the dialog.
   */
  title?: string
  /**
   * Text of the generation button.
   */
  finishCta?: string
  /**
   * The a11y title for the close button in the dialog.
   */
  ariaClose?: string
}

export declare interface EditorConfiguration {
  layouts?: EditorLayout[]
  dialog?: DialogLabels
}

export declare const EditorInDialog: (props: EditorProps) => JSX.Element | null

export declare type EditorLayout<FormData = {}, DocumentData = {}> = {
  /**
   * Needs to be unique to identify this layout among others.
   */
  name: string
  /**
   * Visible label to users. Only shows when we have 2 or more layouts.
   */
  title?: string
  /**
   * React component which renders the layout.
   */
  component?: MediaLayoutComponent<FormData, DocumentData>
  /**
   * Fields editable by users to change the component data and see changes in the layout live.
   */
  fields?: FieldDefinition[]
  /**
   * Function which gets the current document.
   * Is irrelevant in the context of studio tools as the layout won't receive a document, so if you're only using it there you can ignore this.
   */
  prepareFormData?: PrepareFunction<FormData, DocumentData>
  /**
   * Common examples include:
   * 1200x630 - Twitter, LinkedIn & Facebook
   * 256x256 - WhatsApp
   * 1080x1080 - Instagram square
   */
  dimensions?: {
    width: number
    height: number
  }
}

export declare type EditorProps = {
  context?: 'tool' | 'asset-source'
  document: SanityDocument
} & EditorConfiguration &
  Partial<AssetSourceComponentProps>

export declare type MediaLayoutComponent<FormData = {}, DocumentData = {}> = React_2.ComponentType<{
  formData: Partial<FormData>
  document: DocumentData & SanityDocument
}>

export declare type PrepareFunction<FormData = {}, DocumentData = {}> = (
  document: DocumentData & SanityDocument,
) => Partial<FormData>

export declare const SanityImage: (props: {
  image?: SanityImageObject
  width?: number
}) => JSX.Element | null

export {}