// 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';

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

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

/**
 * export default
 */
export default ComponentSecretSelect;