<template>
  <div style="padding-bottom: 10px">
    <div class="vb-body-right-option pointer option-head">Text</div>

    <div style="padding: 10px">
      <div class="container vb-p-10">
        <div class="row">
          <div class="col-md-6">
            <span class="font-12">Heading Color</span>
          </div>
          <div class="col-md-6">
            <span class="float-right">
              <colorpicker
                class="right-45"
                :color="widgetData.style.headingColor"
                v-model="widgetData.style.headingColor"
              />
            </span>
          </div>
        </div>
        <div v-if="widgetData.type == 'dropdown_widget'">
          <div class="row">
            <div class="col-md-12">
              <div>
                <span class="font-12">Question Heading</span>
              </div>
              <div>
                <input
                  class="form-control"
                  type="text"
                  v-model="widgetData.text.qheading"
                />
              </div>
            </div>
          </div>
          <hr />
          <div class="row">
            <div class="col-md-12">
              <div>
                <span class="font-12">Question</span>
              </div>
              <div>
                <input
                  class="form-control"
                  type="text"
                  v-model="widgetData.text.question"
                />
              </div>
            </div>
          </div>
          <hr />
          <div class="row">
            <div class="col-md-12">
              <div>
                <span class="font-12">Options</span>
              </div>
              <div
                v-for="(checklist, index) in widgetData.text.Answers"
                :key="index"
              >
                <div class="card" style="padding: 10px; margin: 10px">
                  <div>
                    <span class="font-12">option {{ index + 1 }}</span>
                  </div>
                  <input
                    class="form-control"
                    type="text"
                    v-model="checklist.text"
                  />
                  <div>
                    <span class="font-12">value {{ index + 1 }}</span>
                  </div>
                  <input
                    class="form-control"
                    type="text"
                    v-model="checklist.value"
                  />
                  <div>
                    <span class="float-right font-12">
                      <button v-on:click="arrayindexdelete(index, checklist)">
                        Delete
                      </button>
                    </span>
                  </div>
                </div>
                <div v-if="widgetData.text.Answers.length == index + 1">
                  <button
                    class="btn btn-primary btn-block"
                    v-on:click="arryindexaddoption(index + 2)"
                  >
                    Add
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="widgetData.type == 'groups_widget'">
          <div class="row">
            <div class="col-md-12">
              <div>
                <span class="font-12">Question Heading</span>
              </div>
              <div>
                <input
                  class="form-control"
                  type="text"
                  v-model="widgetData.text.qheading"
                />
              </div>
            </div>
          </div>
          <hr />
          <div class="row">
            <div class="col-md-12">
              <div>
                <span class="font-12">Question</span>
              </div>
              <div>
                <input
                  class="form-control"
                  type="text"
                  v-model="widgetData.text.question"
                />
              </div>
            </div>
          </div>
          <hr />
          <div class="row">
            <div class="col-md-12">
              <div>
                <span class="font-12">Space Id</span>
              </div>
              <div>
                <input
                  class="form-control"
                  type="text"
                  v-model="widgetData.text.spaceId"
                />
              </div>
            </div>
          </div>
        </div>
        <div v-if="widgetData.type == 'single_input_widget'">
          <div class="row">
            <div class="col-md-12">
              <div>
                <span class="font-12">Heading</span>
              </div>
              <div>
                <input
                  type="text"
                  class="form-control"
                  id="formGroupExampleIfnput"
                  v-model="widgetData.text.heading"
                />
              </div>
            </div>
          </div>
          <hr />
          <div class="row">
            <div class="col-md-12">
              <div>
                <span class="font-12">Sub Heading</span>
              </div>
              <div>
                <input
                  type="text"
                  class="form-control"
                  id="formGroupExampleInsput"
                  v-model="widgetData.text.subheading"
                />
              </div>
            </div>
          </div>
          <hr />
          <div class="row">
            <div class="col-md-6">
              <span class="font-12">Input Type</span>
            </div>
            <div class="col-md-6">
              <select
                v-model="widgetData.text.type"
                class="form-control form-control-sm"
              >
                <option>Input text</option>
                <option>Input email</option>
              </select>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div>
                <span class="font-12">Input Place Holder</span>
              </div>
              <div>
                <input
                  type="text"
                  class="form-control"
                  id="formGroupExampleInput1"
                  v-model="widgetData.text.InputPlaceholder"
                />
              </div>
            </div>
          </div>
          <hr />
          <div class="row">
            <div class="col-md-12">
              <div>
                <span class="font-12">Input value</span>
              </div>
              <div>
                <b-form-input
                  type="text"
                  v-model="widgetData.text.inputValue"
                />
              </div>
            </div>
          </div>
          <div style="height: 10px" />
          <div class="row">
            <div class="col-md-12">
              <div>
                <span class="font-12">Input Type</span>
              </div>
              <div>
                <b-form-input type="text" v-model="widgetData.text.inputType" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- widdate -->
      <div v-if="widgetData.type == 'widdate'">
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Heading</span>
            </div>
            <div>
              <b-form-input type="text" v-model="widgetData.text.heading" />
            </div>
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Sub Heading</span>
            </div>
            <div>
              <b-form-input type="text" v-model="widgetData.text.subheading" />
            </div>
          </div>
        </div>
        <div
          class="row"
          v-if="
            widgetData.text.type == 'text' || widgetData.text.type == 'email'
          "
        >
          <div class="col-md-12">
            <div>
              <span class="font-12">Select Date</span>
            </div>
            <div>
              <b-form-input
                type="date"
                v-model="widgetData.text.InputPlaceholder"
              />
            </div>
          </div>
        </div>
      </div>
      <!-- widtime -->
      <div v-if="widgetData.type == 'widtime'">
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Heading</span>
            </div>
            <div>
              <b-form-input type="text" v-model="widgetData.text.heading" />
            </div>
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Sub Heading</span>
            </div>
            <div>
              <b-form-input type="text" v-model="widgetData.text.subheading" />
            </div>
          </div>
        </div>
      </div>
      <!-- text area -->
      <div
        v-if="
          widgetData.type == 'text_area_widget' ||
          widgetData.type == 'image_slider_widget'
        "
      >
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Heading</span>
            </div>
            <div>
              <b-form-input type="text" v-model="widgetData.text.heading" />
            </div>
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Sub Heading</span>
            </div>
            <div>
              <b-form-input type="text" v-model="widgetData.text.subheading" />
            </div>
          </div>
        </div>
        <!-- <hr> -->
        <!-- <div class="row">
                    <div class="col-md-6">
                        <span class="font-12">number of rows</span>
                    </div>
                    <div class="col-md-6">
                        <b-btn-group class="float-right">
                            <b-btn size="sm" v-on:click="globalAdd('padding', padding > 0 ? --padding : padding)">-</b-btn>
                            <b-btn size="sm">{{padding}}</b-btn>
                            <b-btn size="sm" v-on:click="globalAdd('padding', ++padding)">+</b-btn>
                        </b-btn-group>
                    </div>
                </div>
                <div class="row" v-if="widgetData.text.type == 'text' || widgetData.text.type == 'email'">
                    <div class="col-md-12">
                        <div><span class="font-12">Text Area</span></div>
                        <div>
                            <b-form-input type="text" v-model="widgetData.text.InputPlaceholder" />
                        </div>
                    </div>
        </div>-->
      </div>
      <div v-if="widgetData.type == 'checkbox_widget'">
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Question Heading</span>
            </div>
            <div>
              <input
                class="form-control"
                aria-describedby="emailHelp"
                type="text"
                v-model="widgetData.text.qheading"
              />
            </div>
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Question</span>
            </div>
            <div>
              <input
                class="form-control"
                aria-describedby="emailHelp"
                type="text"
                v-model="widgetData.text.question"
              />
            </div>
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Options</span>
            </div>
            <div
              v-for="(checklist, index) in widgetData.text.Answers"
              :key="index"
            >
              <div>
                <span class="font-12">option {{ index + 1 }}</span>
              </div>
              <input
                class="form-control"
                aria-describedby="emailHelp"
                type="text"
                v-model="checklist.text"
              />

              <div>
                <span class="float-right">
                  <a
                    v-on:click="arrayindexdel(index, checklist)"
                    class="card-link"
                    >Delete</a
                  >
                </span>
              </div>
              <div v-if="widgetData.text.Answers.length == index + 1">
                <button
                  type="button"
                  v-on:click="arryindexadd(parseInt(checklist.value, 10) + 1)"
                  class="btn btn-primary btn-lg btn-block"
                >
                  Add
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="widgetData.type == 'radiogroup_widget'">
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Question Heading</span>
            </div>
            <div>
              <input
                class="form-control"
                aria-describedby="emailHelp"
                type="text"
                v-model="widgetData.text.qheading"
              />
            </div>
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Question</span>
            </div>
            <div>
              <input
                class="form-control"
                aria-describedby="emailHelp"
                type="text"
                v-model="widgetData.text.question"
              />
            </div>
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Options</span>
            </div>
            <div
              v-for="(checklist, index) in widgetData.text.Answers"
              :key="index"
            >
              <div>
                <span class="font-12">option {{ index + 1 }}</span>
              </div>
              <input
                class="form-control"
                aria-describedby="emailHelp"
                type="text"
                v-model="checklist.text"
              />

              <div>
                <span class="float-right">
                  <a
                    v-on:click="arrayindexdel(index, checklist)"
                    class="card-link"
                    >Delete</a
                  >
                </span>
              </div>
              <div v-if="widgetData.text.Answers.length == index + 1">
                <button
                  type="button"
                  v-on:click="arryindexadd(parseInt(checklist.value, 10) + 1)"
                  class="btn btn-primary btn-lg btn-block"
                >
                  Add
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="widgetData.type == 'ratting_widget'">
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Ratting Heading</span>
            </div>
            <div>
              <input
                class="form-control"
                type="text"
                v-model="widgetData.text.rattingHeading"
              />
            </div>
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Ratting Sub heading:</span>
            </div>
            <div>
              <input
                class="form-control"
                type="text"
                v-model="widgetData.text.rattingsubHeading"
              />
            </div>
          </div>
        </div>
      </div>
      <div v-if="widgetData.type == 'boolean_widget'">
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">boolean Heading:</span>
            </div>
            <div>
              <input
                class="form-control"
                type="text"
                v-model="widgetData.text.booleanHeading"
              />
            </div>
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">boolean Sub heading</span>
            </div>
            <div>
              <input
                class="form-control"
                type="text"
                v-model="widgetData.text.booleansubHeading"
              />
            </div>
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Options:</span>
            </div>
            <div>
              <div>
                <span class="font-12">Ture</span>
              </div>
              <input
                class="form-control"
                type="text"
                v-model="widgetData.text.booleanOption[true]"
              />
            </div>
            <div>
              <div>
                <span class="font-12">False</span>
              </div>
              <input
                class="form-control"
                type="text"
                v-model="widgetData.text.booleanOption[false]"
              />
            </div>
          </div>
        </div>
      </div>
      <div v-if="widgetData.type == 'youtube_widget'">
        <div class="row">
          <div class="col-md-12">
            <div>
              <span class="font-12">Youtube video id</span>
            </div>
            <div>
              <b-form-input
                type="text"
                v-model="widgetData.text.youtubeVideoId"
              />
            </div>
          </div>
        </div>
      </div>
      <!-- <hr> -->
      <!-- <div class="row">
                    <div class="col-md-6">
                        <span class="font-12">number of rows</span>
                    </div>
                    <div class="col-md-6">
                        <b-btn-group class="float-right">
                            <b-btn size="sm" v-on:click="globalAdd('padding', padding > 0 ? --padding : padding)">-</b-btn>
                            <b-btn size="sm">{{padding}}</b-btn>
                            <b-btn size="sm" v-on:click="globalAdd('padding', ++padding)">+</b-btn>
                        </b-btn-group>
                    </div>
                </div>
                <div class="row" v-if="widgetData.text.type == 'text' || widgetData.text.type == 'email'">
                    <div class="col-md-12">
                        <div><span class="font-12">Text Area</span></div>
                        <div>
                            <b-form-input type="text" v-model="widgetData.text.InputPlaceholder" />
                        </div>
                    </div>
        </div>-->
    </div>
    <!-- asif -->
    <div v-if="widgetData.type == 'widlinks'">
      <div class="row">
        <div class="col-md-12">
          <div>
            <span class="font-12">Links</span>
          </div>
          <div>
            <div v-for="(link, index) in widgetData.text.links" :key="index">
              <b-card class="mB-10">
                <b-input-group size="sm" class="pB-10">
                  <b-input-group-text slot="prepend">name</b-input-group-text>
                  <b-form-input v-model="link.name" />
                </b-input-group>
                <b-input-group size="sm" class="pB-10">
                  <b-input-group-text slot="prepend">URL</b-input-group-text>
                  <b-form-input v-model="link.url" />
                </b-input-group>
                <b-link style="float: right">
                  <b-card-text
                    @click="dellarray(index)"
                    class="small text-muted"
                    >Delete</b-card-text
                  >
                </b-link>
              </b-card>
              <div v-if="widgetData.text.links.length == index + 1">
                <b-btn block variant="primary" @click="addarray(index + 1)"
                  >Add</b-btn
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- asif -->
  </div>
