import { compose, renderNothing,lifecycle, branch } from 'recompose'
import { connect } from 'react-redux'
import * as FileAPI from '../utils/FileAPI'
import * as AuthSelectors from '../modules/auth/selectors'

import TinyEditor from './component'
import { ITinyEditorComponentProps } from './interfaces'

declare const window: any

const uploadToDrift = (accessToken:string) => (file:any, success:(url:string) => void, failure:() => void) => {
  return FileAPI.upload(file.blob(), accessToken).then((res: any) => {
    success(res.url)
  })
}

const tinyFilePicker = (cb: any, value: any) => {
  const input : HTMLInputElement = document.createElement('input')
  input.setAttribute('type', 'file')
  input.setAttribute('accept', 'image/*')
  input.onchange = function() {
    const file: any = (this as HTMLInputElement).files[0]
    const reader = new FileReader()
    reader.onload = function() {
      const id = `blobid${new Date().getTime()}`
      const blobCache = window.tinymce.activeEditor.editorUpload.blobCache
      const base64 = reader.result.split(',')[1]
      const blobInfo = blobCache.create(id, file, base64)
      blobCache.add(blobInfo)
      cb(blobInfo.blobUri(), { title: file.name })
    }
    reader.readAsDataURL(file)
  }
  input.click()
}

const mapStateToProps = (state: any, props: any) => ({
  accessToken: AuthSelectors.accessToken(state),
})

export default compose<any, ITinyEditorComponentProps>(
  connect(mapStateToProps, undefined),
  lifecycle<any, ITinyEditorComponentProps>({
    componentDidMount() {
      const { onChange, index, accessToken } = this.props

      window.tinymce.init({
        selector:`.tinymce-editor-${index}`,
        plugins: 'autoresize lists autolink link preview paste code image',
        toolbar: 'undo redo | bold italic | numlist bullist | alignleft aligncenter alignright | link image | code ',
        init_instance_callback: function (editor :any) {
          editor.on('KeyUp', function (e: any) {
              onChange(editor.getContent())
            });
          editor.on('Paste', function (e: any) {
              onChange(editor.getContent())
            });
          editor.on('MouseLeave', function (e: any) {
              onChange(editor.getContent())
            });
        },
        branding: false,
        menubar: false,
        relative_urls: false,
        remove_script_host: false,
        paste_data_images: true,
        images_upload_handler: uploadToDrift(accessToken),
        file_picker_callback: tinyFilePicker,
        file_picker_types: 'image',
        image_title: false,

      })
    }
  }),
  branch(() => !window.tinymce, renderNothing),
)(TinyEditor) as any