<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="facebook-auth--sign-in" @click="oauth">
    <svg width="10" height="20" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_7763_7415)">
      <path d="M2.97111 20C2.97017 19.947 2.96875 19.8937 2.96875 19.8407C2.96875 16.8994 2.96781 13.9581 2.97158 11.0168C2.97158 10.8938 2.94517 10.8622 2.82513 10.8629C1.92517 10.8688 1.02521 10.8646 0.125253 10.8683C0.029975 10.8688 2.35547e-05 10.8465 0.000495231 10.7421C0.00426864 9.64575 0.00426864 8.54937 0.000495231 7.45323C2.35547e-05 7.34669 0.0233715 7.316 0.129027 7.31649C1.03299 7.32116 1.93672 7.31747 2.84069 7.32165C2.94305 7.32214 2.97205 7.29734 2.97158 7.18712C2.9671 6.31585 2.96403 5.44435 2.97135 4.57308C2.97819 3.75779 3.11521 2.96877 3.47321 2.23523C4.01045 1.1337 4.88045 0.471596 6.0179 0.166936C6.62165 0.00490947 7.23647 -0.0115387 7.85461 0.00515495C8.52627 0.0230761 9.19747 0.0510625 9.86701 0.116119C9.97172 0.126184 10.0005 0.160062 10 0.270044C9.99554 1.24368 9.99554 2.21731 10 3.19095C10.0005 3.29626 9.97125 3.31738 9.87574 3.31664C9.31774 3.31173 8.75975 3.31394 8.20152 3.31443C7.98903 3.31443 7.77725 3.32769 7.56877 3.37384C6.92446 3.51647 6.60066 3.89233 6.52896 4.57431C6.50868 4.76604 6.50514 4.95777 6.50538 5.15C6.50585 5.83321 6.5075 6.51642 6.50349 7.19939C6.50302 7.29562 6.52707 7.32189 6.61999 7.3214C7.66146 7.31796 8.70292 7.32066 9.74414 7.31674C9.84767 7.31625 9.87715 7.33589 9.86253 7.45102C9.7215 8.55354 9.58519 9.6568 9.45217 10.7603C9.44085 10.8548 9.40312 10.8678 9.32435 10.8676C8.42439 10.8651 7.52443 10.8671 6.62448 10.8644C6.54028 10.8644 6.50302 10.8745 6.50302 10.98C6.50608 13.9662 6.50561 16.9527 6.50561 19.9389C6.50561 19.9592 6.50726 19.9796 6.50821 20H2.97111Z" fill="#FEFEFE"/>
      </g>
      <defs>
      <clipPath id="clip0_7763_7415">
      <rect width="10" height="20" fill="white"/>
      </clipPath>
      </defs>
    </svg>
    Continuar com o Facebook
  </button>
</template>

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