<template>
  <properties-card title="Input">
    <div v-if="widgetData.type === 'DropdownWidget'">
      <text-heading :widget-data="widgetData" />

      <v-divider class="mt-6 mb-6" />

      <p class="p-h mb-2">Options:</p>

      <v-card
        outlined
        class="mb-2"
        v-for="(checklist, index) in widgetData.text.options"
        :key="index"
      >
        <v-container>
          <div>
            <span class="p-h mb-2">option {{ index + 1 }}</span>
          </div>
          <v-text-field
            v-model="checklist.text"
            hide-details="auto"
            dense
            outlined
            class="pb-1"
          ></v-text-field>
          <div>
            <span class="p-h mb-2">value {{ index + 1 }}</span>
          </div>
          <v-text-field
            v-model="checklist.value"
            hide-details="auto"
            dense
            outlined
            class="pb-1"
          ></v-text-field>

          <v-card-actions>
            <v-row justify="end" class="pt-3">
              <v-btn v-on:click="arrayIndexDelete(index, checklist)">
                Delete
              </v-btn>
            </v-row>
          </v-card-actions>
        </v-container>
      </v-card>

      <v-btn
        color="primary"
        v-on:click="arryIndexAddOption(widgetData.text.options.length + 1)"
      >
        Add
      </v-btn>

      <p class="p-h ma-0 pt-2">Style</p>
      <v-radio-group
        v-model="widgetData.style.input.defaultStyle"
        row
        dense
        hide-details
        class="ma-0 pb-3"
      >
        <v-radio label="Default" :value="true"></v-radio>
        <v-radio label="Custom" :value="false"></v-radio>
      </v-radio-group>

      <v-expansion-panels
        v-if="!widgetData.style.input.defaultStyle"
        multiple
        class="pb-4"
      >
        <v-expansion-panel>
          <v-expansion-panel-header
            >Custom Input Style</v-expansion-panel-header
          >
          <v-expansion-panel-content>
            <text-input-style :data="widgetData.style.input" />
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </div>
    <div v-if="widgetData.type === 'GroupsWidget'">
      <TextHeading :widget-data="widgetData" />

      <v-divider class="mt-6 mb-2" />

      <v-text-field
        v-model="widgetData.text.spaceId"
        label="Space Id"
        hide-details
        dense
        outlined
        class="pt-6"
      ></v-text-field>

      <p class="p-h ma-0 pt-6">Style</p>
      <v-radio-group
        v-model="widgetData.style.input.defaultStyle"
        row
        dense
        hide-details
        class="ma-0 pb-3"
      >
        <v-radio label="Default" :value="true"></v-radio>
        <v-radio label="Custom" :value="false"></v-radio>
      </v-radio-group>

      <v-expansion-panels
        v-if="!widgetData.style.input.defaultStyle"
        multiple
        class="pb-4"
      >
        <v-expansion-panel>
          <v-expansion-panel-header
            >Custom Input Style</v-expansion-panel-header
          >
          <v-expansion-panel-content>
            <text-input-style :data="widgetData.style.input" />
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </div>
    <div
      v-if="
        widgetData.type === 'TextInputWidget' ||
        widgetData.type === 'TextInputMultiLineWidget'
      "
    >
      <TextHeading :widget-data="widgetData" />
      <v-divider class="mt-2 mb-6" />

      <v-select
        v-if="widgetData.style.input.type != null"
        :items="items"
        label="Input type"
        v-model="widgetData.style.input.type"
        hide-details
        outlined
        dense
      ></v-select>

      <v-text-field
        v-if="widgetData.style.rows != null"
        v-model="widgetData.style.rows"
        label="Number of Rows"
        hide-details
        dense
        outlined
        class="pt-6"
      ></v-text-field>
      <v-text-field
        v-if="widgetData.style.input.placeholder != null"
        v-model="widgetData.style.input.placeholder"
        label="Place Holder"
        hide-details
        dense
        outlined
        class="pt-6"
      ></v-text-field>
      <v-text-field
        v-if="widgetData.text.submitValue != null"
        v-model="widgetData.text.submitValue"
        label="Submit Value"
        hint="Value to submit (membershipNo)"
        persistent-hint
        dense
        outlined
        class="pt-6"
      ></v-text-field>

      <p class="p-h ma-0 pt-2">Style</p>
      <v-radio-group
        v-model="widgetData.style.input.defaultStyle"
        row
        dense
        hide-details
        class="ma-0 pb-3"
      >
        <v-radio label="Default" :value="true"></v-radio>
        <v-radio label="Custom" :value="false"></v-radio>
      </v-radio-group>

      <v-expansion-panels
        v-if="!widgetData.style.input.defaultStyle"
        multiple
        class="pb-4"
      >
        <v-expansion-panel>
          <v-expansion-panel-header
            >Custom Input Style</v-expansion-panel-header
          >
          <v-expansion-panel-content>
            <text-input-style :data="widgetData.style.input" />
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </div>
    <div v-if="widgetData.type === 'SubmitButtonWidget'">
      <v-text-field
        v-model="widgetData.text.buttonText"
        label="Button Text"
        hide-details
        dense
        outlined
      ></v-text-field>

      <p class="p-h ma-0 pt-2">Style</p>
      <v-radio-group
        v-model="widgetData.style.input.defaultStyle"
        row
        dense
        hide-details
        class="ma-0 pb-3"
      >
        <v-radio label="Default" :value="true"></v-radio>
        <v-radio label="Custom" :value="false"></v-radio>
      </v-radio-group>

      <v-expansion-panels
        v-if="!widgetData.style.input.defaultStyle"
        multiple
        class="pb-4"
      >
        <v-expansion-panel>
          <v-expansion-panel-header
            >Custom Input Style</v-expansion-panel-header
          >
          <v-expansion-panel-content>
            <text-input-style :data="widgetData.style.input" />
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </div>
    <div v-if="widgetData.type === 'DateWidget'">
      <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>
    <!-- text area -->
    <div v-if="widgetData.type === 'ImageCarouselWidget'">
      <TextHeading :widget-data="widgetData" />
      <v-divider class="mt-2 mb-1" />
    </div>
    <div
      v-if="
        widgetData.type === 'CheckboxWidget' ||
        widgetData.type === 'RadioButtonWidget'
      "
    >
      <TextHeading :widget-data="widgetData" />

      <v-divider class="mt-6 mb-6" />

      <p class="p-h mb-2">Options:</p>
      <div v-for="(checklist, index) in widgetData.text.options" :key="index">
        <div>
          <span class="p-h ma-0">option {{ index + 1 }}</span>
        </div>
        <v-text-field
          v-model="checklist.text"
          hide-details="auto"
          dense
          outlined
          class="pb-1"
        ></v-text-field>

        <div>
          <span class="float-right">
            <a v-on:click="arrayindexdel(index, checklist)" class="card-link"
              >Delete</a
            >
          </span>
        </div>
        <div v-if="widgetData.text.options.length === index + 1">
          <v-btn
            color="primary"
            v-on:click="arryindexadd(parseInt(checklist.value, 10) + 1)"
          >
            Add
          </v-btn>
        </div>
      </div>

      <p class="p-h ma-0 pt-2">Style</p>
      <v-radio-group
        v-model="widgetData.style.input.defaultStyle"
        row
        dense
        hide-details
        class="ma-0 pb-3"
      >
        <v-radio label="Default" :value="true"></v-radio>
        <v-radio label="Custom" :value="false"></v-radio>
      </v-radio-group>

      <v-expansion-panels
        v-if="!widgetData.style.input.defaultStyle"
        multiple
        class="pb-4"
      >
        <v-expansion-panel>
          <v-expansion-panel-header
            >Custom Input Style</v-expansion-panel-header
          >
          <v-expansion-panel-content>
            <text-input-style :data="widgetData.style.input" />
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </div>

    <div v-if="widgetData.type === 'RattingWidget'">
      <TextHeading :widget-data="widgetData" />

      <v-divider class="mt-6 mb-6" />

      <color-selector
        label="Selected Color"
        :color="widgetData.style.input.selectColor"
        @color="widgetData.style.input.selectColor = $event"
      />
      <v-spacer class="mb-6" />
      <color-selector
        label="Unselected Color"
        :color="widgetData.style.input.unselectColor"
        @color="widgetData.style.input.unselectColor = $event"
      />
    </div>
    <div v-if="widgetData.type === 'BooleanWidget'">
      <div>
        <TextHeading :widget-data="widgetData" />

        <v-divider class="mt-6 mb-6" />

        <p class="p-h mb-0">Options:</p>

        <v-text-field
          v-model="widgetData.text.option[true]"
          label="True"
          hide-details="auto"
          dense
          outlined
          class="pt-4"
        ></v-text-field>

        <v-text-field
          v-model="widgetData.text.option[false]"
          label="False"
          hide-details="auto"
          dense
          outlined
          class="pt-6"
        ></v-text-field>
      </div>
    </div>
    <div v-if="widgetData.type === 'YoutubeWidget'">
      <p class="p-h mb-0">Youtube Settings</p>
      <div class="pt-4">
        <v-text-field
          v-model="widgetData.text.youtubeVideoId"
          label="Youtube video id"
          hide-details="auto"
          dense
          outlined
        ></v-text-field>
      </div>
    </div>
    <!-- asif -->
    <div v-if="widgetData.type === 'LinksWidget'">
      <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 -->
  </properties-card>
