<template>
  <div class="w-100 h-100 pt-42px d-fx fxd-c ai-c">
    <h2 class="f-27px lh-33px c-333333 fw-b">Create Account</h2>

    <div class="xw-402px w-100"
      :class="index > 0 ? 'mt-24px' : 'mt-48px'"
      v-for="(data, key, index) in privacyAndTerms" :key="index">
      <div class="w-100 d-fx">
        <!-- radio buttons -->
        <div class="w-18px h-18px bo-1px bo-EAEAEA bor-50 p-r cursor-pointer mr-6px" @click="data.radioClicked = !data.radioClicked">
          <div class="w-10px h-10px b-1B1B1B bor-50 p-a cen" v-if="data.radioClicked"></div>
        </div>

        <h3 class="f-15px fw-500 lh-18px c-bk">{{siteData}} {{data.title}}</h3>
      </div>
      <div class="w-100 h-96px b-FAFAFA bo-1px bo-EAEAEA mt-9px pt-12px pr-27px pb-12px pl-12px o-h">
        <span class="f-12px fw-400 lh-18px c-464646">{{data.desc}}</span>
      </div>
    </div>

    <button ripple="ripple" class="w-201px h-56px bor-100px  tn-100ms mt-39px" 
      :disabled="this.$parent.privacyAndTermsRadio ? false : true" 
      :class="this.$parent.privacyAndTermsRadio ? 'b-1B1B1B bs-0_6_10_B1B1B1-H':'b-gy'"
      @click="clickNext()"
      >
      <span class="f-18px fw-300 lh-22px c-we">NEXT</span>
    </button>
    {{watchRadioClicked()}} <!-- DO NOT REMOVE!! [To update the "privacyAndTermsRadio" in signUpC.vue] -->
  </div>
</template>

<script>
export default {
  name: 'TermsAndPrivacyC',
  extends: {},
  props: {
    siteData: {
      type: String,
      required: false
    }
  },
  data(){
    return{
      privacyAndTerms: {
        termsOfUse: {
          title: 'Terms of Use',
          desc: 'IDIST Terms of Use wefweoijfweoijowiejfjweoj weofjweoij fowiejfa jafwejoiaj fweojfowaejfoiwejfwiojfwoie jfowiejfowejoewj foewjfoewjoiwej fowejojfwifjwoej foewjoewjf oewjfoew jfoewjoewjo ewjfoewjfo ejwfjewojf weojf oajfwe',
          radioClicked: false
        },
        privacyPolicy: {
          title: 'Privacy Policy',
          desc: 'IDIST Privacy Policy wefweoijfweoijowiejfjweoj weofjweoij fowiejfa jafwejoiaj fweojfowaejfoiwejfwiojfwoie jfowiejfowejoewj foewjfoewjoiwej fowejojfwifjwoej foewjoewjf oewjfoew jfoewjoewjo ewjfoewjfo ejwfjewojf weojf oajfwe',
          radioClicked: false
        }
      }
    };
  },
  components: {},
  computed: {
    watchRadioClicked () {
      return () => {
       if (this.privacyAndTerms.termsOfUse.radioClicked && this.privacyAndTerms.privacyPolicy.radioClicked) {
         return this.updatePrivacyAndTermsRadioToTrue()
       } else {
         return this.updatePrivacyAndTermsRadioToFalse()
       }
      }
    }
  },
  watch: {},
  methods: {
    updatePrivacyAndTermsRadioToTrue() {
      this.$parent.privacyAndTermsRadio = true
    },
    updatePrivacyAndTermsRadioToFalse() {
      this.$parent.privacyAndTermsRadio = false
    },
    clickNext() {
      this.$parent.privacyAndTermsToSignUpFields = true
    }
  },
  beforeCreate(){},
  mounted(){}
}
</script>