</template>

<script>
import colorpicker from "./common/color-picker";
export default {
  components: {
    colorpicker,
  },
  props: {
    widgetData: Object,
  },
  data() {
    return {
      linkarray: [
        {
          name: "Link1",
          url: "https://link1.com/",
        },
      ],
      getinput: [
        {
          value: "email",
          text: "Input email",
        },
        {
          value: "text",
          text: "Input text",
        },
      ],
    };
  },
  methods: {
    arrayindexdelete(key, checklist) {
      this.widgetData.text.Answers.splice(key, 1);
      // this.widgetData.text.Answers.forEach((element, index) => {
      //     element.value = index + 1;
      // });
    },
    arryindexaddoption(key) {
      this.widgetData.text.Answers.push({
        text: "Option " + key,
        value: "value " + key,
        id: key,
      });
    },
    arrayindexdel(key, checklist) {
      this.widgetData.text.Answers.splice(key, 1);
      this.widgetData.text.Answers.forEach((element, index) => {
        element.value = index + 1;
      });
    },
    arryindexadd(key) {
      this.widgetData.text.Answers.push({
        text: "Option " + key,
        value: key,
        id: key,
      });
    },
    dellarray(key) {
      this.widgetData.text.links.splice(key, 1);
      this.widgetData.text.links.forEach((element, index) => {
        element.value = index + 1;
      });
    },
    addarray(index) {
      this.widgetData.text.links.push({
        name: "Link" + (index + 1),
        url: "https://link" + (index + 1) + ".com",
      });
    },
  },
};
</script>

<style></style>