</template>

<script>
import PropertiesCard from "@/components/properties/components/PropertiesCard";
import TextHeading from "@/components/properties/components/TextHeading";
import TextInputStyle from "@/components/properties/components/TextInputStyle";
import ColorSelector from "@/components/properties/components/ColorSelector";

export default {
  components: {
    ColorSelector,
    TextInputStyle,
    TextHeading,
    PropertiesCard,
  },
  props: {
    widgetData: Object,
  },
  created() {
    this.$emit("visible");
  },
  data() {
    return {
      links: [
        {
          name: "Link1",
          url: "https://link1.com/",
        },
      ],
      items: [
        {
          value: "text",
          text: "text",
        },
        {
          value: "email",
          text: "email",
        },
      ],
    };
  },
  methods: {
    arrayIndexDelete(key, checklist) {
      this.widgetData.text.options.splice(key, 1);
      // this.widgetData.text.Answers.forEach((element, index) => {
      //     element.value = index + 1;
      // });
    },
    arryIndexAddOption(key) {
      this.widgetData.text.options.push({
        text: "Option " + key,
        value: "value " + key,
        id: key,
      });
    },
    arrayindexdel(key, checklist) {
      this.widgetData.text.options.splice(key, 1);
      this.widgetData.text.options.forEach((element, index) => {
        element.value = index + 1;
      });
    },
    arryindexadd(key) {
      this.widgetData.text.options.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>
