import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import moment from 'moment';
import isValidAmount from 'kredits-web/utils/is-valid-amount';

export default class AddExpenseItemComponent extends Component {
  // @tracked newExpense = Expense.create();
  @tracked amount = '0';
  @tracked currency = 'EUR';
  @tracked date = moment().startOf('hour').toDate();
  @tracked title = '';
  @tracked description = '';
  @tracked url = '';
  @tracked tags = '';

  defaultDate = moment().startOf('hour').toDate();

  currencies = [
    { code: 'EUR' },
    { code: 'USD' }
  ];

  get isValidAmount () {
    return isValidAmount(this.amount);
  }

  get amountInputClass () {
    return this.isValidTotal ? 'valid' : '';
  }

  get submitButtonEnabled () {
    return true;
  }

  get submitButtonDisabled () {
    return !this.submitButtonEnabled;
  }

  validateForm () {
    const formEl = document.querySelector('form#add-expense-item');
    const inputFields = formEl.querySelectorAll('input');
    inputFields.forEach(i => i.classList.remove('invalid'));
    let validity = true;

    if (!this.isValidAmount) {
      document.querySelector('input[name=expense-amount]').classList.add('invalid');
      validity = false;
    }

    if (!formEl.checkValidity()) {
      inputFields.forEach(i => {
        if (!i.validity.valid) {
          i.classList.add('invalid');
          validity = false;
        }
      })
    }

    return validity;
  }

  @action
  submit (e) {
    e.preventDefault();

    let dateInput = (this.date instanceof Array) ?
      this.date[0] : this.date;
    const [ date ] = dateInput.toISOString().split('T');

    const isValid = this.validateForm();

    if (isValid) {
      const expense = {
        amount: parseFloat(this.amount),
        currency: this.currency,
        date: date,
        title: this.title,
        description: this.description,
        url: this.url,
        tags: this.tags.split(',').map(t => t.trim())
      }
      this.args.addExpenseItem(expense);
    } else {
      return false;
    }
  }
}