import SearchModel from '../models/SearchModel';
import ContentModel from '../models/ContentModel';
import AppView from '../views/AppView';
import SearchView from '../views/SearchView';
import ContenView from '../views/ContentView';
import NavigationView from '../views/NavigationView';

export default class App {
  constructor() {
    this.pageNumber = 1;
    this.pageClipsCount = 4;
    this.pageElementWidth = 320;
  }

  async start() {
    const page = {
      number: this.pageNumber,
      clipsCount: this.pageClipsCount,
      elementWidth: this.pageElementWidth,
    };

    const search = new SearchModel();
    const appView = new AppView();
    appView.render();
    const searchView = new SearchView();
    searchView.render();
    const navigationView = new NavigationView();
    navigationView.render();

    const input = document.getElementById('search-input');
    const leftButton = document.getElementById('left-button');
    const rightButton = document.getElementById('right-button');
    const centerButton = document.getElementById('center-button');
    centerButton.textContent = page.number;

    function scroll(direction) {
      const slider = document.getElementById('content-list');

      if (direction === 'left' && page.number > 1) {
        page.number -= 1;
        slider.scrollLeft -= (page.elementWidth * page.clipsCount);
      } else if (direction === 'right') {
        page.number += 1;
        slider.scrollLeft += (page.elementWidth * page.clipsCount);
        if (page.number * page.clipsCount > 15) {
          console.log('woops');
        }
      }

      if (page.number === 1) {
        leftButton.className += ' hidden';
      } else leftButton.classList.remove('hidden');

      centerButton.textContent = page.number;
    }

    function addScrolling() {
      const slider = document.getElementById('content-list');
      let isDown = false;
      let startX;
      let currentX;

      slider.addEventListener('mousedown', (e) => {
        isDown = true;
        slider.classList.add('active');
        startX = e.pageX - slider.offsetLeft;
      });

      slider.addEventListener('mouseleave', () => {
        isDown = false;
        slider.classList.remove('active');
      });
      slider.addEventListener('mouseup', () => {
        isDown = false;
        slider.classList.remove('active');
        scroll(currentX > startX ? 'left' : 'right');
      });
      slider.addEventListener('mousemove', (e) => {
        if (!isDown) return;
        e.preventDefault();
        currentX = e.pageX - slider.offsetLeft;
      });
    }

    leftButton.addEventListener('click', () => scroll('left'));
    rightButton.addEventListener('click', () => scroll('right'));

    input.onchange = async function onchangeSearch() {
      appView.clearContent();
      search.setUrls(input.value);
      this.state = search.getUrls();
      const model = new ContentModel(this.state);
      await model.getData();
      await model.getViewsData();
      const clipsData = model.getClips();
      const contentView = new ContenView(clipsData);
      contentView.render();
      const navigation = document.getElementById('navigation');
      navigation.classList.remove('hidden');

      if (page.number !== 1) {
        leftButton.className += ' hidden';
        page.number = 1;
        centerButton.textContent = page.number;
      }
      addScrolling();
    };
  }
}