import EmberObject from '@ember/object';
import { A } from '@ember/array';
import $ from 'jquery';
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import { uploadFile } from '../../helpers/upload-file';

moduleForComponent(
  'field-file',
  'Integration | Component | Core | field file',
  {
    integration: true
  }
);

const createField = function() {
  let field = EmberObject.create({
    id: 'field',
    slug: 'field',
    label: 'File'
  });
  return field;
};

test('simple file field', function(assert) {
  this.set('field', createField());
  this.render(hbs`{{field-file model=field}}`);
  assert.equal(this.$('input[type="file"]').length, 1);
  assert.equal(this.$('input[type="file"]').attr('name'), 'field');
  assert.equal(
    this.$('label[for="id_field"]')
      .text()
      .trim(),
    'File'
  );
});

test('it has value', function(assert) {
  this.set('field', createField());
  this.set(
    'field.values',
    A([
      {
        filename: 'test.zip',
        url: 'http://www.example.com'
      }
    ])
  );
  this.render(hbs`{{field-file model=field}}`);
  assert.ok(this.$('input[name="field-clear"]'));
  assert.ok(
    this.$('.file--exists')
      .text()
      .indexOf('test.zip') > 0
  );
});

test('it is disabled', function(assert) {
  this.set('field', createField());
  this.set('field.disabled', true);
  this.render(hbs`{{field-file model=field}}`);
  assert.ok(this.$('input[type="file"]').is(':disabled'));
});

test('it is not disabled', function(assert) {
  this.set('field', createField());
  this.set('field.disabled', false);
  this.render(hbs`{{field-file model=field}}`);
  assert.notOk(this.$('input[type="file"]').is(':disabled'));
});

test('it is readonly', function(assert) {
  this.set('field', createField());
  this.set('forceReadonly', true);
  this.render(hbs`{{field-file model=field forceReadonly=forceReadonly}}`);
  assert.ok(this.$('input[type="file"]').is(':disabled'));
});

test('it is not readonly', function(assert) {
  this.set('field', createField());
  this.set('forceReadonly', false);
  this.render(hbs`{{field-file model=field forceReadonly=forceReadonly}}`);
  assert.notOk(this.$('input[type="file"]').is(':disabled'));
});

test('it is required', function(assert) {
  this.set('field', createField());
  this.set('field.required', true);
  this.render(hbs`{{field-file model=field}}`);
  assert.ok(this.$('input[type="file"]').is(':required'));
});

test('it is not required', function(assert) {
  this.set('field', createField());
  this.set('field.required', false);
  this.render(hbs`{{field-file model=field}}`);
  assert.notOk(this.$('input[type="file"]').is(':required'));
});

test('it has helpText', function(assert) {
  this.set('field', createField());
  this.set('field.description', 'Coin coin');
  this.render(hbs`{{field-file model=field}}`);
  assert.equal(
    this.$('p')
      .text()
      .trim(),
    'Coin coin'
  );
});

test('it is possible to select a file', function(assert) {
  this.set('field', createField());
  this.render(hbs`{{field-file model=field}}`);
  uploadFile(this.$('input[type="file"]'));
  assert.ok(
    this.$('.file--selection')
      .text()
      .indexOf('test.txt') > 0
  );
});

test('it shows the current file', function(assert) {
  this.set('field', createField());
  this.set(
    'field.values',
    A([
      {
        filename: 'test.zip',
        url: 'http://www.example.com'
      }
    ])
  );
  this.render(hbs`{{field-file model=field}}`);
  assert.ok(
    this.$('.file--exists')
      .text()
      .indexOf('test.zip') > 0
  );
});

test('it is possible to mark a deleted the current file', function(assert) {
  this.set('deleteMe', false);
  this.set('field', createField());
  this.set(
    'field.values',
    A([
      {
        filename: 'test.zip',
        url: 'http://www.example.com'
      }
    ])
  );
  this.render(hbs`{{field-file model=field isCurrentFileDeleted=deleteMe}}`);
  assert.notOk(this.get('deleteMe'));
  $('input[name="field-clear"]').prop('checked', true);
  this.$('input[name="field-clear"]').trigger('change');
  assert.ok(this.get('deleteMe'));
});

test('it is possible to select a file to override the current file', function(assert) {
  this.set('deleteMe', false);
  this.set('field', createField());
  this.set(
    'field.values',
    A([
      {
        filename: 'test.zip',
        url: 'http://www.example.com'
      }
    ])
  );
  this.render(hbs`{{field-file model=field isCurrentFileDeleted=deleteMe}}`);
  assert.notOk($('input[name="field-clear"]').is(':disabled'));
  $('input[name="field-clear"]').prop('checked', true);
  this.$('input[name="field-clear"]').trigger('change');
  assert.ok(this.get('deleteMe'));
  assert.notOk($('input[name="field-clear"]').is(':disabled'));
  uploadFile(this.$('input[type="file"]'));
  assert.notOk(this.get('deleteMe'));
  assert.ok($('input[name="field-clear"]').is(':disabled'));
  assert.ok(
    this.$('.file--selection')
      .text()
      .indexOf('test.txt') > 0
  );
});

test('it is required when there is no current file', function(assert) {
  this.set('deleteMe', false);
  this.set('field', createField());
  this.set('field.required', true);
  this.render(hbs`{{field-file model=field isCurrentFileDeleted=deleteMe}}`);
  assert.ok(this.$('input[type="file"]').is(':required'));
});

test('it is not required when a current file is defined', function(assert) {
  this.set('deleteMe', false);
  this.set('field', createField());
  this.set('field.required', true);
  this.set(
    'field.values',
    A([
      {
        filename: 'test.zip',
        url: 'http://www.example.com'
      }
    ])
  );
  this.render(hbs`{{field-file model=field isCurrentFileDeleted=deleteMe}}`);
  assert.notOk(this.$('input[type="file"]').is(':required'));
});
