import app from 'flarum/forum/app';
import Modal from 'flarum/components/Modal';
import Button from 'flarum/components/Button';
import ItemList from 'flarum/utils/ItemList';
import LoadingIndicator from 'flarum/components/LoadingIndicator';
import formatBytes from '../../common/formatBytes';

export default class CoverEditorModal extends Modal {
  oninit(vnode) {
    super.oninit(vnode);

    this.maxSize = parseFloat(app.forum.attribute('sycho-profile-cover.max_size') || 2048);

    this.alertAttrs = {
      content: app.translator.trans('sycho-profile-cover.forum.notice', { size: formatBytes(this.maxSize * Math.pow(2, 10)) }),
    };

    this.loading = false;
    this.cover = this.attrs.user.cover_thumbnail() || this.attrs.user.cover();
    this.context = '';
  }

  content() {
    let attrs = {};
    let className = 'Modal-image CoverEditor-cover';

    if (this.cover) {
      attrs.style = { backgroundImage: `url(${this.cover})` };
      className += ' CoverEditor-active';
    }

    return [
      <div className={className} {...attrs}>
        {this.loading ? <LoadingIndicator /> : ''}
      </div>,

      <div className="Modal-body">
        <div className="Form">{this.fieldsItems().toArray()}</div>
      </div>,
    ];
  }

  className() {
    return 'Cover-modal Modal--small';
  }

  title() {
    return app.translator.trans('sycho-profile-cover.forum.edit_cover');
  }

  fieldsItems() {
    const items = new ItemList();

    items.add('actions', this.controlItems().toArray());

    return items;
  }

  controlItems() {
    const items = new ItemList();

    items.add(
      'upload',
      <Button icon="fas fa-upload" className="Button" onclick={this.openPicker.bind(this)}>
        {app.translator.trans('core.forum.user.avatar_upload_button')}
      </Button>
    );

    items.add(
      'remove',
      <Button icon="fas fa-times" className="Button" onclick={this.remove.bind(this)}>
        {app.translator.trans('core.forum.user.avatar_remove_button')}
      </Button>
    );

    return items;
  }

  openPicker() {
    const input = $('<input type="file">');

    input
      .appendTo('body')
      .hide()
      .click()
      .on('change', (e) => {
        this.upload($(e.target)[0].files[0]);
      });
  }

  upload(file) {
    if (this.loading) return;

    const data = new FormData();
    data.append('cover', file);

    this.loading = true;
    this.context = 'added';
    m.redraw();

    app
      .request({
        method: 'POST',
        url: `${app.forum.attribute('apiUrl')}/users/${this.attrs.user.id()}/cover`,
        serialize: (raw) => raw,
        body: data,
      })
      .then(this.success.bind(this), this.failure.bind(this));
  }

  remove() {
    this.loading = true;
    this.context = 'removed';
    m.redraw();

    app
      .request({
        method: 'DELETE',
        url: `${app.forum.attribute('apiUrl')}/users/${this.attrs.user.id()}/cover`,
      })
      .then(this.success.bind(this), this.failure.bind(this));
  }

  success(response) {
    app.store.pushPayload(response);

    this.showAlert('success');
    this.loading = false;
    m.redraw();
    this.hide();
  }

  failure() {
    this.showAlert('error');
    this.loading = false;
    m.redraw();
  }

  showAlert(type) {
    this.alertAttrs.content = app.translator.trans(`sycho-profile-cover.forum.${this.context}.${type}`);
    this.alertAttrs.type = type;
  }
}
