<template>
    <Popper
        v-if="copy"
        hover
        openDelay="200"
        closeDelay="100"
        arrow
        content="Click to copy"
        class="w-full !border-none !m-0"
    >
        <component
            :is="buttonType"
            :href="urlLink"
            @click="click"
            target="_blank"
            rel="noopener noreferrer"
            class="w-full p-2 rounded-lg bg-blue-100 text-gray-200 gap-2.5 flex items-center"
        >
            <PlatformIcons :type="type" />
            <span
                class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
                v-if="link"
            >
                {{ displayLink }}
            </span>
            <span class="flex-1 select-none" v-else>
                Your <span class="capitalize"> {{ type }} </span> account
            </span>
        </component>
    </Popper>
    <component
        v-else
        :is="buttonType"
        :href="urlLink"
        @click="click"
        target="_blank"
        rel="noopener noreferrer"
        class="w-full p-2 rounded-lg bg-blue-100 text-gray-200 gap-2.5 flex items-center"
    >
        <PlatformIcons :type="type" />
        <span
            class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
            v-if="link"
        >
            {{ displayLink }}
        </span>
        <span class="flex-1 select-none" v-else>
            Your <span class="capitalize"> {{ type }} </span> account
        </span>
    </component>
</template>

<script>
import PlatformIcons from "@/components/General/PlatformIcons";
export default {
    props: {
        link: {
            type: String,
        },
        type: {
            type: String,
            default: "muhandisin",
        },
        copy: {
            type: Boolean,
            default: false,
        },
        useBaseUrls: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            baseUrls: {
                muhandisin: "www.muhandisin.com/",
                twitter: "https://www.twitter.com/",
                facebook: "https://www.facebook.com/",
                instagram: "https://www.instagram.com/",
                linkedin: "https://www.linkedin.com/in/",
            },
        };
    },
    components: {
        PlatformIcons,
    },
    computed: {
        displayLink: function () {
            // console.log(this.link);
            if (this.type == "muhandisin") {
                return this.link
                    ?.replace("https://", "")
                    .replace("http://", "");
            }
            const splits = this.link.split("/");
            const url = "/" + splits[splits.length - 1];
            return url;
        },
        buttonType: function () {
            let type = "span";
            if (this.link && !this.copy) type = "a";
            else if (this.copy) type = "button";
            return type;
        },
        urlLink: function () {
            let link = this.link;
            // const splits = this.link.split("/");
            // let link = "/" + splits[splits.length - 1];
            // if (this.useBaseUrls) {
            //     link = this.baseUrls[this.type] + this.link;
            // }
            return link;
        },
    },
    methods: {
        click: function () {
            if (this.copy) {
                navigator.clipboard.writeText(this.link);
                this.$page.props.flash.success = "Copied to clipboard!";
            }
        },
    },
};
</script>
