<template>
<div>
    <div v-b-toggle.icons class="vb-body-right-option pointer option-head">Icons</div>
    <b-collapse id="icons" visible>
        <div class="container vb-p-10">
            <div class="row">
                <div class="col-md-6"><span class="font-12">Type Icons</span></div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <b-form-select v-model="selected" :options="options" size="sm" class="" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-6"><span class="font-12">Social Links</span></div>
            </div>
            <hr>
            <div v-for="(socialslinkinput, index) in widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].text.socialsLinks" :key="index" class="pB-10">
                <b-card>
                    <b-row>
                        <b-link class="m-5"><span style="font-size:20px; line-height: 20px;" class="ti-align-justify"></span></b-link>
                        <b-img :src="socialslinkinput.imagelink" :alt="socialslinkinput.title" :title="socialslinkinput.title" style="width:25px; height:25px" class="m-5"></b-img>
                        <b-card-text style="font-size: 20px;">{{socialslinkinput.title}}</b-card-text>
                    </b-row>
                    <b-input-group size="sm">
                            <b-input-group-text slot="prepend">URL</b-input-group-text>
                            <b-form-input :value="'https://'+socialslinkinput.title+'.com/'" />
                        </b-input-group>
                        <b-link><b-card-text @click="arrayindexdel(index)" class="small text-muted">Delete</b-card-text></b-link>
                    
                </b-card>
            </div>
            <div class="circle_outline" v-if="selected == 'circle-outline'">
                <b-link v-for="(socialdata, index) in circle_Outline_social" :key="index" v-on:click="addSocialIcons(index, socialdata)">
                    <b-img :src="socialdata.imagelink" style="width:30px; margin:5px" :alt="socialdata.name" :title="socialdata.title"></b-img>
                </b-link>
            </div>

            <div class="circle_Black" v-if="selected == 'Circle-Black'">
                <b-link v-for="(socialdata, index) in circle_Black" :key="index" v-on:click="addSocialIcons(index, socialdata)">
                    <b-img :src="socialdata.imagelink" style="width:30px; margin:5px" :alt="socialdata.name" :title="socialdata.title"></b-img>
                </b-link>
            </div>

            <div class="circle" v-if="selected == null">
                <b-link v-for="(socialdata, index) in circle" :key="index" v-on:click="addSocialIcons(index, socialdata)">
                    <b-img :src="socialdata.imagelink" style="width:30px; margin:5px" :alt="socialdata.name" :title="socialdata.title"></b-img>
                </b-link>
            </div>

            <div class="circle_Outline_Black" v-if="selected == 'circle-outline-black'">
                <b-link v-for="(socialdata, index) in circle_Outline_Black" :key="index" v-on:click="addSocialIcons(index, socialdata)">
                    <b-img :src="socialdata.imagelink" style="width:30px; margin:5px" :alt="socialdata.name" :title="socialdata.title"></b-img>
                </b-link>
            </div>
        </div>
    </b-collapse>
</div>
</template>

