import { Input } from 'antd'
import { useState } from 'react'

import { FormsTrigger } from 'apiClient/services/notification/interface'

const TextArea = Input.TextArea

export const JsonVariableInput: React.FC<
  React.PropsWithChildren<{
    value?: FormsTrigger['payload']
    onChange?: (value: FormsTrigger['payload']) => void
  }>
> = ({ value = {}, onChange }) => {
  const [privateValue, setPrivateValue] = useState(JSON.stringify(value))

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setPrivateValue(e.target.value)
    try {
      const value = JSON.parse(e.target.value)
      onChange?.(value)
    } catch (e) {
      console.log('Invalid json')
    }
  }

  return <TextArea rows={10} value={privateValue} onChange={handleChange} />
}