"use strict";

var view;
window.scrollTo(0, 0);
document.addEventListener('DOMContentLoaded', function () {
  window.onpopstate = function () {
    window.location.href = window.location.href;
  };

  var mySwiper;
  /* ====================
  =======================
        VIEW OBJECT
  =======================
  ==================== */

  view = {
    transTime: 250,
    title: document.querySelector('title').textContent,
    url: document.querySelector('title').dataset.url,
    description: document.querySelector('meta[description]').getAttribute('description'),
    device: '',
    state: 'grid',
    scrollPos: 0,
    prevState: {
      type: 'none',
      url: '',
      title: ''
    },
    header: {
      container: document.querySelector('.header'),
      logo: document.querySelector('.header__logo'),
      logoOriginSize: parseInt(window.getComputedStyle(document.querySelector('.header__logo')).getPropertyValue('font-size')),
      logoBtn: document.querySelector('.logoBtn'),
      size: 'big',
      btns: {
        enable: true,
        container: document.querySelector('.header__views'),
        size: document.querySelectorAll('.views__btn--smaller, .views__btn--bigger'),
        smaller: document.querySelector('.views__btn--smaller'),
        bigger: document.querySelector('.views__btn--bigger'),
        close: document.querySelector('.views__btn--close'),
        list: document.querySelector('.views__btn--mobile'),
        toClose: function toClose() {
          if (window.innerWidth > 800) {
            view.header.btns.size.forEach(function (btn) {
              btn.classList.add('hide');
              setTimeout(function () {
                btn.style.display = 'none';
              }, view.transTime);
            });
          } else {
            view.header.btns.list.classList.add('hide');
            setTimeout(function () {
              view.header.btns.list.style.display = 'none';
            }, view.transTime);
          }

          setTimeout(function () {
            view.header.btns.close.style.display = 'block';
            view.header.btns.close.classList.remove('hide');
          }, view.transTime);
        },
        toSize: function toSize() {
          view.header.btns.close.classList.remove('hide');
          setTimeout(function () {
            view.header.btns.close.style.display = 'none';
            view.header.btns.size.forEach(function (btn) {
              btn.style.display = 'block';
              setTimeout(function () {
                btn.classList.remove('hide');
              }, 50);
            });
          }, view.transTime);
        },
        toMobileSize: function toMobileSize() {
          view.header.btns.close.classList.remove('hide');
          setTimeout(function () {
            view.header.btns.close.style.display = 'none';
            view.header.btns.list.style.display = 'block';

            if (view.scrollPos !== 0) {
              setTimeout(function () {
                view.header.btns.list.classList.remove('hide');
              }, 50);
            }
          }, view.transTime);
        }
      },
      reduce: function reduce() {
        if (view.header.size === 'big') {
          view.header.size = 'normal';
          view.header.logo.classList.remove('header__logo--big');
          view.header.container.classList.remove('header--big');
          setTimeout(function () {
            view.grid.container.classList.remove('grid--distant');
          }, 100);
          setTimeout(function () {
            view.header.btns.container.classList.remove('header__views--unvisible');
            view.header.size = 'normal';
          }, view.transTime);
        }
      },
      toInfo: function toInfo() {
        view.header.logo.textContent = 'INFO';
      },
      toName: function toName() {
        view.header.logo.textContent = 'DATA';
      }
    },
    grid: {
      container: document.querySelector('.grid'),
      blocks: document.querySelectorAll('.block'),
      images: document.querySelectorAll('.block__image'),
      showBlocks: function showBlocks(block) {
        var image = block.querySelector('.block__image');

        if (image.complete) {
          setTimeout(function () {
            block.parentNode.classList.remove('toProject--wait');
            setTimeout(function () {
              block.classList.remove('hide');
            }, view.transTime);
          }, 100);
        } else {
          image.addEventListener('load', function () {
            block.parentNode.classList.remove('toProject--wait');
            setTimeout(function () {
              block.classList.remove('hide');
            }, view.transTime);
          });
        }
      },
      smaller: function smaller() {
        if (view.state === 'grid' && view.header.btns.enable === true) {
          if (view.grid.container.classList.contains('grid--0')) {
            view.grid.container.classList.remove('grid--full');
            view.grid.blocks.forEach(function (block) {
              block.querySelector('.block__image').classList.remove('block__image--full');
            });
            view.grid.container.classList.remove('grid--0');
            view.grid.container.classList.add('grid--1');
          } else if (view.grid.container.classList.contains('grid--1')) {
            view.grid.container.classList.remove('grid--1');
            view.grid.container.classList.add('grid--2');
          } else if (view.grid.container.classList.contains('grid--2')) {
            view.grid.container.classList.remove('grid--2');
            view.grid.container.classList.add('grid--3');
          } else if (view.grid.container.classList.contains('grid--3')) {
            view.grid.container.classList.remove('grid--3');
            view.grid.container.classList.add('grid--4');
          } else if (view.grid.container.classList.contains('grid--4')) {
            view.grid.container.classList.remove('grid--4');
            view.grid.container.classList.add('grid--5');
          } else if (view.grid.container.classList.contains('grid--5')) {
            view.grid.container.classList.remove('grid--5');
            view.grid.container.classList.add('list');
            view.list.init();
          }
        }
      },
      bigger: function bigger() {
        if (view.state !== 'project' && view.header.btns.enable === true) {
          view.header.btns.enable = false; // if (view.grid.container.classList.contains('grid--0') !== true) {
          //   view.grid.container.classList.add('hide')
          //   view.list.container.classList.add('hide')
          // }

          if (view.grid.container.classList.contains('list')) {
            view.list.toGrid();
          } else if (view.grid.container.classList.contains('grid--5')) {
            view.grid.container.classList.remove('grid--5');
            view.grid.container.classList.add('grid--4');
          } else if (view.grid.container.classList.contains('grid--4')) {
            view.grid.container.classList.remove('grid--4');
            view.grid.container.classList.add('grid--3');
          } else if (view.grid.container.classList.contains('grid--3')) {
            view.grid.container.classList.remove('grid--3');
            view.grid.container.classList.add('grid--2');
          } else if (view.grid.container.classList.contains('grid--2')) {
            view.grid.container.classList.remove('grid--2');
            view.grid.container.classList.add('grid--1');
          } else if (view.grid.container.classList.contains('grid--1')) {
            view.grid.container.classList.remove('grid--1');
            view.grid.container.classList.add('grid--0');
            view.grid.blocks.forEach(function (block) {
              view.grid.container.classList.add('grid--full');
              block.querySelector('.block__image').classList.add('block__image--full');
            });
          }

          setTimeout(function () {
            view.grid.container.classList.remove('hide');
            view.header.btns.enable = true;
          }, 100);
        }
      },
      projects: document.querySelectorAll('.toProject')
    },
    project: {
      container: document.querySelector('.project'),
      init: function init(link, title, toHide, toFill) {
        view.prevState.type = view.state;
        view.prevState.url = '';
        view.prevState.title = '';
        view.state = 'project';
        history.pushState(null, title, link);
        toHide.classList.add('hide');
        fetch(link).then(function (res) {
          return res.text();
        }).then(function (html) {
          var domElement = document.createElement('div');
          domElement.classList.add('test-container');
          domElement.innerHTML = html;
          var projectContent = domElement.querySelector('.projectContainer').innerHTML;
          toFill.innerHTML = projectContent;
          view.project.swiper.init();
        }).then(function () {
          document.querySelector('.toProjectDesc').addEventListener('click', function () {
            console.log(document.querySelectorAll('.swiper-slide').length - 2);
            mySwiper.slideTo(document.querySelectorAll('.swiper-slide').length - 2);
          });
          setTimeout(function () {
            toFill.style.display = 'block';
            setTimeout(function () {
              view.project.fadeIn(toHide, toFill);
            }, 50);
          }, view.transTime);
        });
      },
      fadeIn: function fadeIn(toHide, toFill) {
        toHide.style.display = 'none';
        toFill.style.display = 'block';
        toFill.classList.remove('hide');
        toHide.removeEventListener('transitionend', view.project.fadeIn());
      },
      close: function close() {
        history.pushState(null, view.title, view.url);
        console.log("view.state : ".concat(view.state));
        console.log("prevState : ".concat(view.prevState.type));
        view.project.container.classList.add('hide');
        setTimeout(function () {
          view.project.container.style.display = 'none';

          if (view.prevState.type === 'list') {
            var toShow = window.innerWidth > 800 ? view.list.container : view.list.mobileContainer;
            toShow.style.display = 'block';
            setTimeout(function () {
              toShow.classList.remove('hide');
              view.state = 'list';
            }, 50);
          } else if (view.prevState.type === 'grid' || view.prevState.type === 'agency') {
            if (view.grid.container.classList.contains('list')) {
              window.innerWidth > 800 ? view.list.container.style.display = 'block' : view.list.mobileContainer.style.display = 'block';
              setTimeout(function () {
                window.innerWidth > 800 ? view.list.container.classList.remove('hide') : view.list.mobileContainer.classList.remove('hide');
                view.state = 'list';
              }, 50);
            } else {
              window.innerWidth > 800 ? view.grid.container.style.display = 'grid' : view.grid.container.style.display = 'block';
              setTimeout(function () {
                view.grid.container.classList.remove('hide');
                view.state = 'grid';
              }, 50);
            }
          } else if (view.prevState.type === 'project') {
            view.project.swiper.destroy();
            view.project.init(view.prevState.url, view.prevState.title, document.querySelector('.project'), document.querySelector('.project'));
          }
        }, view.transTime);
      },
      swiper: {
        init: function init() {
          mySwiper = new Swiper('.swiper-container', {
            // Optional parameters
            direction: 'horizontal',
            loop: true,
            observer: true,
            observeSlideChildren: true,
            observeParents: true,
            speed: 300,
            autoplay: {
              delay: 2000
            },
            // Responsive
            breakpoints: {
              800: {
                speed: 500,
                autoplay: false
              }
            },
            // Navigation arrows
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            },
            // Keyboard control
            keyboard: {
              enabled: true
            }
          });
        },
        destroy: function destroy() {
          mySwiper.destroy();
        }
      }
    },
    agency: {
      init: function init(link, title, toHide, toFill) {
        view.prevState.type = view.state;

        if (view.state === 'grid' || view.state === 'list') {
          view.prevState.url = '';
          view.prevState.title = '';
        } else if (view.state === 'project') {
          view.prevState.url = window.location.href;
          view.prevState.title = title;
        }

        view.state = 'agency';
        history.pushState(null, title, link);
        toHide.classList.add('hide');
        fetch(link).then(function (res) {
          return res.text();
        }).then(function (html) {
          var domElement = document.createElement('div');
          domElement.classList.add('test-container');
          domElement.innerHTML = html;
          var pageContent = domElement.querySelector('.wrapper').innerHTML;
          setTimeout(function () {
            toFill.innerHTML = pageContent;
            toFill.style.display = 'block';
            setTimeout(function () {
              view.project.fadeIn(toHide, toFill);
            }, 50);
          }, view.transTime);
        });
      }
    },
    list: {
      container: document.querySelector('.list'),
      mobileContainer: document.querySelector('.list--mobile'),
      init: function init() {
        var list = view.device === 'desktop' ? view.list.container : view.list.mobileContainer;
        view.prevState.type = view.state;
        view.prevState.url = '';
        view.prevState.title = '';
        view.state = 'list';
        view.grid.container.style.display = 'none';
        list.style.display = 'block';
        setTimeout(function () {
          list.classList.remove('hide');
        }, 50);
      },
      toGrid: function toGrid() {
        view.prevState.type = view.state;
        view.state = 'grid';
        view.grid.container.classList.remove('list');
        view.grid.container.classList.add('grid--5');
        window.innerWidth > 800 ? view.list.container.style.display = 'none' : view.list.mobileContainer.style.display = 'none';
        view.grid.container.style.display = '';
      }
    }
  };
  /* ====================
  =======================
      INTERACTIONS
  =======================
  ==================== */
  // =========================================== BLOCK FADE IN ON LOAD

  if (window.innerWidth > 800) {
    view.device = 'desktop';
  } else {
    view.device = 'mobile';
  }

  view.grid.blocks.forEach(function (block) {
    view.grid.showBlocks(block);
  }); // =========================================== LOGO STRETCHING

  view.header.logo.style.fontSize = view.header.logoOriginSize;
  var prevScrollPos = 0;
  window.addEventListener('scroll', function (event) {
    if (window.scrollY * -1.007 + view.header.logoOriginSize >= 40 && view.state !== 'agency' && view.state !== 'project') {
      view.header.logo.style.fontSize = "".concat(window.scrollY * -1.007 + view.header.logoOriginSize, "px");

      if (!view.header.btns.list.classList.contains('hide')) {
        view.header.btns.list.classList.add('hide');
      }
    } else {
      if (view.header.logo.style.fontSize !== '40 px') {
        view.header.logo.style.fontSize = '40px';
        view.header.btns.list.classList.remove('hide');
      }
    }
  }); // =========================================== VIEW BUTTON

  view.header.btns.smaller.addEventListener('click', function () {
    view.grid.smaller();
  });
  view.header.btns.bigger.addEventListener('click', function () {
    view.grid.bigger();
  }); // =========================================== CLOSE BTN

  view.header.btns.close.addEventListener('click', function () {
    if (view.header.btns.enable === true) {
      if (view.state === 'agency') {
        view.header.toName();
      }

      if (view.state === 'project' || view.prevState.type === 'grid' || view.prevState.type === 'list') {
        if (view.scrollPos === 0) {
          view.header.logo.style.fontSize = view.header.logoOriginSize + 'px';
          setTimeout(function () {
            view.header.logo.style.transition = '';
          }, 300);
        } else {
          setTimeout(function () {
            window.scrollTo(0, view.scrollPos);
            setTimeout(function () {
              view.header.logo.style.transition = '';
            }, 300);
          }, 300);
        }
      }

      view.project.close();

      if (view.prevState.type !== 'project') {
        if (window.innerWidth > 800) {
          view.header.btns.toSize();
        } else {
          view.header.btns.toMobileSize();
        }
      }
    }
  });
  view.header.btns.list.addEventListener('click', function () {
    if (view.state === 'grid') {
      view.state === 'list';
      view.header.btns.list.querySelector('h1').textContent = 'images';
      view.grid.container.classList.add('list');
      view.list.init();
    } else {
      view.state === 'grid';
      view.header.btns.list.querySelector('h1').textContent = 'liste';
      view.grid.container.classList.remove('list');
      view.list.toGrid();
    }
  });
  document.addEventListener('keydown', function (event) {
    if (view.state === 'project' && view.header.btns.enable === true && event.code === 'Escape') {
      if (view.header.btns.enable === true) {
        if (view.state === 'agency') {
          view.header.toName();
        }

        if (view.state === 'project' || view.prevState.type === 'grid' || view.prevState.type === 'list') {
          if (view.scrollPos === 0) {
            view.header.logo.style.fontSize = view.header.logoOriginSize + 'px';
            setTimeout(function () {
              view.header.logo.style.transition = '';
            }, 300);
          } else {
            setTimeout(function () {
              window.scrollTo(0, view.scrollPos);
              setTimeout(function () {
                view.header.logo.style.transition = '';
              }, 300);
            }, 300);
          }
        }

        view.project.close();

        if (view.prevState.type !== 'project') {
          if (window.innerWidth > 800) {
            view.header.btns.toSize();
          } else {
            view.header.btns.toMobileSize();
          }
        }
      }
    }
  });
  document.querySelector('.grid, grid--mobile').addEventListener('click', function () {
    if (view.header.size === 'big') {
      view.header.reduce();
    }
  });
  view.header.logo.addEventListener('mouseenter', function () {
    if (view.state !== 'agency') {
      view.header.toInfo();
    }
  });
  view.header.logo.addEventListener('mouseleave', function () {
    if (view.state !== 'agency') {
      view.header.toName();
    }
  }); // /* ====================
  // =======================
  // --------- SPA ---------
  // =======================
  // ==================== */

  document.querySelectorAll('.toProject, .list__project, .list__project--mobile').forEach(function (project) {
    project.addEventListener('click', function (e) {
      view.scrollPos = window.scrollY;
      e.preventDefault();
      view.header.logo.style.transition = 'font-size .3s ease-in-out';
      setTimeout(function () {
        view.header.logo.style.fontSize = '2.5rem';
      }, 10);
      view.header.btns.toClose();
      var link = project.getAttribute('href');
      var title = project.dataset.title;
      var description = project.dataset.description;

      if (view.state === 'list') {
        window.innerWidth > 800 ? view.project.init(link, title, view.list.container, view.project.container) : view.project.init(link, title, view.list.mobileContainer, view.project.container);
      } else {
        view.project.init(link, title, view.grid.container, view.project.container);
      }
    });
  }); // =========================================== LOGO BTN AGENCE

  view.header.logoBtn.addEventListener('click', function (e) {
    e.preventDefault();
    view.scrollPos = window.scrollY;
    view.header.logo.style.transition = 'font-size .3s ease-in-out';
    setTimeout(function () {
      view.header.logo.style.fontSize = '2.5rem';
    }, 10);
    view.header.btns.toClose();
    var link = view.header.logoBtn.getAttribute('href');
    var title = view.header.logoBtn.dataset.title;
    setTimeout(function () {
      window.scrollTo(0, 0);
    }, 300);

    if (view.state === 'list') {
      window.innerWidth > 800 ? view.agency.init(link, title, view.list.container, view.project.container) : view.agency.init(link, title, view.list.mobileContainer, view.project.container);
    } else if (view.state === 'project') {
      view.agency.init(link, title, view.project.container, view.project.container);
    } else if (view.state === 'grid') {
      view.agency.init(link, title, view.grid.container, view.project.container);
    }
  });
  /* ====================
  =======================
          END
  =======================
  ==================== */
});