import Form from 'react-bootstrap/Form';
import Editor from '../editor';

function FromEditor(props) {
  const { input, meta, label, required } = props;
  const { touched, error } = meta;
  const id = props.id || input.name;
  const exactLabel = ['.', '?', '!', '؟'].includes(label.charAt(label.length - 1));

  return (
    <Form.Group controlId={id}>
      <Form.Label>
        {exactLabel ? label : `${label} :`}
        {required && <span className='text-danger'> * </span>}
      </Form.Label>
      <Editor
        data={input.value}
        onChange={(event, editor) => {
          const data = editor.getData();
          input.onChange(data);
        }}
        onBlur={() => input.onBlur()}
        onFocus={() => input.onFocus()}
      />
      {touched && error != null && <Form.Text className='text-danger'>{error}</Form.Text>}
    </Form.Group>
  );
}

export default FromEditor;
