<script setup lang="ts">
	import { mdiOpenInNew } from '@mdi/js'
	import { computed } from 'vue'
	import { useTheme } from 'vuetify'
	import { locales } from './locales'
	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'

	const props = withDefaults(defineProps<{
		href: string
		isConnectPlus?: boolean
		dark?: boolean
	}>(), {
		isConnectPlus: false,
		dark: false,
	})

	const theme = useTheme()
	const isDark = computed(() => theme.current.value.dark || props.dark)

	const franceConnectInfoUrl = props.isConnectPlus
		? 'https://franceconnect.gouv.fr/france-connect-plus'
		: 'https://franceconnect.gouv.fr/'

	const btnWidth = computed(() => props.isConnectPlus ? '245px' : '209px')
	const infoUrl = computed(() => franceConnectInfoUrl)
</script>

<template>
	<div
		class="sy-france-connect-btn d-flex flex-column align-start"
		:class="{
			'sy-france-connect-btn--dark': isDark,
		}"
	>
		<a
			:href="href"
			:aria-label="locales.btnLabel(isConnectPlus)"
			class="sy-france-connect-link d-inline-flex"
		>
			<svg
				:viewBox="`0 0 ${props.isConnectPlus ? '245' : '209'} 56`"
				:width="btnWidth"
				height="56"
				xmlns="http://www.w3.org/2000/svg"
				role="presentation"
				aria-hidden="true"
			>
				<path
					fill="#000091"
					d="m47 19.1-15-8.68-15 8.76a.6.6 0 0 0-.3.53v16.94a.67.67 0 0 0 .3.53l15 8.6 14.99-8.7a.67.67 0 0 0 .3-.53V19.63a.6.6 0 0 0-.3-.53Z"
				/>

				<path
					fill="#e1000f"
					d="m26.64 19.6-5.03 8.63-4.55-9.18 5.39-3.11 4.48 3.16-.29.5ZM47.3 36.58V19.62a.6.6 0 0 0-.3-.52l-15-8.68"
				/>

				<path
					fill="#0063cb"
					d="M16.7 36.58 32 10.42v35.36l-15-8.6a.67.67 0 0 1-.3-.53V19.71v16.87Zm24.67-20.74L46.83 19l-4.5 9.15-5.38-9.24 4.42-3.07Z"
				/>

				<path
					fill="#fff"
					d="M51.6 16.3 32.43 5.28a.93.93 0 0 0-.84 0L12.4 16.3a.89.89 0 0 0-.39.7v22a.89.89 0 0 0 .4.7l19.18 11.02a.93.93 0 0 0 .84 0L51.6 39.7A.89.89 0 0 0 52 39V17a.89.89 0 0 0-.4-.7ZM22.8 34.06h.08c-.04 0-.08 0-.08.05 0 .1.15 0 .2.1-.24 0-.46.1-.63.27 0 .06.1.06.15.06-.07.1-.23.05-.28.15l.1.05c-.05 0-.1 0-.1.05v.15c-.12 0-.17.1-.27.15.2.15.32 0 .52 0-.52.2-.95.48-1.48.63-.1 0 0 .15-.1.15.15.1.23-.05.38-.05-.66.38-1.34.7-2.04 1.13a.35.35 0 0 0-.1.2h-.2c-.1.05-.05.18-.15.28.23.15.5-.2.65 0 .05 0-.1.05-.2.05-.05 0-.05.1-.1.1H19c-.1.07-.2.12-.2.27a.22.22 0 0 0-.23.1c1.08 0 2.14-.2 3.15-.57.78-.4 1.48-.93 2.09-1.56l.05.1c-.15.43-.43.81-.81 1.08-.28.15-.48.37-.7.48-.15.08-.3.17-.43.27-.63.2-1.28.34-1.94.41l-.3.05-.67.1-2-1.13a.65.65 0 0 1-.28-.41.58.58 0 0 0 .09-.07.26.26 0 0 0-.11-.07v-.65a12.8 12.8 0 0 0 3.04-.94 8.75 8.75 0 0 0-3.04-1.34v-1.52c.55.1 1.1.22 1.64.4.41.15.8.34 1.18.57.15.14.3.27.48.38a.91.91 0 0 0 .8.05h.33a3.96 3.96 0 0 0 1.93-.9c0 .04.05.04.1.04-.07.4-.22.79-.42 1.14 0 .05-.05.15.05.2Zm2.82 3.57c.25-.1.4-.28.63-.38-.05.05-.05.15-.1.2a3.7 3.7 0 0 0-.53.4c-.57.5-1.1 1.04-1.59 1.61-.25.3-.53.58-.8.86l-.3.24-2.54-1.45c.36.03.73.02 1.08-.05a5 5 0 0 0 .86-.33v.1c.7-.27 1.23-.9 1.93-1.13.03 0 .13.1.23.05a1.88 1.88 0 0 1 1.5-.7c0 .05 0 .1.06.1h.02c-.15.13-.32.25-.5.38-.05.05 0 .1.05.1Zm-8.91-6.16v-.19c.52-.14 1.05-.2 1.59-.19a5.86 5.86 0 0 0-1.59.37Zm30.6 5.08a.67.67 0 0 1-.3.53L36.9 42.93a32.3 32.3 0 0 1-3.4-1.19 2.83 2.83 0 0 1-.05-2.24c.07-.3.2-.6.35-.88.02-.03.05-.05.05-.08h.01l.01-.03c.11-.19.24-.38.38-.55l.01-.02.02-.02.02-.01c0-.03.02-.05.05-.08.02-.05.07-.07.1-.12.17-.19.37-.36.58-.5.21-.08.43-.14.65-.18.81.06 1.62.17 2.42.33.1.01.19.05.27.1.3.06.62.04.9-.05a1.14 1.14 0 0 0 .86-.7 1.21 1.21 0 0 0 .05-1.07c-.17-.27 0-.43.19-.59l.06-.05c.09-.06.17-.14.23-.22.13-.25-.1-.4-.15-.63-.05-.1-.22-.05-.32-.2.35-.15.85-.43.63-.86-.16-.22-.38-.63-.1-.85.35-.2.85-.15 1-.48a1.14 1.14 0 0 0-.3-1.09l-.07-.1-.2-.32a6.9 6.9 0 0 0-.53-.76 4.3 4.3 0 0 1-.53-1.01c-.15-.38.05-.7.05-1.08.01-.73-.1-1.46-.33-2.15-.13-.35-.18-.73-.33-1.06-.02-.2-.1-.4-.22-.58a.37.37 0 0 1 0-.33c.2-.14.4-.3.58-.47a.57.57 0 0 0-.2-.71c-.33-.15-.3.33-.53.43h-.15c-.05-.13.05-.18.15-.28 0-.05 0-.15-.05-.15-.2 0-.38-.05-.43-.15a3.96 3.96 0 0 0-1.86-1.29c.19.06.38.1.58.1.34.08.69.04 1-.1.23-.07.28-.48.38-.7a.8.8 0 0 0-.15-.63c-.23-.33-.54-.6-.9-.76a9.13 9.13 0 0 1-.94-.48c-2.96-1.48-9.07-.2-9.53 0-.44.13-.86.29-1.26.48a3.92 3.92 0 0 0-2.36 2.46c-.57.38-1.03.9-1.34 1.51-.42.8-1.05 1.51-.95 2.41.1.78.28 1.49.43 2.3.04.27.1.53.2.8s0 .62.15.85c.07.15.02.33.22.43v.2c.05.05.05.1.16.1v.2c.43.42.8.9 1.1 1.43.1.28-.48.15-.7.05-.41-.27-.8-.6-1.13-.96a.18.18 0 0 0-.05.1c.2.36.9.78.53 1.01-.2.1-.43-.15-.63.05-.05.08 0 .18 0 .28-.28-.2-.58-.1-.86-.2-.2-.05-.25-.43-.48-.43-.6-.14-1.2-.25-1.8-.33-.58-.08-1.16-.14-1.75-.16V19.71a.6.6 0 0 1 .31-.53L32 10.42l15 8.68a.6.6 0 0 1 .3.52v16.93Zm-7.96-8.26a.32.32 0 0 1-.28.15l-.28.27c.1 0 0 .15.1.15-.2.23.08.7-.2.8-.37.1-.76.1-1.13 0a.72.72 0 0 1 .17-.02h.08a.38.38 0 0 0 .34-.13v-.2c0-.05-.05-.05-.1-.05a.16.16 0 0 1-.1.05.22.22 0 0 0-.16-.2.8.8 0 0 1-.72-.27.67.67 0 0 1 .44-.05c.13 0 .08-.23.23-.33h.16c.3-.37.87-.47.97-.84 0-.1-.28-.1-.49-.15a2.26 2.26 0 0 0-.82.05c-.36.05-.7.14-1.05.27.28-.2.6-.36.92-.47.24-.09.48-.15.72-.2l.13-.02.14-.03a.97.97 0 0 1 .55 0c.23.1.62.1.67.25.1.27-.15.54-.44.74-.05.08.15.14.15.23Z"
				/>

				<path
					:fill="isDark ? '#000091' : '#f5f5fe'"
					d="M64.99 24.87a4.9 4.9 0 0 0 4.08 1.95c2.1 0 3.69-1.3 3.69-3.36 0-3.96-5.63-3.35-5.63-6.02 0-1.02.75-1.75 1.92-1.75 1.02 0 1.85.56 2.55 1.56l1.2-1.05a4.54 4.54 0 0 0-3.77-1.94c-2.07 0-3.53 1.45-3.53 3.21 0 3.93 5.64 3.35 5.64 6.04 0 1.09-.77 1.88-2.1 1.88-1.1 0-2.05-.56-2.86-1.61l-1.2 1.09Zm10.81-5.71 1.75-4.56H75.9l-1.44 4.56h1.34Zm4.82-3.46a1 1 0 0 0 1-1.01 1 1 0 0 0-1-1c-.56 0-1.02.45-1.02 1 0 .56.46 1.02 1.02 1.02Zm-.73 10.8h1.45v-8.57h-1.45v8.57Zm3.77-4.28c0 2.5 1.72 4.62 4.4 4.62 1.28 0 2.28-.5 3.04-1.36v1.02h1.45V13.75H91.1v5.2a3.89 3.89 0 0 0-3.04-1.36c-2.68 0-4.4 2.13-4.4 4.63Zm1.53 0c0-1.82 1.22-3.27 3.04-3.27 1.17 0 2.21.56 2.87 1.58v3.37a3.33 3.33 0 0 1-2.87 1.58c-1.82 0-3.04-1.45-3.04-3.26Zm18.02 2.87-1.07-.83a3.19 3.19 0 0 1-2.6 1.27c-1.84 0-3.15-1.24-3.2-3.3h6.58c.05-.23.1-.56.1-.9 0-2.1-1.5-3.74-3.84-3.74-2.65 0-4.32 2.02-4.32 4.63a4.5 4.5 0 0 0 4.68 4.62c1.6 0 2.87-.68 3.67-1.75Zm-4.06-6.27a2.31 2.31 0 0 1 2.43 2.3h-5.13c.3-1.47 1.29-2.3 2.7-2.3Zm6.32 7.68h1.45v-5.93c.54-.9 1.32-1.62 2.56-1.62 1.33 0 2.2.89 2.2 2.42v5.13h1.44v-5.18c0-2.44-1.43-3.73-3.35-3.73-1.27 0-2.16.55-2.85 1.31v-.97h-1.45v8.57Zm11.06-2.87c0 2.09 1.07 3.04 2.97 3.04.61 0 1.07-.07 1.48-.24v-1.29c-.32.14-.72.2-1.28.2-1.03 0-1.71-.37-1.71-1.71v-4.39h2.97v-1.3H118v-2.15h-1.46v2.14h-1.62v1.31h1.62v4.39Zm7.37-7.92a1 1 0 0 0 1-1.03 1 1 0 0 0-1-1c-.56 0-1.02.46-1.02 1 0 .57.46 1.03 1.02 1.03Zm-.73 10.79h1.45v-8.57h-1.45v8.57Zm3.38-8.57v1.31h1.61v7.26h1.47v-7.26h2.97v-1.3h-2.97v-1.1c0-1.12.64-1.78 1.61-1.78.5 0 .88.15 1.2.39l.65-1.2c-.47-.28-1.1-.5-1.88-.5-1.87 0-3.05 1.3-3.05 3.13v1.05h-1.61Zm8.54-2.22a1 1 0 0 0 1-1.03 1 1 0 0 0-1-1c-.56 0-1.02.46-1.02 1 0 .57.46 1.03 1.02 1.03Zm-.73 10.79h1.44v-8.57h-1.44v8.57Zm12.11-1.41-1.07-.83a3.19 3.19 0 0 1-2.6 1.27c-1.83 0-3.14-1.24-3.2-3.3h6.59c.05-.23.1-.56.1-.9 0-2.1-1.51-3.74-3.84-3.74-2.66 0-4.32 2.02-4.32 4.63a4.5 4.5 0 0 0 4.67 4.62c1.6 0 2.88-.68 3.67-1.75Zm-4.06-6.27a2.31 2.31 0 0 1 2.43 2.3h-5.13c.3-1.47 1.3-2.3 2.7-2.3Zm6.33 7.68h1.44v-5.88c.53-.87 1.26-1.45 2.38-1.45.34 0 .6.04.85.1v-1.4a3.13 3.13 0 0 0-3.23 1.14v-1.08h-1.44v8.57Zm13.66.24c1.11 0 2.23-.5 2.88-1.33v1.09h1.44v-5.75c0-1.88-1.29-3.16-3.47-3.16-1.5 0-2.7.63-3.45 1.65l1.1.83a2.78 2.78 0 0 1 2.3-1.19c1.23 0 2.08.68 2.08 1.87v.6l-2.9.47c-1.81.31-2.8 1.23-2.8 2.52 0 1.46 1.14 2.4 2.82 2.4Zm-1.36-2.45c0-.73.53-1.26 1.7-1.46l2.54-.43v1.69a3 3 0 0 1-2.64 1.46c-1 0-1.6-.53-1.6-1.26Zm7.2-6.36 3.36 8.57h1.9l3.35-8.57h-1.56L172.54 25l-2.74-7.06h-1.56Zm17.86 7.16-1.07-.83a3.19 3.19 0 0 1-2.6 1.27c-1.84 0-3.14-1.24-3.2-3.3h6.58c.06-.23.1-.56.1-.9 0-2.1-1.5-3.74-3.84-3.74-2.65 0-4.31 2.02-4.31 4.63a4.5 4.5 0 0 0 4.67 4.62c1.6 0 2.87-.68 3.67-1.75Zm-4.06-6.27a2.31 2.31 0 0 1 2.43 2.3h-5.13c.3-1.47 1.29-2.3 2.7-2.3Zm10.24 6.66c-1.86 0-3.17-1.43-3.17-3.26 0-1.82 1.31-3.27 3.15-3.27 1.07 0 1.94.51 2.46 1.26l1.14-.87a4.43 4.43 0 0 0-3.6-1.75 4.51 4.51 0 0 0-4.66 4.63c0 2.5 1.82 4.62 4.66 4.62 1.56 0 2.8-.68 3.6-1.75l-1.14-.87a2.95 2.95 0 0 1-2.44 1.26ZM65.85 44.5h2.56v-5.36h4.07V37H68.4v-2.99h4.79V31.9h-7.35v12.6Zm8.9 0h2.3v-5.81a2.48 2.48 0 0 1 2.17-1.2c.41 0 .72.06 1 .13v-2.25a2.52 2.52 0 0 0-.79-.12c-1.02 0-1.8.47-2.39 1.08v-.9h-2.29v9.07Zm9.43.27c1.07 0 2.15-.45 2.72-1.15v.88h2.29v-5.87c0-2-1.35-3.56-3.98-3.56-1.66 0-2.99.68-3.8 1.8l1.68 1.28a2.46 2.46 0 0 1 2.05-1.08c1.04 0 1.76.6 1.76 1.56v.24l-2.77.46c-1.94.33-3 1.35-3 2.72 0 1.68 1.24 2.72 3.05 2.72Zm-.79-2.83c0-.55.4-.95 1.35-1.11l2.16-.36v1.28c-.45.72-1.2 1.2-2.25 1.2-.77 0-1.26-.4-1.26-1Zm8.42 2.56h2.28v-5.92c.34-.58.96-1.35 2.1-1.35 1.12 0 1.8.75 1.8 1.96v5.31h2.31v-5.4c0-2.68-1.56-4.03-3.53-4.03-1.2 0-2.05.47-2.68 1.08v-.72h-2.28v9.07Zm15.44-1.8c-1.53 0-2.63-1.13-2.63-2.74 0-1.58 1.1-2.73 2.6-2.73.93 0 1.65.41 2.09 1.04l1.78-1.37a4.69 4.69 0 0 0-3.84-1.83c-3.13 0-5 2.25-5 4.9 0 2.64 1.87 4.89 5 4.89 1.66 0 3-.72 3.84-1.84l-1.78-1.36a2.42 2.42 0 0 1-2.06 1.04Zm13.54.32-1.63-1.3a2.91 2.91 0 0 1-2.34 1.09c-1.43 0-2.47-.69-2.69-2.38h6.36c.07-.3.14-.77.14-1.28 0-2.37-1.65-4.08-4.17-4.08-2.97 0-4.67 2.21-4.67 4.9 0 2.64 1.82 4.89 5.04 4.89 1.71 0 3.12-.7 3.96-1.84Zm-4.39-6.08c1.28 0 1.95.92 1.98 1.84h-4.17c.25-1.2 1.02-1.84 2.2-1.84Zm12.5 5.53c-2.38 0-4.07-1.86-4.07-4.27 0-2.41 1.7-4.27 4.07-4.27 1.44 0 2.57.7 3.3 1.73l2-1.56a6.53 6.53 0 0 0-5.3-2.56 6.55 6.55 0 0 0-6.7 6.66c0 3.6 2.72 6.66 6.7 6.66 2.28 0 4.16-1 5.3-2.57l-2-1.55a3.94 3.94 0 0 1-3.3 1.73Zm11.36-7.4a4.8 4.8 0 0 0-4.96 4.9 4.8 4.8 0 0 0 4.96 4.89 4.8 4.8 0 0 0 4.97-4.9 4.8 4.8 0 0 0-4.97-4.9Zm.04 7.63c-1.51 0-2.63-1.15-2.63-2.74 0-1.58 1.12-2.73 2.63-2.73 1.46 0 2.56 1.15 2.56 2.73 0 1.57-1.1 2.74-2.56 2.74Zm7.02 1.8h2.28v-5.92c.34-.58.96-1.35 2.1-1.35 1.13 0 1.8.75 1.8 1.96v5.31h2.31v-5.4c0-2.68-1.56-4.03-3.53-4.03-1.2 0-2.05.47-2.68 1.08v-.72h-2.28v9.07Zm11.09 0h2.28v-5.92c.35-.58.96-1.35 2.11-1.35 1.12 0 1.8.75 1.8 1.96v5.31h2.3v-5.4c0-2.68-1.56-4.03-3.52-4.03-1.2 0-2.06.47-2.69 1.08v-.72h-2.28v9.07Zm19.44-1.48-1.63-1.3a2.91 2.91 0 0 1-2.34 1.09c-1.43 0-2.47-.69-2.69-2.38h6.36c.07-.3.14-.77.14-1.28 0-2.37-1.66-4.08-4.18-4.08-2.97 0-4.66 2.21-4.66 4.9 0 2.64 1.82 4.89 5.04 4.89 1.71 0 3.12-.7 3.96-1.84Zm-4.39-6.08c1.28 0 1.94.92 1.98 1.84h-4.18c.26-1.2 1.03-1.84 2.2-1.84Zm10.75 5.76c-1.53 0-2.63-1.13-2.63-2.74 0-1.58 1.1-2.73 2.6-2.73.93 0 1.65.41 2.08 1.04l1.78-1.37a4.69 4.69 0 0 0-3.83-1.83c-3.13 0-5 2.25-5 4.9 0 2.64 1.87 4.89 5 4.89 1.66 0 2.99-.72 3.83-1.84l-1.78-1.36a2.42 2.42 0 0 1-2.05 1.04Zm6.2-1.51c0 2.21 1.09 3.49 3.35 3.49.76 0 1.3-.09 1.75-.29v-2c-.3.13-.72.2-1.35.2-.9 0-1.44-.4-1.44-1.4v-3.71h2.77v-2.05h-2.77v-2.27h-2.3v2.27h-1.7v2.05h1.7v3.7Z"
				/>

				<path
					v-if="isConnectPlus"
					:fill="isDark ? '#000091' : '#f5f5fe'"
					d="M233 30.571V25.429H223.6V16H218.448V25.429H209V30.572H218.448V40H223.6V30.571H233Z"
				/>
			</svg>
		</a>

		<a
			:href="infoUrl"
			target="_blank"
			rel="noopener noreferrer"
			class="sy-france-connect-info-link text-decoration-none mt-3"
			:aria-label="locales.infoLinkAriaLabel(isConnectPlus)"
		>
			{{ locales.infoLinkLabel(isConnectPlus) }}
			<SyIcon
				name="external-link"
				size="1em"
				:icon="mdiOpenInNew"
				class="sy-france-connect-info-link-icon"
				decorative
			/>
		</a>
	</div>
</template>

<style lang="scss" scoped>
.sy-france-connect-btn a {
	color: #000091;

	&:focus-visible {
		outline: solid #0a76f6;
		outline-width: 2px;
		outline-offset: 2px;
	}
}

.sy-france-connect-link {
	background: #000091;

	&:hover {
		background: #1212ff;
		transition: all 0.2s ease-in-out;
	}

	&:focus {
		outline-offset: 3px;
	}
}

.sy-france-connect-btn--dark {
	.sy-france-connect-link {
		color: rgb(var(--v-theme-onPrimary));
		background-color: #8585f6;

		&:hover {
			background-color: #b1b1f9;
		}
	}

	.sy-france-connect-info-link {
		color: #8585f6;
	}
}

.sy-france-connect-info-link {
	background-image: linear-gradient(currentcolor, currentcolor);
	background-position: 0% 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;

	&:hover {
		background-size: 100% 2px;
	}
}

:deep(&:focus) {
	border-radius: 0 !important;
}
</style>
