<template>
  <div class="lofty-admin-step-config">
    <Tabs v-model="stepValue" :tabs="tabs"></Tabs>
    <div class="step-content">
      <div class="left-config">
        <div v-show="stepValue === '1'">
          <div class="title">Content</div>
          <div class="label">TITLE</div>
          <input v-model="config.step1.title" type="text" maxlength="100">
          <div class="label mt20">DESCRIPTION</div>
          <input v-model="config.step1.desc" type="text" maxlength="100">
          <div class="title mt30">Address Bar</div>
          <div class="label">DEFAULT TEXT</div>
          <input v-model="config.step1.placeholder" type="text" maxlength="50">
          <div class="label mt20">BUTTON TEXT</div>
          <input v-model="config.step1.buttonText" type="text" maxlength="20">
          <div class="label mt20">SHOW UNIT FIELD</div>
          <label>
            <input v-model="config.step1.showUnit" type="radio" name="unit" :value="true">Yes
          </label>
          <label style="margin-left: 30px">
            <input v-model="config.step1.showUnit" type="radio" name="unit" :value="false">No
          </label>
        </div>
        <div v-show="stepValue === '2'">
          <div class="title">Content</div>
          <div class="label">FORM TITLE</div>
          <input v-model="config.step2.title" type="text" maxlength="50">
          <div class="label mt20">DESCRIPTION</div>
          <input v-model="config.step2.desc" type="text" maxlength="100">
          <div class="title mt30">Form Settings</div>
          <div class="label mt20">NAME</div>
          <label>
            <input v-model="config.step2.nameRequired" type="radio" name="name" :value="true">Required
          </label>
          <label style="margin-left: 30px">
            <input v-model="config.step2.nameRequired" type="radio" name="name" :value="false">Optional
          </label>
        </div>
        <div v-show="stepValue === '3'" class="step-3">
          <div class="title">Form Settings</div>
          <div class="label mt20">AUTO HOME VALUATION</div>
          <label>
            <input v-model="config.step3.autoValuation" type="radio" name="autoValuation" :value="true">Yes
          </label>
          <label style="margin-left: 30px">
            <input v-model="config.step3.autoValuation" type="radio" name="autoValuation" :value="false">No
          </label>
          <div class="label mt20">{{config.step3.autoValuation ? 'TITLE': 'THANK YOU MESSAGE' }}</div>
          <input v-show="config.step3.autoValuation" v-model="config.step3.title" type="text" maxlength="60">
          <textarea v-show="!config.step3.autoValuation" v-model="config.step3.thankYou" maxlength="300"></textarea>
        </div>
      </div>
      <preview class="right-preview" :stepValue="stepValue" :imgUrl="imgUrl" :config="config"></preview>
    </div>
  </div>
</template>

<script setup>
import Tabs from '@/components/tabs/index.vue';
import Preview from './preview.vue';
const { imgUrl } = defineProps({imgUrl: String})
const stepValue = ref('1')
const tabs = [
  {label: 'Step1', value: '1'},
  {label: 'Step2', value: '2'},
  {label: 'Step3', value: '3'},
]
const config = reactive({
  step1: {
    title: "What‘s your Home Worth?",
    desc: 'Find out the worth of your home and get the most accurate valuation.',
    placeholder: 'Enter your street address',
    buttonText: 'GET REPORT',
    showUnit: true
  },
  step2: {
    title: 'Property Found!',
    desc: 'Where would you like us to send your home valuation report?',
    nameRequired: true
  },
  step3: {
    autoValuation: true,
    title: 'Estimated Home Value',
    thankYou: 'At this time we can\'t provide an automated home value estimate, but we\'ll be reaching out to arrange a personalized quote based on market conditions and property information. Thank you!'
  }
})
defineExpose({
  config
})
</script>
<style scoped lang="scss">
.lofty-admin-step-config {
  :deep(.lofty-tab-pane) {
    height: 30px;
    color: $gray-800;
    font-weight: $font-weight-medium;
  }
  :deep(.active) {
    color: $color-theme;
    border-bottom: solid 2px $color-theme;
  }
}
.step-content {
  display: flex;
  width: 100%;
  .left-config {
    padding-top: 20px;
    flex: 1;
    .title {
      font-size: 14px;
      font-weight: 700;
      color: $gray-800;
      margin-bottom: 20px;
    }
    .label {
      font-size: $font-size-x-small;
      color: $gray-800;
      margin-bottom: 8px;
    }
  }
  .right-preview {
    margin-left: 20px;
    margin-top: 20px;
    width: 500px;
  }
}
.step-3 {
  textarea {
    height: 100px;
  }
}
</style>