import ScriptBuilderDialog from '@/components/scriptBuilder/ScriptBuilderDialog'
import { useMemo } from 'react'
import { createDesignerScriptDialect } from './designerScriptDialect'
import type { SqlDataSourceEvent } from './types'

export type DesignerScriptBuilderDialogProps = {
  isOpen: boolean
  value?: string
  /** Düzenlenen event: başlıkta ve event yolu seçicilerinde kullanılır. */
  eventName: string
  eventInfo?: SqlDataSourceEvent
  /** Event'in sahibi komponentin adı, yalnızca başlık için. */
  componentLabel?: string
  /** Kayıt tariflerinin yazacağı SqlDataSource ref adı. */
  sqlRef: string
  /** SqlDataSource Select sonucundaki sütun adları. */
  recordFields: string[]
  /** Sayfadaki tüm ref adları. */
  refNames: string[]
  onClose: () => void
  onApply: (value: string) => void
}

/**
 * Designer event'lerinin script editörü. Ortak Script Builder'ı designer
 * lehçesiyle kurar; dialog'un kendisi paylaşılan bileşendir.
 */
function DesignerScriptBuilderDialog({
  isOpen,
  value,
  eventName,
  eventInfo,
  componentLabel,
  sqlRef,
  recordFields,
  refNames,
  onClose,
  onApply,
}: DesignerScriptBuilderDialogProps) {
  // Çağıran her render'da yeni diziler üretiyor; lehçe içeriklerine göre
  // sabitlenmezse editör yazarken sıfırlanırdı.
  const recordFieldKey = recordFields.join('|')
  const refNameKey = refNames.join('|')
  const dialect = useMemo(
    () =>
      createDesignerScriptDialect({
        componentLabel,
        eventInfo,
        eventName,
        recordFields: recordFieldKey ? recordFieldKey.split('|') : [],
        refNames: refNameKey ? refNameKey.split('|') : [],
        sqlRef,
      }),
    [componentLabel, eventInfo, eventName, recordFieldKey, refNameKey, sqlRef],
  )

  return (
    <ScriptBuilderDialog
      dialect={dialect}
      isOpen={isOpen}
      value={value}
      onApply={onApply}
      onClose={onClose}
    />
  )
}

export default DesignerScriptBuilderDialog