import React from 'react'
import type { Props } from './schema'
import './styles.css'

// Botpress pasa estas props adicionales cuando el componente se usa en Capture Information
// Basado en el código fuente de @botpress/webchat, el componente recibe sendMessage
interface BotpressProps extends Props {
  sendMessage?: (payload: { type: 'text'; text: string; value: string }) => void
}

const Component: React.FC<BotpressProps> = ({
  text,
  choices = [],
  sendMessage
}) => {
  // Flag para evitar múltiples envíos por doble click o re-render
  const hasSentRef = React.useRef(false)
  const [hasSent, setHasSent] = React.useState(false)

  const handleChoiceClick = (value: string, label: string) => {
    if (hasSentRef.current) {
      return
    }

    hasSentRef.current = true
    setHasSent(true)
    // Comportamiento nativo: enviar la elección con sendMessage
    if (!sendMessage) return
    sendMessage({
      type: 'text',
      text: label,  // Label que ve el usuario
      value: value  // Valor que se guarda en Workflow
    })
  }

  return (
    <div className="custom-menu">
      {text && <div className="custom-menu-text">{text}</div>}
      {choices.length > 0 && (
        <div className="custom-menu-choices">
          {choices.map((choice, index) => (
            <button
              key={index}
              className="custom-menu-choice"
              onClick={() => handleChoiceClick(choice.value, choice.label)}
              data-value={choice.value}
              data-label={choice.label}
              aria-label={choice.label}
              disabled={hasSent}
              type="button"
            >
              <span className="choice-label">{choice.label}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  )
}

export default Component