Elep

import RadioButtons from './RadioButtons';
import { __, sprintf } from '@wordpress/i18n';
import {useEffect, useState, useRef} from '@wordpress/element';
import TextInput from './TextInput';
import {useFields} from '../../../store/useFieldsStore';
import {useGoalsStore} from '../../../store/useGoalsStore';
const ClassId = ( props ) => {
  const { field, goal, label, help, value, onChangeHandler } = props;
  const [ classOrId, setClassOrId ] = useState( goal.attribute || 'class' );
  const { setGoalValue } = useGoalsStore();

const [ warning, setWarning ] = useState( '' );
  const warningTimeoutRef = useRef( null );

let fields = {...field};
  fields.options = {
    'class': {
      type: 'class',
      icon: 'period',
      label: __( 'Class', 'burst-statistics' )
    },
    'id': {
      type: 'id',
      icon: 'hashtag',
      label: __( 'ID', 'burst-statistics' )
    }
  };

const handleRadioButtonChange = ( value ) => {
    setGoalValue( goal.id, 'attribute', value );
  };

return (
      <>
        <RadioButtons
            field={fields}
            goal={goal}
            label={props.label}
            value={goal.attribute}
            onChangeHandler={handleRadioButtonChange}
        />
          <TextInput value={value} onChangeHandler={( value ) => handleTextInputChange( value )} field={field} label={sprintf( __( 'What is the name for the %s?', 'burst-statistics' ), goal.attribute ) } />
          {warning && <p
              style={{transition: 'opacity 0.5s ease-out', opacity: 1}}
              className="burst-settings-goals__list__item__fields__warning">{warning}</p>}
      </>
  );
};

export default ClassId;