// imports
import React from 'react';

// locals
import Input from '../Input';
import ApiSignal from '../../signals/Api';
import useResults from '../../hooks/useResults';
import { useSignal } from '../../signal';
import { current as TeamSignal } from '../../signals/Teams';

/**
 * workflow select
 *
 * @param props 
 * @returns 
 */
const ComponentWorkflowSelect = (props = {}) => {
  // signals
  const [api] = useSignal(ApiSignal);
  const [team] = useSignal(TeamSignal);
  
  // items
  const {
    items : workflows,
  } = useResults(api.Workflow.list, 'workflows', {
    team    : team?.id,
    limit   : 1000,
    disable : !team?.id,
  }, null, props.onResult);

  // return
  return !!workflows?.length && (
    <Input
      type="autocomplete"
      label={api.translate('workflow:form.select.label', 'Select Workflow')}
      value={workflows.find((s) => s.id === props.value) ? [workflows.find((s) => s.id === props.value)] : []}
      options={workflows.map((s) => ({
        id   : s.id,
        name : s.name,
      }))}
      onChange={(val) => props.onChange(`${val?.[0]?.id}`)}
      placeholder={api.translate('workflow:form.select.placeholder', 'Select a workflow')}
    />
  );
};

/**
 * export default
 */
export default ComponentWorkflowSelect;