Sternebewertung: Nützlich

import h from 'hyperscript';
import showTooltip from '../tooltip/tooltip';

const LockState = {
  NO_LOCK: null,
  LOCKED: 'locked',
  UNLOCKED: 'unlocked',
};

const createValuesById = $inputs => (
  Array.from($inputs).reduce(
    (result, $input) => Object.assign(result, {
      [$input.id]: $input.value,
    }),
    {},
  )
);

export default class StarForm {
  constructor(element, submitForm) {
    this.$element = element;
    this.submitForm = submitForm;
    this.$fieldset = element.querySelector('.star-rating__fieldset');
    this.$count = element.querySelector('.star-rating__count');
    this.$starsWrapper = element.querySelector('.star-rating__stars');
    this.$inputs = element.querySelectorAll('.star-rating__input');
    this.$labels = element.querySelectorAll('.star-rating__label');
    this.$form = element.querySelector('.star-rating__form');
    this.lockState = LockState.NO_LOCK;

    this.id = element.dataset.itemId;
    this.avgRating = Math.round(Number(element.dataset.averageRating));
    this.ratingType = element.dataset.ratingType;
    this.endpoint = element.dataset.endpoint;

    this.localStorageId = `${this.id}-${this.ratingType}`;
    this.value = this.getStorage();
    this.valuesById = createValuesById(this.$inputs);
    this.removeUnlockedTooltip = null;

    this.init();
    this.initMediaListener();
  }

  getStorage() {
    return window.localStorage.getItem(this.localStorageId) || null;
  }

  setStorage(rating) {
    window.localStorage.setItem(this.localStorageId, rating);
  }

  setLockState(lockState) {
    this.lockState = lockState;
    this.$element.dataset.lockState = lockState;
  }

  setDisabled() {
    this.disabled = true;
    this.$inputs.forEach($input => $input.setAttribute('disabled', 'disabled'));
  }

  getValueByLabel($label) {
    const id = $label.getAttribute('for');

    return this.valuesById[id];
  }

  fillStars(rating) {
    this.$labels.forEach(($label, index) => {
      if (index + 1 <= rating) {
        $label.classList.add('star-rating__label--filled');

        return;
      }

      $label.classList.remove('star-rating__label--filled');
    });
  }

  handleCatcherClick() {
    if (this.lockState !== LockState.LOCKED) {
      return;
    }

    this.removeUnlockedTooltip = showTooltip(this.$fieldset, {
      text: 'Bitte Bewertung abgeben',
      color: 'blue-light',
    });

    this.setLockState(LockState.UNLOCKED);
  }

  handleInputChange(event) {
    const number = event.target.value;
    this.fillStars(number);
  }

  handleLabelClick(event) {
    if (this.disabled) {
      showTooltip(this.$fieldset, {
        text: 'Bewertung bereits abgegeben!',
        timeout: 3000,
      });

      return;
    }

    this.value = this.getValueByLabel(event.target);
    this.handleFormSubmit();
  }

  handleLabelMouseEnter(event) {
    if (this.disabled) {
      return;
    }

    const value = this.getValueByLabel(event.target);

    this.$element.classList.add('star-rating--hovered');
    this.fillStars(Number(value));
  }

  handleLabelMouseLeave() {
    this.$element.classList.remove('star-rating--hovered');
    this.fillStars(this.avgRating);
  }

  handleFormSubmit() {
    const rating = Number(this.value);

    this.setDisabled();
    this.setStorage(rating);
    this.setLockState(LockState.NO_LOCK);

    if (typeof this.removeUnlockedTooltip === 'function') {
      this.removeUnlockedTooltip();
    }

    showTooltip(this.$fieldset, {
      text: 'Danke für Ihre Bewertung!',
      timeout: 3000,
    });

    this.submitForm(this.id, rating, this.ratingType, this.endpoint, (data) => {
      this.$count.textContent = `(${data.count})`;
      this.avgRating = Math.round(data.averagerating);
      this.fillStars(this.avgRating);
    });
  }

  // Setup an extra unlock step for small viewports. We assume that small
  // viewports are touch devices and therefore can't visualize the hover state.
  initMediaListener() {
    const smallMediaTest = window.matchMedia('(max-width: 1024px)');

    const listener = (query) => {
      const lockState = query.matches && !this.disabled
        ? LockState.LOCKED
        : LockState.NO_LOCK;

      this.setLockState(lockState);
    };

    smallMediaTest.addListener(listener);
    listener(smallMediaTest);
  }

  init() {
    if (this.value) {
      this.setDisabled();
    }

    this.fillStars(this.avgRating);

    this.$starsWrapper.appendChild(
      h('div.star-rating__catcher', {
        onclick: () => this.handleCatcherClick(),
      }),
    );

    this.$form.addEventListener('submit', (event) => {
      event.preventDefault();
      this.handleFormSubmit();
    });

    this.$inputs.forEach(($input) => {
      $input.addEventListener('change', event => this.handleInputChange(event));
    });

    this.$labels.forEach(($label) => {
      $label.addEventListener('click', event => this.handleLabelClick(event));
      $label.addEventListener('mouseenter', event => this.handleLabelMouseEnter(event));
      $label.addEventListener('mouseleave', event => this.handleLabelMouseLeave(event));
    });
  }
}