import axios from 'axios';

export function stepform(){
    const temp = {
        data: function(){
            return {
              resultdata: [],
              senddata: [],
              userdata: [],
              keyword :{
                name: 'name',
                email: 'email',
                input: 'user area',
                next: 'next',
                prev: 'prev',
                return: 'return',
                send: 'send',
                alert: 'error',
                required: 'required',
                formAlert: 'is required',
                formEmail: 'is error'
              },
              maildata: [
                {
                  title: '',
                  answer: '',
                  type: 'text',
                  required: true
                },
                {
                  title: '',
                  answer: '',
                  type: 'email',
                  required: true
                }
              ],
              json: {},
              step: {},
              prev: [],
              alert: [],
              message: '',
              close: true,
              id: false,
              check: false,
              user: false,
              send: false,
              anime: false,
              loading: true
            }
        },
        template: 
        `
          <div>
            <div class="stepformTrigger" @click="close = false"><slot></slot></div>
            <div class="stepform">
              <transition name="stepFormFade">
                <div class="stepform__overlay" v-if="!close"></div>
              </transition>

              <transition name="stepFormFade">
              <div class="stepform__overlay__close" v-if="!close" @click="formClose()"></div>
              </transition>

              <transition name="stepFormFade">
                <div class="stepform__box" :class="{'active':anime , 'disable':send}" v-if="!close">
                  <div v-if="send">
                    <div class="stepform__box__loading mn" v-if="loading"><div v-for="n of 3" :key="n"></div></div>
                    <p v-html="message" class="stepform__box__message" v-if="!loading"></p>
                  </div>

                  <div v-else>
                    <h3 class="stepform__box__title" v-html="title"></h3>
                    <p class="stepform__box__description" v-html="description"></p>

                    <div class="stepform__box__loading" v-if="loading"><div v-for="n of 3" :key="n"></div></div>
                    
                    <div class="stepform__box__listdata" v-if="!loading">
                      <div v-if="user" class="stepform__box__listdata__anime" :class="{'active':anime}">
                        <h4 class="stepform__box__listdata__title">{{ keyword.input }}</h4>
                        <ul class="stepform__box__listdata__input stepform__box__listdata__input--mt">
                          <li v-for="(item, index) in userdata" :key="index">
                          
                            <label v-if="item.type == 'select'">
                              <span v-html="item.title" :class="{'hiss': item.required}" :data-word="keyword.required"></span>
                              <select :name="item.title" v-model="item.answer">
                                <option v-for="(child, index) in item.child" :value="child" :key="index">{{ child }}</option>
                              </select>
                            </label>

                            <div v-else-if="item.type == 'radio'">
                              <span v-html="item.title" :class="{'hiss': item.required}" :data-word="keyword.required"></span>
                              <div>
                                <label v-for="(child, index) in item.child" :key="index">
                                  <input :type="item.type" :name="item.title" v-model="item.answer" :value="child">{{ child }}
                                </label>
                              </div>
                            </div>

                            <label v-else>
                              <span v-html="item.title" :class="{'hiss': item.required}" :data-word="keyword.required"></span>
                              <input :type="item.type" :name="item.title" :placeholder="item.placeholder" v-model="item.answer">
                            </label>
                          </li>
                        </ul>
                        <ul class="stepform__box__listdata__error" v-if="alert.length > 0">
                          <li v-for="(item, index) in alert" :key="index">{{ item }}</li>
                        </ul>
                        <div class="stepform__box__listdata__btns">
                          <div class="stepform__box__listdata__btns__btn prev" v-if="step.step != 0" @click="prevStep()"><i></i><span v-html="keyword.return"></span></div>
                          <div class="stepform__box__listdata__btns__btn next" @click="checks()"><i></i><span v-html="keyword.send"></span></div>
                        </div>
                      </div>

                      <div v-else class="stepform__box__listdata__anime" :class="{'active':anime}">
                        <h4 class="stepform__box__listdata__title">STEP.{{ step.step + 1 }}<span v-html="step.title"></span></h4>
                        <ul class="stepform__box__listdata__item">
                          <li v-for="(item, index) in step.data" :key="item.title">
                            <label>
                              <input name="item.id" type="radio" @change="selects(item.id)" :value="item.name" class="stepform-input">
                              <i class="stepform__box__listdata__item__effects"></i>
                              <span v-html="item.name"></span>
                            </label>
                          </li>
                        </ul>
                        <ul class="stepform__box__listdata__error">
                          <li v-for="(item, index) in alert" :key="index">{{ item }}</li>
                        </ul>
                        <div class="stepform__box__listdata__btns">
                          <div class="stepform__box__listdata__btns__btn prev" v-if="step.step != 0" @click="prevStep()"><i></i><span v-html="keyword.prev"></span></div>
                          <div class="stepform__box__listdata__btns__btn next" @click="nextStep(step.step + 1, step.title)"><i></i><span v-html="keyword.next"></span></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </transition>
            </div>
          </div>
        `,
        mounted: function(){
          this.init()
          this.inputs.forEach(d => {
            const data = {
              title :      d.name,
              answer:      '',
              type:        d.type,
              child:       d.child,
              required:    d.required,
              placeholder: d.placeholder
            }
            this.userdata.push(data)
          })
          this.userdata.unshift(...this.maildata)

          const $_this = this
          axios.get($_this.url).then(function(response){
            $_this.json = response.data
            setTimeout(()=>{
              $_this.loading = false
              try{
                $_this.step = $_this.json[0]
              }catch(e){
                alert('error')
              }
            },1600)
          })
        },
        methods:{
          init: function(){
            const $_this = this
            Object.keys($_this.words).forEach(function (key) {
              $_this.keyword[key] = $_this.words[key]
            })

            $_this.maildata[0].title = $_this.keyword['name']
            $_this.maildata[1].title = $_this.keyword['email']
          },
          selects: function(id){
            this.id = id
            this.check = true
          },
          nextStep: function(step, title){
            if(this.check){
              let input = document.querySelectorAll('.stepform-input')
              input.forEach(el => {
                if(el.checked){
                  this.senddata.push(this.addData(title, el.value))
                }
                el.checked = false
              })
              this.check = false
              this.alert = []
            }else{
              this.alert = []
              this.alert.push(this.keyword.alert)
              return
            }

            let next = null
            for(let i = 0; i < this.json.length; i++){
              let d = this.json[i]
              if(d.step == step){
                if(d.dataset == this.id){
                  next = d
                  break
                }else{
                  next = d
                }
              }
            }
            if(next !== null){
              this.prev.push(this.step)
              this.step = next
            }else{
              this.user = true
            }
          },
          prevStep: function(){
            let input = document.querySelectorAll('.stepform-input')
            input.forEach(el => {
              el.checked = false
            })
            this.removeData()
            this.alert = []
            if(this.user){
              this.user = false
              this.step = this.json[0]
              this.senddata = []
              this.prev = []
            }else{
              this.step = this.prev[this.prev.length - 1]
              this.prev.pop()
            }
          },
          checks: function(){
            let check = true
            this.alert = []
            for(let i = 0; i < this.userdata.length; i++){
              const d = this.userdata[i]
              if(d.required && d.answer == ''){
                this.alert.push(`${d.title}${this.keyword.formAlert}`)
                check = false
              }
              if(d.required && d.type == 'email' && !d.answer.match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)){
                this.alert.push(`${d.title}${this.keyword.formEmail}`)
                check = false
              }
            }
            if(check){
              this.sendding()
            }else{
              return
            }
          },
          sendding: function(){
            this.send = true
            this.loading = true
            let postdata = []
            let $_this = this
            postdata['user'] = this.userdata
            postdata['data'] = this.senddata
            setTimeout(() => {
              $_this.loading = false
              axios.post($_this.post , {
                user: postdata['user'],
                data: postdata['data']
              })
              .then(response => {
                $_this.message = response.data
              }).catch(error => {
                $_this.message = error
              });
            },1600)

          },
          formClose: function(){
            this.resets()
          },
          resets: function(){
            this.step = this.json[0]
            this.senddata = []
            this.alert = []
            this.prev = []
            this.message = ''
            this.close = true,
            this.id = false
            this.check = false
            this.user = false
            this.send = false
            this.anime = false
            this.loading = false
          },
          addData: function(title, answer){
            let obj = { title: title, answer: answer}
            return obj
          },
          removeData: function(){
            this.senddata.pop()
          },
        },
        watch: {
          step: function(){
            const $_this = this
            $_this.anime = true
            setTimeout(()=>{
              $_this.anime = false
            },400)
          }
        },
        props: {
          title: {
            type: String,
            required: false,
          },        
          description: {
            type: String,
            required: false,
          },
          words: {
            type: Object,
            required: false,
          },
          inputs: {
            type: Array,
            required: false,
          },
          url: {
            type: String,
            required: true,
          },
          post: {
            type: String,
            required: true,
          }
        },
    }
    return temp;
};