<template>
    <div
        class="UserPicture"
        :style="{ backgroundImage: `url(${image})` }"
        :class="[ ...modifiersMap ]"
    >
        <svg class="UserPicture_certification" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.015 12.029"><path data-name="Tracé 3" d="M.01 12.014V4.806v-.172A4.57 4.57 0 014.51 0a4.57 4.57 0 014.5 4.634v7.38l-4.5-2.023-4.5 2.024z" fill="#ffe269"/><path data-name="Tracé 4" d="M9.009 12.014l-4.5-2.02L0 12.029v-1.917l3.209-1.467 1.352-.618 4.448-2.203z" fill="#ffc915"/><path data-name="Tracé 5" d="M0 12.014l4.5-2.02 4.509 2.035v-1.917l-4.56-2.085-4.45-2.2z" fill="#ffbc07" opacity=".408"/></svg>

        <svg class="UserPicture_ambassador" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.069 16.92"><path data-name="Tracé 27" d="M10.069 5.072A5.035 5.035 0 115.034 0a5.053 5.053 0 015.035 5.072z" fill="#3c9"/><path data-name="Tracé 28" d="M10.069 5.072A5.035 5.035 0 115.034 0a5.053 5.053 0 015.035 5.072z" fill="#3c9"/><path data-name="Tracé 29" d="M5.034 9.206c2.78 0 5.034-1.883 5.034-4.206v11.261c0 .256-.347.4-.594.252l-4.44-2.731-3.254 2c-.738.455-1.78.013-1.78-.755V5c0 2.323 2.254 4.206 5.034 4.206z" fill="rgba(51,204,153,0.68)"/><path data-name="Tracé 30" d="M0 5c0 2.334 2.337 4.227 5.221 4.227v4.6L.6 16.853a.382.382 0 01-.6-.248z" fill="#3c9"/><circle data-name="Ellipse 27" cx="4" cy="4" r="4" transform="translate(1 1)" fill="#333f7f"/></svg>

        <svg class="UserPicture_identity_verified" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.5234 2.11328C12.3594 2.03906 12.1836 2 12 2C11.8164 2 11.6406 2.03906 11.4766 2.11328L4.12108 5.23438C3.26171 5.59766 2.62108 6.44531 2.62499 7.46875C2.64452 11.3438 4.23827 18.4336 10.9687 21.6562C11.6211 21.9688 12.3789 21.9688 13.0312 21.6562C19.7617 18.4336 21.3555 11.3438 21.375 7.46875C21.3789 6.44531 20.7383 5.59766 19.8789 5.23438L12.5234 2.11328ZM16.4141 10.1641L11.4141 15.1641C11.0469 15.5312 10.4531 15.5312 10.0898 15.1641L7.58983 12.6641C7.22264 12.2969 7.22264 11.7031 7.58983 11.3398C7.95702 10.9766 8.55077 10.9727 8.91405 11.3398L10.75 13.1758L15.0859 8.83594C15.4531 8.46875 16.0469 8.46875 16.4101 8.83594C16.7734 9.20312 16.7773 9.79687 16.4101 10.1602L16.4141 10.1641Z" fill="#33CC99"/></svg>

        <svg class="UserPicture_completion_badge" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51"><path d="M22.8691 1.9458C24.2494 0.522578 26.5338 0.522579 27.9141 1.9458L30.6182 4.73486C31.0477 5.17775 31.6785 5.36254 32.2793 5.22217L36.0615 4.33838C37.9921 3.8873 39.914 5.12241 40.3057 7.06592L41.0732 10.8735C41.1951 11.4783 41.6249 11.9754 42.2061 12.1821L45.8672 13.4839C47.7348 14.1483 48.683 16.2252 47.9619 18.0718L46.5488 21.6909C46.3245 22.2655 46.4178 22.9157 46.7949 23.4038L49.1709 26.478C50.3829 28.0466 50.0579 30.3065 48.4531 31.4702L45.3076 33.7505C44.8081 34.1126 44.5354 34.7111 44.5889 35.3257L44.9248 39.1958C45.0964 41.1707 43.6013 42.8961 41.6221 43.0073L37.7432 43.2251C37.1272 43.2597 36.5744 43.6157 36.2871 44.1616L34.4775 47.5991C33.5541 49.3534 31.3629 49.9967 29.6377 49.02L26.2568 47.106C25.7201 46.8022 25.0631 46.8022 24.5264 47.106L21.1455 49.02C19.4203 49.9967 17.2291 49.3534 16.3057 47.5991L14.4961 44.1616C14.2088 43.6157 13.656 43.2597 13.04 43.2251L9.16113 43.0073C7.18189 42.8961 5.6868 41.1707 5.8584 39.1958L6.19434 35.3257C6.24778 34.7111 5.97509 34.1126 5.47559 33.7505L2.33008 31.4702C0.725312 30.3065 0.400276 28.0466 1.6123 26.478L3.98828 23.4038C4.36539 22.9157 4.45869 22.2655 4.23438 21.6909L2.82129 18.0718C2.10017 16.2252 3.04839 14.1483 4.91602 13.4839L8.57715 12.1821C9.15833 11.9754 9.58809 11.4783 9.70996 10.8735L10.4775 7.06592C10.8692 5.12242 12.7911 3.8873 14.7217 4.33838L18.5039 5.22217C19.1047 5.36254 19.7355 5.17775 20.165 4.73486L22.8691 1.9458Z" fill="#33CC99" stroke="#2EB88A" stroke-width="1.75677"/><mask :id="`completion-badge-mask-${_uid}`" fill="white"><path d="M40.2167 25.6069C40.2167 28.8716 39.1394 32.0451 37.152 34.6351C35.1646 37.2252 32.3781 39.0871 29.2246 39.932C26.0711 40.777 22.727 40.5578 19.7108 39.3085C16.6946 38.0591 14.1749 35.8494 12.5426 33.0221L19.5794 28.9594C20.3174 30.2377 21.4566 31.2367 22.8202 31.8016C24.1839 32.3664 25.6959 32.4655 27.1216 32.0835C28.5473 31.7015 29.8071 30.8597 30.7057 29.6887C31.6042 28.5177 32.0913 27.0829 32.0913 25.6069H40.2167Z"/></mask><path d="M40.2167 25.6069C40.2167 28.8716 39.1394 32.0451 37.152 34.6351C35.1646 37.2252 32.3781 39.0871 29.2246 39.932C26.0711 40.777 22.727 40.5578 19.7108 39.3085C16.6946 38.0591 14.1749 35.8494 12.5426 33.0221L19.5794 28.9594C20.3174 30.2377 21.4566 31.2367 22.8202 31.8016C24.1839 32.3664 25.6959 32.4655 27.1216 32.0835C28.5473 31.7015 29.8071 30.8597 30.7057 29.6887C31.6042 28.5177 32.0913 27.0829 32.0913 25.6069H40.2167Z" fill="white" stroke="#33CC99" stroke-width="0.22034" :mask="`url(#completion-badge-mask-${_uid})`"/></svg>

        <svg class="UserPicture_award_badge" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51"><path d="M22.8691 1.9458C24.2494 0.522578 26.5338 0.522579 27.9141 1.9458L30.6182 4.73486C31.0477 5.17775 31.6785 5.36254 32.2793 5.22217L36.0615 4.33838C37.9921 3.8873 39.914 5.12241 40.3057 7.06592L41.0732 10.8735C41.1951 11.4783 41.6249 11.9754 42.2061 12.1821L45.8672 13.4839C47.7348 14.1483 48.683 16.2252 47.9619 18.0718L46.5488 21.6909C46.3245 22.2655 46.4178 22.9157 46.7949 23.4038L49.1709 26.478C50.3829 28.0466 50.0579 30.3065 48.4531 31.4702L45.3076 33.7505C44.8081 34.1126 44.5354 34.7111 44.5889 35.3257L44.9248 39.1958C45.0964 41.1707 43.6013 42.8961 41.6221 43.0073L37.7432 43.2251C37.1272 43.2597 36.5744 43.6157 36.2871 44.1616L34.4775 47.5991C33.5541 49.3534 31.3629 49.9967 29.6377 49.02L26.2568 47.106C25.7201 46.8022 25.0631 46.8022 24.5264 47.106L21.1455 49.02C19.4203 49.9967 17.2291 49.3534 16.3057 47.5991L14.4961 44.1616C14.2088 43.6157 13.656 43.2597 13.04 43.2251L9.16113 43.0073C7.18189 42.8961 5.6868 41.1707 5.8584 39.1958L6.19434 35.3257C6.24778 34.7111 5.97509 34.1126 5.47559 33.7505L2.33008 31.4702C0.725312 30.3065 0.400276 28.0466 1.6123 26.478L3.98828 23.4038C4.36539 22.9157 4.45869 22.2655 4.23438 21.6909L2.82129 18.0718C2.10017 16.2252 3.04839 14.1483 4.91602 13.4839L8.57715 12.1821C9.15833 11.9754 9.58809 11.4783 9.70996 10.8735L10.4775 7.06592C10.8692 5.12242 12.7911 3.8873 14.7217 4.33838L18.5039 5.22217C19.1047 5.36254 19.7355 5.17775 20.165 4.73486L22.8691 1.9458Z" fill="#FBBB30" stroke="#CF8609" stroke-width="1.75677"/><path d="M23.6427 14.4462L20.5661 20.6842L13.6826 21.6877C12.4482 21.8668 11.9535 23.3886 12.8486 24.2602L17.8287 29.113L16.6508 35.9682C16.4388 37.2074 17.7439 38.1355 18.8369 37.556L24.9949 34.3192L31.1528 37.556C32.2458 38.1308 33.5509 37.2074 33.3389 35.9682L32.161 29.113L37.1411 24.2602C38.0362 23.3886 37.5415 21.8668 36.3071 21.6877L29.4236 20.6842L26.347 14.4462C25.7958 13.3343 24.1986 13.3201 23.6427 14.4462Z" fill="white"/></svg>

        <div class="UserPicture_badge" v-bind="badge" v-if="badge">
            <i :class="[
                (badge.style ? badge.style : 'fal'),
                (badge.fa ? `fa-${badge.fa}` : 'fa-star')
            ]"></i>
        </div>

        <i class="UserPicture_guaranted fal fa-shield"></i>
        <i class="UserPicture_verified fal fa-check-circle"></i>
    </div>
</template>

<script>
import { ModifiersMap } from '@studapart/core'
import certification from '../assets/certification-min.svg'
import ambassador from '../assets/ambassador-min.svg'
import identity_verified from '../assets/identity_verified.svg'

export default {
    name: 'UserPicture',
    mixins: [ ModifiersMap ],
    props: {
        image: { type: String, default: "" },
        badge: { type: [Boolean, Object], default: false },
        modifiers: { type: Array, default: () => [] }
    },
    data: () => ({
        assets: { certification, ambassador, identity_verified }
    })
}
</script>