<template>
  <div class="w-1920D1920M100 h-100vh b-bk_50 p-a t-0 z-50" v-if="show" >
    <!-- FORM -->
    <div class="xw-900px b-we bor-12px h-554px cen d-fx bs-0_18_20_bk_25 p-r" v-on-clickaway="exit">
      
      <!-- INPUT DIV -->
      <div class="p-r w-540D900M100 bor-12px b-we tn-1000ms" 
        :class="[state === 'sign-in'? 'l-0':'l-40']">
        <sign-in-c v-if="state === 'sign-in'" 
          :siteData="siteData"></sign-in-c>
        <sign-up-c 
          :PrivacyAndTermsData="this.PrivacyAndTermsData"
          :inputType="this.inputType"
          :siteData="siteData"
          v-if="state === 'sign-up'">
        </sign-up-c>
      </div>
      <!-- QUESTION DIV -->
      <div class="w-360D900M100 h-100 p-a tn-1000ms z-1 o-h"
          :class="[state === 'sign-in'? 'l-60 bor_tr-12px bor_br-12px':'l-0 bor_tl-12px bor_bl-12px']">
        <!-- <img :src="`${publicPath}images/SignC/background_images/IDIST_bg-image.png`" alt="" class="b-img w-100 h-100 p-a z-_1"> -->
        <img :src="`${publicPath}images/SignC/background_images/${this.siteData}_bg-image.png`" alt="" class="b-img w-100 h-100 p-a z-_1">
        <!-- {{this.siteData.name}} -->
        <in-question-c  
          v-if="state === 'sign-in'"
          :siteData="siteData"
          @update-state="updateState()">
        </in-question-c>
        
        <up-question-c  
          v-if="state === 'sign-up'"
          :siteData="siteData"
          @update-state="updateState()">
          
        </up-question-c>
      </div>
    <button class="p-a r-_60px t-_60px cursor-pointer" @click="exit">
      <img class="w-38px h-auto" :src="getImgUrl('close.png')"/>
    </button>
    </div>
    <!-- <button cla>test</button> -->
  </div>
</template>

<script>
import {mapStateVModel} from 'map-state-vmodel'
import { mixin as clickaway } from 'vue-clickaway';

// SIGN IN
import SignInC from './sign/in/signInC.vue'
import In_questionC from './sign/in/components/In_QuestionC.vue'

// SIGN UP
import SignUpC from './sign/up/signUpC.vue'
import Up_questionC from './sign/up/components/Up_QuestionC.vue'

export default {
  name: 'sign',
  mixins: [ clickaway ],
  extends: {},
  props: {
    PrivacyAndTermsData: {
      type: Array,
      required: true
    },
    inputType: {
      type: Array,
      required: true,
    },
    siteData: {
      type: String,
      required: true
    },
  },
  data(){
    return{
      state: 'sign-in',
      is_changing: false,
      publicPath: process.env.BASE_URL
    };
  },
  components: {
    'sign-in-c': SignInC,
    'in-question-c': In_questionC,
    'sign-up-c': SignUpC,
    'up-question-c': Up_questionC
  },
  computed: {
    ...mapStateVModel('sign', ['show']),
  },
  watch: {},
  methods: {
    updateState() {
      // alert('working')
      if(this.state === 'sign-in') {
        this.state = 'sign-up'
        // alert(this.state)
      } else {
        this.state = 'sign-in'
      }
    },
    exit() {
      this.show = !this.show
    },
    getImgUrl(img_name) {
      return require('@/assets/images/SignC/' + img_name)
      
    },
    updateParentOfPrivacyAndTerms(data, index) {
      this.$parent.PrivacyAndTermsData[index].checkbox = data
    }
  },
  beforeCreate(){},
  mounted(){}
}
</script>
