<div id='app'>
  <div v-html='header'></div>
  
  <div class='flex justify-around items-start'>
    <div class='text-center p-4 rounded bg-white text-center shadow-lg'>
      <strong>Target (Click To Edit)</strong>
      <hr><br>
      <textarea class='editable' v-model='data'>
        {{ data }}
      </textarea>
    </div>
    <div class='text-center mt-20 p-4 rounded bg-white text-center shadow-lg'>
        <strong class='editable'><-</strong>
        <strong>Target</strong>
    </div>
    <div class='text-center height: 100px; shadow-lg mt-4 p-4 rounded bg-white' style='border:1px solid #d5d5d5;'>
      <span id='try-it'></span>
      <div class='mt-10 text-center'>
        <small style='font-size:14px;float:left;color:#333;font-weight:bolder'>Str.of("{{ data }}")</small><br>
        <input
         class='editable' 
         id='data_get_path'  
         class='text-center'
         type='text'
         style='font-size:20px'      
         v-model='example'      
         ref='in'
         placeholder="Ex: meta.location"
      /><hr>
      </div>
      <br><br>
      <code style='color:red'></code>
      <br>
    </div>
<!--     <div class='text-center mt-20 p-4 rounded bg-white text-center shadow-lg'>
        <strong>Output</strong>
        <strong class='output'>-></strong>
    </div> -->
    <div class='text-center p-4 mt-10 mr-10 rounded bg-white text-center shadow-lg'>
      <strong>Output (Click Try It Now To Update)</strong>
      <br><hr><br>
      <pre class='output'><code style='font-size:32px'>{{ output }}</code></pre>
    </div>
   </div>

  </div>
</div>

  </div>
  
</div>

body, html, #app {
  background-color: #f5f5f5 !important;
}
.editable {
  text-align: left;
  font-size: 12px;
  border-radius: 3px;
  background-color: #dddd;
  border: 1px dashed purple;
  padding: 6px;
  color: indigo;
  width: 400px;
}
textarea.editable {
  min-height: 1050px !important;
}
.output {
  text-align: left;
  color: orange;
  width: 400px;
  padding: 6px;
  font-size: 12px;
 
  border: 2.5px solid orange;
  border-radius: 6px;
  background-color: #333;
}
// body {
//   background-color: #f5f5f5;
// }
// .data_get {
//   position: fixed;
//   bottom: 0;
//   left: 0;
//   border: 1px solid orange;
//   min-width: 50vw;
// }
// .data_get > div {
//   background-color:#d3d3d3;
//   font-size:14px;
//   color: #333;
//   font-weight: bolder;
//   div {
//     font-size: 12px;
//     font-weight: lighter;
//     width: 100%;
//     background-color: #333;
//     color: orange;
//   }
// }
// input, button {
//   border: 1px solid #d5d5d5;
//   border-radius: 3px;
//   height: 3px;
//   width:100%;
//   padding: 5px;
// }
// .messages-container {
//   padding: 10px;
//   position:relative; 
//   bottom: 110px;
//   left: 4.45%;
//   width: 50vw;
// }
// button:disabled {
//   opacity: 0.5 !important;
// }

// h1, h2 {
//   color: #333333b3;
//   font-weight: heavy;
// }

// #app {
//   div.danger {
//     border: 1px solid #de3618;
//     background-color: #de3618;
//   }
  
//   padding-bottom: 15px;
// }

// .form {
//   box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
// }

// pre {
//   position: fixed;
//   top: 0;
//   right: 0;
//   margin-top:67px;
//   margin-right: 0vw;
//   width:25vw;
//   code: {
//     padding: 10px;
//   }
//   padding: 10px;
//   border-radius: 6px;
//   background-color:#333;
//   color:orange;
//   padding:3px;
//   font-size:10px;
//   width:25vw;
// }

// textarea {
//   position:fixed;
//   top:0;
//   right:100;
//   margin-right:25vw;
//   margin-top: 67px;
//   min-height:100%;
//   background-color:#333;
//   color:#fff;
//   font-size:10px;
//   width:25vw;
// }

/** Switch To False If You Want To Turn Off The Automatic Typer **/
const AUTOMATICALLY_TYPE_OUT_EXAMPLE = true;

const { Str } = laravelJsStr;

const user = 'zhorton34';
const repo = 'laravel-js-str';
const title = 'Laravel JS Str';
const subtitle = 'Illuminate\Str, Illuminate\Stringify, & Illuminate Fluent in Javascript';


let data = 'hello-world';
function looseJsonParse(run){
    return Function('"use strict";return (' + run + ')')();
};

new Vue({
    el: '#app',
    data: () => ({ data, output: 'hello world', example: '' }),
    mounted() {
       if (!AUTOMATICALLY_TYPE_OUT_EXAMPLE) return;
       
       this.$refs.in.focus();
      
       const afterStep = async (step, instance) => {
         this.example = instance.getElement().value;
       };
      
       const simple = new TypeIt('#data_get_path', {
           afterStep,
           cursorChar: '|', cursor: true, lifeLike: true, html: false 
       })
           .pause(1000)
           .type('.keb')
           .pause(200)
           .type('ab()')
           .pause(5000)
           .type('.append(" of mars")')
       .pause(3500).type('.camel()').pause(3500).type('.studly()').pause(3500).type('.pluralizeStudly()').pause(3500).delete(35).type('.replaceFirst("hello", "goodbye")').pause(3500).type(".slug()").pause(3500).type('.start("/")').pause(3500).type('.finish("/")')
           .go();
          //  .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 })
      //     .type(' it out')
      //     .pause(300)
      //     .type(' for')
      //     .pause(100)
      //     .break()
      //     .type('your', { delay: 300 } )
      //     .type('self!')
      //     .go();
    },
  
    watch: {
      example: {
        immediate: true,
        handler(code) {
          if (!Str.endsWith(code, ')') && !Str.endsWith(code, ';') ) {
            return;
          }
          code.split('.');
          let data = this.data;
          this.output = looseJsonParse(Str.of(`Str.of("${data}")`).append(code));
        }
      }
    },
    /** Helpers stored in computed to clean up purpose of pen **/
    computed: {
      user,
      repo,
      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>
      `,
    }
 });