class TimePicker extends HTMLElement {
  static get observedAttributes() {return ['hours', 'minutes', 'seconds']};

  constructor() {
  	super();
  	this.initShadowDOM();
    this.setUIReferences();
    this.updateDisplay();
    this.addEventListeners();
  }

  initShadowDOM() {
    this.attachShadow({mode: 'open'});
    const clockDOM = document.getElementById('time-picker-dom');
    const clockDOMClone = document.importNode(clockDOM.content, true);
    this.shadowRoot.appendChild(clockDOMClone);
  }

  setUIReferences() {
    const fields = this.shadowRoot.querySelectorAll('.field');
    this.hourDisplay = fields[0].querySelector('input');
    this.hourIncrement = fields[0].querySelectorAll('svg')[0];
    this.hourDecrement = fields[0].querySelectorAll('svg')[1];

    this.minuteDisplay = fields[1].querySelector('input');
    this.minuteIncrement = fields[1].querySelectorAll('svg')[0];
    this.minuteDecrement = fields[1].querySelectorAll('svg')[1];

    this.secondDisplay = fields[2].querySelector('input');
    this.secondIncrement = fields[2].querySelectorAll('svg')[0];
    this.secondDecrement = fields[2].querySelectorAll('svg')[1];
  }
  
  set hours(value) {
    const hours = parseInt(value);
    if (this.validateHours(hours)) {
      this.setAttribute('hours', hours);
    }
  }
  
  set minutes(value) {
    const minutes = parseInt(value);
    if (this.validateMinutesOrSeconds(minutes)) {
      this.setAttribute('minutes', minutes);
    }
  }
  
  set seconds(value) {
    const seconds = parseInt(value);
    if (this.validateMinutesOrSeconds(seconds)) {
      this.setAttribute('seconds', seconds);
    }
  }
  
  get hours() {
    return parseInt(this.getAttribute('hours'));
  }
  
  get minutes() {
    return parseInt(this.getAttribute('minutes'));
  }
  
  get seconds() {
    return parseInt(this.getAttribute('seconds'));
  }

  addEventListeners() {
    this.incrementHour = this.incrementHour.bind(this);
    this.decrementHour = this.decrementHour.bind(this);
    this.incrementMinute = this.incrementMinute.bind(this);
    this.decrementMinute = this.decrementMinute.bind(this);
    this.incrementSecond = this.incrementSecond.bind(this);
    this.decrementSecond = this.decrementSecond.bind(this);
    
    function executeOnEnter(fn, event) {
      if (event.key === 'Enter') {
        fn();
      }
    }
    
    this.hourIncrement.addEventListener('click', this.incrementHour);
    this.hourIncrement.addEventListener('keydown', executeOnEnter.bind(this, this.incrementHour));
    
    this.hourDecrement.addEventListener('click', this.decrementHour);
    this.hourDecrement.addEventListener('keydown', executeOnEnter.bind(this, this.decrementHour));
    
    this.minuteIncrement.addEventListener('click', this.incrementMinute);
    this.minuteIncrement.addEventListener('keydown', executeOnEnter.bind(this, this.incrementMinute));
    
    this.minuteDecrement.addEventListener('click', this.decrementMinute);
    this.minuteDecrement.addEventListener('keydown', executeOnEnter.bind(this, this.decrementMinute));
    
    this.secondIncrement.addEventListener('click', this.incrementSecond);
    this.secondIncrement.addEventListener('keydown', executeOnEnter.bind(this, this.incrementSecond));
    
    this.secondDecrement.addEventListener('click', this.decrementSecond);
    this.secondDecrement.addEventListener('keydown', executeOnEnter.bind(this, this.decrementSecond));

    this.hourDisplay.addEventListener('change', event => {
      const hours = parseInt(event.currentTarget.value);
      if (this.validateHours(hours)) {
        this.setAttribute('hours', hours);
      } else {
        this.updateDisplay();
      }
    });

    this.minuteDisplay.addEventListener('change', event => {
      const minutes = parseInt(event.currentTarget.value);
      if (this.validateMinutesOrSeconds(minutes)) {
        this.setAttribute('minutes', minutes);
      } else {
        this.updateDisplay();
      }
    });

    this.secondDisplay.addEventListener('change', event => {
      const seconds = parseInt(event.currentTarget.value);
      if (this.validateMinutesOrSeconds(seconds)) {
        this.setAttribute('seconds', seconds);
      } else {
        this.updateDisplay();
      }
    });
  }

  attributeChangedCallback(name, oldValue, newValue) {
  	if (['hours', 'minutes', 'seconds'].includes(name)) {
      this.updateDisplay();
    }
  }

  incrementHour() {
    let hours = parseInt(this.getAttribute('hours'));
    hours = (hours + 1) % 24;
    this.setAttribute('hours', hours);
  }

  decrementHour() {
    let hours = parseInt(this.getAttribute('hours'));
    --hours;
    if (hours === -1) {
      hours = 23;
    }
    this.setAttribute('hours', hours);
  }

  incrementMinute() {
    let minutes = parseInt(this.getAttribute('minutes'));
    minutes = (minutes + 1) % 60;
    if (minutes === 0) {
      this.incrementHour();
    }

    this.setAttribute('minutes', minutes);
  }

  decrementMinute() {
    let minutes = parseInt(this.getAttribute('minutes'));
    --minutes;
    if (minutes === -1) {
      minutes = 59;
      this.decrementHour();
    }

    this.setAttribute('minutes', minutes);
  }

  incrementSecond() {
    let seconds = parseInt(this.getAttribute('seconds'));
    seconds = (seconds + 1) % 60;
    if (seconds === 0) {
      this.incrementMinute();
    }

    this.setAttribute('seconds', seconds);
  }

  decrementSecond() {
    let seconds = parseInt(this.getAttribute('seconds'));
  	--seconds;
    if (seconds === -1) {
      seconds = 59;
      this.decrementMinute();
    }

    this.setAttribute('seconds', seconds);
  }

  updateDisplay() {
    this.hourDisplay.value = this.formatClockValue(this.getAttribute('hours'));
    this.minuteDisplay.value = this.formatClockValue(this.getAttribute('minutes'));
    this.secondDisplay.value = this.formatClockValue(this.getAttribute('seconds'));
  }

  formatClockValue(value) {
    return value.toString().padStart(2, '0');
  }

  validateHours(value) {
    return Number.isInteger(value) && value >= 0 && value < 24;
  }

  validateMinutesOrSeconds(value) {
    return Number.isInteger(value) && value >= 0 && value < 60;
  }

  get time() {
    const nowDate = new Date();
    return Date.UTC(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), this.getAttribute('hours'), this.getAttribute('minutes'), this.getAttribute('seconds'));
  }
}

window.customElements.define('time-picker', TimePicker);