import { useCallback } from 'react'
import type { NodeProps } from 'reactflow'

import { WorkflowSelector } from '../../../../../app/store/selectors/workflowSelector'
import useWorkflowStore from '../../../../../app/store/workflowStore'
import type { IFlow } from '../../../../../generated/ManagingApi'
import { Timeframe } from '../../../../../generated/ManagingApi'
import { FormInput } from '../../../../mollecules'
import Flow from '../Flow'

const RsiDivergenceFlow = ({ data, isConnectable, id }: NodeProps<IFlow>) => {
  const { updateNodeData } = useWorkflowStore(WorkflowSelector)

  const onPeriodChange = useCallback((evt: any) => {
    updateNodeData(id, 'Period', evt.target.value)
  }, [])

  const onTimeframeChange = useCallback((evt: any) => {
    updateNodeData(id, 'Timeframe', evt.target.value)
  }, [])

  return (
    <Flow
      name={data.name || ''}
      description={data.description}
      inputs={data.acceptedInputs}
      outputs={data.outputTypes}
      isConnectable={isConnectable}
    >
      <FormInput label="Period" htmlFor="period">
        <input
          id="period"
          name="text"
          onChange={onPeriodChange}
          className="input nodrag w-full max-w-xs"
          value={data.parameters.find((p) => p.name === 'Period')?.value || ''}
        />
      </FormInput>
      <FormInput label="Timeframe" htmlFor="period">
        <select
          className="select no-drag w-full max-w-xs"
          onChange={onTimeframeChange}
          value={
            data.parameters.find((p) => p.name === 'Timeframe')?.value || ''
          }
        >
          {Object.keys(Timeframe).map((item) => (
            <option key={item} value={item}>
              {item}
            </option>
          ))}
        </select>
      </FormInput>
    </Flow>
  )
}

export default RsiDivergenceFlow
