
import SelectField from '../../form/SelectField'
import { FORM_LABELS, MUTATION_TYPES } from '../../../constants/ui.js'
import { useAppSelector } from '../../../store/hooks'
import { selectApprovedSchemas } from '../../../store/schemaSlice'

function SchemaSelector({ selectedSchema, mutationType, onSchemaChange, onTypeChange }) {
  // Redux state - TASK-003: Use Redux approved schemas for SCHEMA-002 compliance
  const approvedSchemas = useAppSelector(selectApprovedSchemas)

  return (
    <div className="grid grid-cols-2 gap-4">
      <SelectField
        name="schema"
        label={FORM_LABELS.schema}
        value={selectedSchema}
        onChange={onSchemaChange}
        options={approvedSchemas.map(schema => ({
          value: schema.name,
          label: schema.descriptive_name || schema.name
        }))}
        placeholder="Select a schema..."
        emptyMessage="No approved schemas available for mutations"
        helpText={FORM_LABELS.schemaHelp}
      />

      <SelectField
        name="operationType"
        label={FORM_LABELS.operationType}
        value={mutationType}
        onChange={onTypeChange}
        options={MUTATION_TYPES}
        helpText={FORM_LABELS.operationHelp}
      />
    </div>
  )
}

export default SchemaSelector
