{{ "Point.js" | asset_url | script_tag }}
{{ "Observer.js" | asset_url | script_tag }}
{{ "Store.js" | asset_url | script_tag }}
{{ "DOM.js" | asset_url | script_tag }}
<style>
    .collection-title {
        font-family: 'Poppins', 'Montserrat', 'Lato', 'Roboto', 'Quicksand', sans-serif;
        font-size: 18px;
        border-bottom: 2px solid;
        margin: 4px;
        display: inline-block;
        padding: 2px 4px 0;
    }
    .products {
        margin: 2px 8px;
        font-family: 'Poppins', 'Montserrat', 'Lato', 'Roboto', 'Quicksand', sans-serif;
        font-size: 14px;
    }
    .product {
        margin: 4px 0;
    }
    .variant {
        width: 24px;
        height: 24px;
        display: inline-block;
        border-radius: 8px;
        border: 1px solid #6b6a6a;
        margin: 0 2px 0 0;
        transition: all 0.3s ease-in;
    }
    .info .variant {
        height: 80px;
        min-width: 80px;
    }
    .variant.selected {
        box-shadow: #5f5353 0px 0px 8px 2px;
        border-color: #b5b5b5;
    }
    .variants {
        margin: 4px 0 8px;
        cursor: pointer
    }
    .collection.expanded .products {
        display: none;
    }
    .collection-title:before {
        content: '–';
        margin: 0 2px 0 0;
    }
    .collection-title {
        cursor: pointer;
    }
    .expanded .collection-title:before{
        content: '+';
        margin: 0 2px 0 0;
    }
    .info-line {
        display: flex;
    }
    .very-info {
        margin: 4px 8px;
        width: 100%;
    }
    .info-title {
        font-size: 24px;
        margin: 32px 2px 8px;
    }
    .info {
        font-family: 'Poppins', 'Montserrat', 'Lato', 'Roboto', 'Quicksand', sans-serif;
    }
    .info-img {
        width: 80px;
    }
    input.field__input {
        left: 0;
        height: 32px;
        position: relative;
        padding: 4px;
        width: calc(100% - 16px);
        box-sizing: border-box;
        margin: 0 4px;
    }
    .preview {
        min-width: 96px;
    }
    span.color-span {
        background: #fff;
        padding: 4px 8px;
        border-radius: 4px;
    }
    .color {
        padding: 8px;
        border-radius: 4px;
    }
    .info-description {
        padding: 16px 0 0 16px;
    }
    span.prop:after {
        content: ':';
    }

    span.prop {
        color: #999;
        padding: 0 8px 0 0;
        font-size: 12px;
    }
    .categories {
        position: absolute;
        overflow-y: auto;
        right: 12px;
        left: 4px;
    }
    #content-panel {
        width: 100%;
        position: relative;
    }
    .variant.variant-hidden {
        display: none;
    }
    .product.product-hidden {
        display: none;
    }
    .collection.hidden {
        display: none;
    }
    .product-counter {
        padding-left: 10px;
        color: #999;
    }
    .cross.hidden {
        display: none;
    }

    .cross {
        position: absolute;
        z-index: 3;
        right: 12px;
        top: 0px;
        font-family: monospace;
        padding: 5px 10px;
        box-sizing: border-box;
        cursor: pointer;
        height: 100%;
        font-size: 15px;
        text-shadow: #000 0 0 2px;
    }
