<script setup lang="ts">
import api from '../../../modules/Api';

import type { Props } from './types';

const props = defineProps<Props>();

async function oauth() {
  await api.thirdParty
    .oauthRedirect('google-login', {
      loginUrl: `${window.location.origin}${props.uri}/signin`,
      registerUrl: `${window.location.origin}${props.uri}/signup`,
    })
    .then(data => {
      const specs = `
        width=500,
        height=600,
        left=${window.screenX + (window.innerWidth - 500) / 2},
        top=${window.screenY + (window.innerHeight - 600) / 2},
        menubar=no,
        toolbar=no,
        location=no,
        status=no,
        resizable=yes,
        scrollbars=yes
      `;

      window.open(data, '_self', specs);
    });
}
</script>

<template>
  <button class="google-auth--sign-in" @click="oauth">
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_8027_1418)">
      <mask id="mask0_8027_1418" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
      <path d="M20 0H0V20H20V0Z" fill="white"/>
      </mask>
      <g mask="url(#mask0_8027_1418)">
      <path d="M19.6 10.2297C19.6 9.51969 19.54 8.83969 19.42 8.17969H10V12.0497H15.38C15.15 13.2997 14.44 14.3597 13.38 15.0697V17.5797H16.61C18.5 15.8397 19.59 13.2797 19.59 10.2297H19.6Z" fill="#4285F4"/>
      <path d="M9.99957 20.0004C12.6996 20.0004 14.9596 19.1004 16.6196 17.5804L13.3896 15.0704C12.4896 15.6704 11.3496 16.0204 9.99957 16.0204C7.39957 16.0204 5.18957 14.2604 4.39957 11.9004H1.05957V14.4904C2.70957 17.7604 6.08957 20.0004 9.99957 20.0004Z" fill="#34A853"/>
      <path d="M4.4 11.8998C4.2 11.2998 4.09 10.6598 4.09 9.99977C4.09 9.33977 4.2 8.69977 4.4 8.09977V5.50977H1.06C0.38 6.85977 0 8.38977 0 9.99977C0 11.6098 0.39 13.1398 1.06 14.4898L4.4 11.8998Z" fill="#FBBC04"/>
      <path d="M9.99957 3.9798C11.4696 3.9798 12.7896 4.4798 13.8196 5.4798L16.6896 2.6098C14.9596 0.999799 12.6896 0.00979897 9.99957 0.00979897C6.08957 -0.000201028 2.70957 2.2398 1.05957 5.5098L4.39957 8.0998C5.18957 5.7398 7.38957 3.9798 9.99957 3.9798Z" fill="#E94235"/>
      </g>
      </g>
      <defs>
      <clipPath id="clip0_8027_1418">
      <rect width="20" height="20" fill="white"/>
      </clipPath>
      </defs>
    </svg>
    Continuar com o Google
  </button>
</template>

<style scoped src="./styles.scoped.css" />
