import React, {useEffect} from 'react'
import {SubmitHandler, useForm} from 'react-hook-form'
import {Modal} from '../../mollecules'
import type {Indicator, Scenario} from '../../../generated/ManagingApi'
import type {IScenarioFormInput} from '../../../global/type'

interface ScenarioModalProps {
  showModal: boolean
  onClose: () => void
  onSubmit: (data: IScenarioFormInput) => Promise<void>
  indicators: Indicator[]
  scenario?: Scenario | null // For update mode
  isUpdate?: boolean
}

const ScenarioModal: React.FC<ScenarioModalProps> = ({
  showModal,
  onClose,
  onSubmit,
  indicators,
  scenario = null,
  isUpdate = false
}) => {
  const { register, handleSubmit, reset, setValue } = useForm<IScenarioFormInput>()

  // Reset form when modal opens/closes or scenario changes
  useEffect(() => {
    if (showModal) {
      if (isUpdate && scenario) {
        // Pre-populate form for update
        setValue('name', scenario.name || '')
        setValue('loopbackPeriod', scenario.loopbackPeriod || 0)
        setValue('indicators', scenario.indicators?.map(s => s.name || '') || [])
      } else {
        // Reset form for create
        reset()
      }
    }
  }, [showModal, isUpdate, scenario, setValue, reset])

  const handleFormSubmit: SubmitHandler<IScenarioFormInput> = async (data) => {
    onClose()
    await onSubmit(data)
  }

  const titleHeader = isUpdate ? 'Update Scenario' : 'Scenario Builder'
  const submitButtonText = isUpdate ? 'Update' : 'Build'

  return (
    <Modal
      onClose={onClose}
      onSubmit={handleSubmit(handleFormSubmit)}
      showModal={showModal}
      titleHeader={titleHeader}
    >
      <div className="form-control mb-5">
        <div className="input-group">
          <label htmlFor="name" className="label mr-6">
            Name
          </label>
          <input
            className="bg-inherit w-full max-w-xs"
            {...register('name')}
            disabled={isUpdate} // Disable name editing in update mode
          />
        </div>
      </div>
      
      <div className="form-control">
        <div className="input-group">
          <label htmlFor="indicators" className="label mr-6">
            Indicators
          </label>
          <select
            multiple
            className="select select-bordered h-28 w-full max-w-xs"
            {...register('indicators')}
          >
            {indicators?.map((item) => (
              <option key={item.name} value={item.name || ''}>
                {item.signalType} - {item.name}
              </option>
            ))}
          </select>
        </div>
      </div>
      
      <div className="form-control mb-5">
        <div className="input-group">
          <label htmlFor="loopbackPeriod" className="label mr-6">
            Loopback period
          </label>
          <input
            type="number"
            className="bg-inherit w-full max-w-xs"
            {...register('loopbackPeriod', { valueAsNumber: true })}
          />
        </div>
      </div>
      
      <div className="modal-action">
        <button type="submit" className="btn">
          {submitButtonText}
        </button>
      </div>
    </Modal>
  )
}

export default ScenarioModal 