import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from 'my-ckeditor5-build-classic/build/ckeditor';
import { uploadImage } from '../../redux/actions/image';
import 'my-ckeditor5-build-classic/build/translations/fa';

function Editor(props) {
  return (
    <CKEditor
      editor={ClassicEditor}
      data={props.data}
      onChange={props.onChange}
      onBlur={props.onBlur}
      onFocus={props.onFocus}
      config={{
        upload: {
          imageBaseURL: process.env.REACT_APP_IMAGE_BASE_URL,
          uploadAction: props.uploadImage
        },
        language: 'fa'
      }}
    />
  );
}

Editor.defaultProps = {
  value: '',
  onBlur: function () {},
  onFocus: function () {}
};

Editor.propTypes = {
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  onBlur: PropTypes.func.isRequired,
  onFocus: PropTypes.func.isRequired,
  uploadImage: PropTypes.func.isRequired
};

export default connect(null, { uploadImage })(Editor);