</style>
<div class="page-width page-content">
    {%- include 'breadcrumbs' -%}
    <div class="grid">
        <div class="grid__item">
            <div class="rte rte--nomargin">


                <script>
                  const API_KEY = "SMB-Ojo6MjU1NDU=";

                  (function (d, k) {
                    var s = d.createElement('script');
                    s.type = 'text/javascript';
                    s.async = true;
                    s.src = 'https://plugins-media.perfectcorp.com/smb/sdk.js?apiKey=' + k;
                    var x = d.getElementsByTagName('script')[0];
                    x.parentNode.insertBefore(s, x);
                  })(document, API_KEY);
                </script>

                <script>
                  let YMK_close = document.getElementById('YMK-close');
                  let later = void 0;
                  function openTryOnTool() {
                    // If the product tags contain "Eyeshadow Palette", shows color swatches button, and make color swatches clickable.
                    let variant_div = document.getElementsByClassName("variant-input");

                    // Perfect Module
                    // if YMK is not inited - pass this problem to the future
                    if(!window.YMK || typeof YMK.open !== 'function'){
                      clearTimeout(later);
                      return later = setTimeout(openTryOnTool, 300);
                    }else{
                      if(!YMK.autoShow){
                        YMK.autoShow = true;
                        YMK.addEventListener('loaded', function(){console.log('after YMK loaded');
                          // set current active variant
                          YMK.applyMakeupBySku(document.querySelector('.variant-input-wrap input:checked').parentNode.getAttribute('perfect_sku_id'));
                        });
                      }
                    }

                    YMK.open()
                    let YMK_module = document.getElementById('YMK-module');
                    const YMK_SCREEN = "ymk-screen"
                    if (YMK.open()) {
                      YMK_module.classList.add(YMK_SCREEN)
                      //YMK_close.style.color = "black";
                    } else {
                      YMK_module.classList.remove(YMK_SCREEN)
                    }
                  }
                  function closeTryOnTool() {
                    YMK.close()
                    YMK.close() ? YMK_close.style.color = "transparent" : YMK_close.style.color = "black";

                  }
                  function ajax_get(url, callback) {
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadystatechange = function() {
                      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        //console.log('responseText:' + xmlhttp.responseText);
                        try {
                          var data = JSON.parse(xmlhttp.responseText);
                        } catch(err) {
                          console.log(err.message + " in " + xmlhttp.responseText);
                          return;
                        }
                        callback(data);
                      }
                    };

                    xmlhttp.open("GET", url, true);
                    xmlhttp.send();
                  }
                  var collections;
                  var debug = false;
                  var rq = debug ? function(what,cfg, cb) {
                    getData(what, function(res){
                      cb(res.collections.slice(-4))
                    });
                  } : function(what,cfg, cb) {
                    ajax_get(apiURL+URLS[what](cfg), function(res) {
                      cb(res.collections);
                    })
                  };

                  var loaded = {};

                  var collectionRQ = debug ? function(what,cfg, cb) {
                    getData(cfg.handle.substr(3).replace('-results', ''), function(res){
                      cb(res.products)
                    });
                  } : function(what,cfg, cb) {
                    ajax_get(apiURL+URLS[what](cfg), function(res) {
                      cb(res.products);
                    })
                  };

                  var loadingSequence = function() {
                    rq('collections', null, function(data) {
                      collections = data;
                      s.set('categoriesLoaded', 1);
                      collections.forEach(function(item) {
                        collectionRQ('category', item, function(products) {
                          loaded[item.handle] = products;
                          s.set(item.handle+'-loaded', true);
                          s.set('categoriesLoaded', s.get('categoriesLoaded')+1);
                          s.set(item.handle + '-notcollapsed', true);
                        })
                      });

                    })

                  };
                </script>
                <div style="display: flex">
                    <div  style="min-width: 460px;max-width: 460px;position: relative;display: flex;flex-direction: column;">
                        <div id='YMK-module' style="width:450px;position: relative;display: block"></div>
                        <div id="variant-info"></div>
                    </div>
                    <div id="content-panel">

                    </div>
                </div>
                <script>
                  openTryOnTool();

                  var apiURL = 'https://www.mirrormirror.love/';
                  var URLS = {
                    collections: function(){return  'collections.json';},
                    category: function(item){
                      return `collections/${item.handle}/products.json?limit=250?page=1`;
                    }
                  };

                  loadingSequence();
                  var Input = function(cfg){
                    var dom = D.h('input', {cls:"field__input", attr: {type: 'text'}});
                    if(cfg.bind){
                      cfg.bind.sub(function (val) {
                        dom.value = val;
                      });
                      dom.addEventListener('input', function () {
                        cfg.bind.set(dom.value);
                      })
                    }
                    return dom;
                  };
                  var s = new Store({
                    search: '',
                    categoriesLoaded: false
                  });
                  var testIt = function(item, product, variant){
                    //debugger
                    var img = variant.featured_image && variant.featured_image.src || ( product.images[ 0 ] || {} ).src;

                    console.log( { item, product, variant } );
                    D.replaceChildren(
                      document.querySelector( '#variant-info' ),
                      D.div( { cls: 'info' },
                        D.div( { cls: 'info-title' }, product.title ),
                        D.div( { cls: 'info-line' },
                          D.div({cls: 'preview'},
                            img && D.h('img', {src: img, cls: 'info-img'})
                          ),
                          D.div({cls: 'very-info'},
                            D.div({cls: 'color', style: {background: variant.option2}}, D.span({cls: 'color-span'}, D.span({cls: 'prop'},'Color'), variant.option1)),
                            'SKU: '+variant.option3
                          )
                        ),
                        D.div({cls: 'info-description'}, function(draw) {
                          var d = D.div({});
                          d.innerHTML = product.body_html;
                          draw(d);
                        })
                      )
                    );

                    YMK.applyMakeupBySku(variant.option3);
                  };

                  s.sub( [ 'search', 'categoriesLoaded' ], Store.debounce( function( search, isLoaded ){
                    if( !isLoaded )
                      return;
                    search = search.toLowerCase().trim();
                    collections.forEach( function( collection ){
                      var products = loaded[ collection.handle ];
                      if( products ){
                        var filteredProducts = products.filter( function( product ){
                          var filteredVariants = product.variants.filter( function( variant ){
                            var shouldShow = variant.option3 &&
                              ( search ?
                                variant.option3.toLowerCase().indexOf( search ) > -1
                                : true );
                            s.set( 'v' + variant.id + '-hidden', !shouldShow );
                            return shouldShow;
                          } );
                          s.set( 'p' + product.id + '-hidden', filteredVariants.length === 0 );
                          return filteredVariants.length > 0;
                        } );
                        s.set( collection.handle + '-count', filteredProducts.length );
                        s.set( collection.handle + '-hide', filteredProducts.length === 0 );
                      }else{
                        s.set( collection.handle + '-hide', true );
                      }

                    } )
                  }, 300 ) );


                  var collection = function( item ){
                    return D.div( {
                        cls: D.cls( 'collection', {
                          hidden: s.valTrue( item.handle + '-hide' ),
                          expanded: s.valTrue( item.handle + '-notcollapsed' )
                        } )
                      },

                      D.div( {
                        cls: 'collection-title',
                        onclick: function(){
                          s.set( item.handle + '-notcollapsed', !( s.get( item.handle + '-notcollapsed' ) ) );
                        }
                      }, item.title, D.span( { cls: 'product-counter' }, s.val( item.handle + '-count' ) ) ),

                      function( draw ){
                        s.sub( [ item.handle + '-loaded' ], function( isLoaded ){
                          if( !isLoaded )
                            return;

                          var products = loaded[ item.handle ];
                          var mapped = products.map( function( product ){
                            return D.div( { cls: D.cls( 'product', { 'product-hidden': s.valTrue( 'p' + product.id + '-hidden' ) } ) },
                              D.div( { cls: 'product-title' }, product.title ),
                              D.div( { cls: 'variants' }, product.variants.map( function( variant ){
                                return D.div( {
                                  cls: D.cls( 'variant', { 'variant-hidden': s.valTrue( 'v' + variant.id + '-hidden' ) } ),
                                  style: { background: variant.option2 },
                                  onclick: function(){
                                    [].slice.apply( document.querySelectorAll( '.variant.selected' ) ).forEach( function( el ){
                                      el.classList.remove( 'selected' );
                                    } );
                                    this.classList.add( 'selected' );

                                    testIt( item, product, variant )
                                  }
                                } )
                              } ) )
                            )
                          } )
                            .filter( function( a ){
                              return a;
                            } );
                          s.set( item.handle + '-hide', mapped.length === 0 );


                          draw( D.div( { cls: 'products' }, mapped ) );
                        } );
                      }
                    );

                  };

                  var cats, cp = document.getElementById( 'content-panel' );
                  D.div( {
                      renderTo: cp
                    },
                    D.div( { style: { position: 'relative' } },
                      D.div( {
                        cls: D.cls( 'cross', { hidden: s.valEqual( 'search', '' ) } ),
                        onclick: function(){
                          s.set( 'search', '' )
                        }
                      }, String.fromCharCode(10005) ),
                      new Input( { bind: s.bind( 'search' ) } )
                    ),

                    cats = D.div( { cls: 'categories' }, function( draw ){
                      s.sub( [ 'search', 'categoriesLoaded' ], function( search, loaded ){
                        if( loaded ){
                          draw( collections.map( collection ) );
                        }else{
                          draw( 'Loading collections' )
                        }
                      } )
                    } )
                  );
                  var fn = function(){
                    cp.style.minHeight = cats.style.height = Math.min(window.innerHeight + pageYOffset - (cats.offsetTop + cats.offsetParent.offsetTop) - 32, cats.scrollHeight, window.innerHeight-32) +'px';
                  };
                  fn();
                  window.addEventListener('scroll', Store.debounce(fn,300));
                  s.sub([ 'search', 'categoriesLoaded' ], Store.debounce(fn,300));
                  setTimeout(fn, 1000);
                  window.addEventListener('resize', fn);
                </script>

            </div>
        </div>
    </div>
</div>