const user = 'zhorton34';
const repo = 'laravel-js-helpers';
const title = 'Laravel JS Helpers';
const subtitle = 'Nested Object Accessors';

const { data_get, data_set, data_fill } = laravelJsHelpers;

let data =  JSON.stringify({meta: { location: { address_1: '5555', address_2: 'suite #2', zip_code: '55343', city: 'New York', state: 'NY' }, phone_number: '555 5555 5555', email: 'user@example.com', id: 1 },
        
        actions: {
          likes: [
            { time: '3 hrs ago', type_id: 12342, type: 'Actionable/Post', resource_name: 'post', path: '/posts/12342' },
            { time: '4.5 hrs ago', type_id: 21132, type: 'Actionable/Post', resource_name: 'post', path: '/posts/12342' },
            { time: '2d 6 hrs ago', type_id: 124522, type: 'Actionable/Post', resource_name: 'post', path: '/posts/124522' },
            { time: '2w 4d 3.5 hrs ago', type_id: 5342, type: 'Actionable/Comment', resource_name: 'post.comment', path: '/posts/12342/comments/5342' }
          ], 
          posts: [
            { id: 1, title: 'Hello world', description: 'universal worlds say hello' },
            { id: 2, title: 'Goodbye world',description: 'multi verse stuff' }
          ]
        }
      },
 undefined, 4);

      
new Vue({
    el: '#app',
    data: () => ({ data, path: '' }),
    mounted() {
     
      this.$refs.in.focus();
      
      const afterStep = async (step, instance) => {
        this.path = instance.getElement().value;
      };
      
      const simple = new TypeIt('#data_get_path', {
           afterStep,
           cursorChar: '|', cursor: true, lifeLike: true, html: false 
         })
           .pause(1000)
           .type('m')
           .pause(200)
           .type('e')
           .pause(200)
           .type('t')
           .type('a')
           .pause(300)
           .type('.location')
          .pause(2000)
          .type('.city')
          .pause(2500)
          .delete(5)
          .pause(2500)
          .delete(9)
          .pause(2000)
          .delete(4)
          .type('actions').pause(2000).type('.likes').pause(2500).type('.*.type')
      
      new TypeIt('#try-it', {   
        cursorChar: '|', 
        cursor: true, 
        lifeLike: true, 
        loop: false,
        html: true,
        afterComplete: async (step, instance) => { simple.go(); },
      }) 
          .type('Check', { delay: 300 })
          .delete(1)
          .type('it out')
          .pause(300)
          .delete(6)
          .type('k it out for')
          .pause(100)
          .break()
          .type('your', { delay: 300 } )
          .type('self!')
          .go();
    },
  
    /** Helpers stored in computed to clean up purpose of pen **/
    computed: {
      user,
      repo,
      dataGet: $this => data_get(JSON.parse($this.data), $this.path, data),
      header: $this => `
          <div class="w-full flex">
            ${$this.npm} ${$this.github}
          </div>
      `,
      
      title: $this =>`  
        <h1 class='${$this.classes.h1}'>${title}</h1>
        <h2 class='${$this.classes.h2}'>(${subtitle})</h2>
      `,
      links: $this => $this.errors().any() ? ``: `<div class="${$this.classes.banner}"> ${$this.github + $this.html}</div>`,
      
      classes: $this => ({
        h1: 'text-4xl mt-8',
        h2: 'text-2sm',
        header: 'text-center mb-8 text-2xl',
        banner: 'flex w-full justiy-center mb-8',
        container: 'flex justify-around align-items-stretch',
        form: 'w-100%',
        errors: 'border border-gray-400 bg-white rounded messages-container w-100%',
        danger: 'mb-3 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded',
        btn: 'bg-blue-500 text-white font-bold py-2 px-4 rounded-full w-1/2 mt-4',
      }),
      npm: () => `
        <div class="bg-red-700 text-center py-4 lg:px-4 w-1/2">
           <div class="p-2 bg-white items-center text-grey-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
              <a href='https://www.npmjs.com/package/${repo}'>
                <span class="flex rounded-full b-white-500 px-2 py-1 text-xs font-bold ml-2">Npm Package</span>
  
              </a>
              <svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/>
              </svg>
            </div>
        </div>
      `,
    
      github: () => `
          <div style='background-color: #24292e;' class="w-1/2 text-center py-4 lg:px-4">
            <div class="p-2 bg-white items-center text-grey-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
              <a href='https://github.com/${user}/${repo}'>
                <span class="flex rounded-full b-white-500 px-2 py-1 text-xs font-bold ml-2">Github Repository</span>
              </a>
              <svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/>
              </svg>
          </div>
        </div>
      `,
    }
 });