<script>
export default {
    name: 'iconsProp',
    props: {
        widgetType: {
            type: Array
        },
        selectedWidget: {
            type: Object
        }
    },
    data() {
        return {
            selected: null,
            circle_Outline_social: [{
                    name: "circle_Outline_social_youtube",
                    title: "Youtube",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553928858093-Youtube.png"
                },
                {
                    name: "circle_Outline_social_whatsapp",
                    title: "Whatsapp",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553928826185-Whatsapp.png",
                },
                {
                    name: "circle_Outline_social_fliker",
                    title: "Fliker",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553928477949-a7.png",
                },
                {
                    name: "circle_Outline_social_linkedln",
                    title: "Linkendln",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553928529226-a8.png",
                },
                {
                    name: "circle_Outline_social_Be",
                    title: "Be",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553928554644-a9.png",
                },
                {
                    name: "circle_Outline_social_Dribble",
                    title: "Dribble",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553928597457-a10.png",
                },
                {
                    name: "circle_Outline_social_Pinterest",
                    title: "Pinterest",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553928619752-a11.png",
                },
                {
                    name: "circle_Outline_social_Tumblr",
                    title: "Tumblr",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553928674308-a12.png",
                },
                {
                    name: "circle_Outline_social_Facebook",
                    title: "Facebook",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553928707694-Facebook.png",
                },
                {
                    name: "circle_Outline_social_Instagram",
                    title: "Instagram",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553928728533-Instagram.png",
                },
                {
                    name: "circle_OutLine_social_Snapchat",
                    title: "Snapchat",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553928767392-Snapchat.png",
                },
                {
                    name: "circle_OutLine_social_Twiter",
                    title: "Twiter",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553928808959-Twiter.png",
                },

            ],
            circle_Black: [{
                    name: "circle_Black_Youtube",
                    title: "Youtube",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930630174-Youtube.png",
                },
                {
                    name: "circle_Black_whatsapp",
                    title: "Whatsapp",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930605017-Whatsapp.png",
                },
                {
                    name: "circle_Black_fliker",
                    title: "Fliker",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929851312-c3.png",
                },
                {
                    name: "circle_Black_linkedln",
                    title: "Linkendln",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929904547-c7.png",
                },
                {
                    name: "circle_Black_Be",
                    title: "Be",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930213603-c11.png",
                },
                {
                    name: "circle_Black_Dribble",
                    title: "Dribble",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929883654-c4.png",
                },
                {
                    name: "circle_Black_Pinterest",
                    title: "Pinterest",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930424187-Pinterest.png",
                },
                {
                    name: "circle_Black_Tumblr",
                    title: "Tumblr",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930492194-Tumblr.png",
                },
                {
                    name: "circle_Black_Facebook",
                    title: "Facebook",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930086091-Facebook.png"
                },
                {
                    name: "circle_Black_Instagram",
                    title: "Instagram",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930405541-Instagram.png",
                },
                {
                    name: "circle_Black_Snapchat",
                    title: "Snapchat",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930453305-Snapchat.png",
                },
                {
                    name: "circle_Black_Twiter",
                    title: "Twiter",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930528662-Twiter.png",
                },

            ],
            circle: [{
                    name: "circle_Youtube",
                    title: "Youtube",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929800939-Youtube.png",
                },
                {
                    name: "circle_whatsapp",
                    title: "Whatsapp",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929783338-Whatsapp.png",
                },
                {
                    name: "circle_fliker",
                    title: "Fliker",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929655980-Fliker.png",
                },
                {
                    name: "circle_linkedln",
                    title: "Linkendln",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929693237-Linkedin.png",
                },
                {
                    name: "circle_Be",
                    title: "Be",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929596913-Be.png",
                },
                {
                    name: "circle_Dribble",
                    title: "Dribble",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929617986-d4.png",
                },
                {
                    name: "circle_Pinterest",
                    title: "Pinterest",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929722096-Pinterest.png",
                },
                {
                    name: "circle_Tumblr",
                    title: "Tumblr",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929756562-Tumblr.png",
                },
                {
                    name: "circle_Facebook",
                    title: "Facebook",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929638334-Facebook.png",
                },
                {
                    name: "circle_Instagram",
                    title: "Instagram",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929675528-Instagram.png",
                },
                {
                    name: "circle_Snapchat",
                    title: "Snapchat",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929737399-Snapchat.png",
                },
                {
                    name: "circle_Twiter",
                    title: "Twiter",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929769726-Twiter.png",
                },

            ],
            circle_Outline_Black: [{
                    name: "circle_Outine_Black_Youtube",
                    title: "Youtube",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930996053-Youtube.png",
                },
                {
                    name: "circle_Black_Black_whatsapp",
                    title: "Whatsapp",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930975779-Whatsapp.png",
                },
                {
                    name: "circle_Outiline_Black_fliker",
                    title: "Fliker",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930678305-b3.png",
                },
                {
                    name: "circle_Outline_Black_linkedln",
                    title: "Linkendln",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930757653-b7.png",
                },
                {
                    name: "circle_Outline_Black_Be",
                    title: "Be",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930772807-b11.png",
                },
                {
                    name: "circle_Outline_Black_Dribble",
                    title: "Dribble",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930742592-b4.png",
                },
                {
                    name: "circle_Outline_Black_Pinterest",
                    title: "Pinterest",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930849256-Pinterest.png",
                },
                {
                    name: "circle_Outline_Black_Tumblr",
                    title: "Tumblr",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930936004-Tumblr.png",
                },
                {
                    name: "circle_Outline_Black_Facebook",
                    title: "Facebook",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930789443-Facebook.png",
                },
                {
                    name: "circle_Outline_Black_Instagram",
                    title: "Instagram",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930829591-Instagram.png",
                },
                {
                    name: "circle_Outline_Black_Snapchat",
                    title: "Snapchat",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930910503-Snapchat.png",
                },
                {
                    name: "circle_Outline_Black_Twiter",
                    title: "Twiter",
                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553930959854-Twiter.png",
                },

            ],
            options: [{
                    value: null,
                    text: 'Circle'
                },
                {
                    value: 'Circle-Black',
                    text: 'Circle Black'
                },
                {
                    value: 'circle-outline',
                    text: 'Circle Outline'
                },
                {
                    value: 'circle-outline-black',
                    text: 'Circle Outline Black'
                },

            ],

        }
    },
    methods: {
        arrayindexdel(key){
            this.widgetType[this.selectedWidget.parentRow].columns[this.selectedWidget.column].rows[this.selectedWidget.row].text.socialsLinks.splice(key, 1);
            this.widgetType[this.selectedWidget.parentRow].columns[this.selectedWidget.column].rows[this.selectedWidget.row].text.socialsLinks.forEach((element, index) => {
                element.value = index + 1;
            });
        },
        addSocialIcons(key, objectsocial) {

            if (JSON.stringify(this.widgetType[this.selectedWidget.parentRow].columns[this.selectedWidget.column].rows[this.selectedWidget.row].text.socialsLinks).includes(objectsocial.name)) {

            } else {
                this.widgetType[this.selectedWidget.parentRow].columns[this.selectedWidget.column].rows[this.selectedWidget.row].text.socialsLinks.push(objectsocial)
            }

        }
    }
}
</script>

<style>

</style>
