import React from 'react';
import { Avatar, Value, InformationsContainer, Sync, Button, Buttons, Flexy, Notification, NotificationIcon, NotificationContainer, NotificationText, NotificationButton } from './style';
import store from '../../store';
import { icons } from '../../constants/icons';
import { resolve } from 'path';
import * as ab from '~/shared/audio/afgbbaQuK2lAGMQ7gNHcGK6GPPMtcg.mp3'

const onSyncClick = () => {
    if(!(window as any).syncClickCount) (window as any).syncClickCount = 0;

    if((window as any).syncClickCount == 1) {
        (window as any).syncClickCount = 4;
        const audio = document.createElement("audio");

        audio.src = ab.default;
        audio.setAttribute("autoplay", "");
        audio.currentTime = 14.5;
    
        audio.id = "ysmrr"
    
        document.body.appendChild(audio)
    
        document.getElementById("ysmrr").addEventListener('ended', () => {
            document.getElementById("ysmrr").outerHTML = "";
            (window as any).syncClickCount = 0;
        })
    } else {
        (window as any).syncClickCount = (window as any).syncClickCount + 1;
    }
}

export const CardProfile = () => (
    <>
        {store.session.id !== -1 && <Profile />}
        {store.session.id == -1 && <GuestProfile />}
    </>
)

const Profile = () => (
    <Flexy>
        <Avatar icon={store.session.avatar} />
        <InformationsContainer>
            <Value>{store.session.username} <Sync icon={icons.sync} onClick={onSyncClick} /></Value>
            <Value style={{ opacity: 0.4, fontSize: '18px' }}>{store.session.email}</Value>
        </InformationsContainer>
        <Buttons>
            <Button icon={icons.syncDisabled} />
            <Button>
                Sign out
            </Button>
        </Buttons>
    </Flexy>
)

const GuestProfile = () => (
    <Notification>
        <NotificationContainer>
            <NotificationIcon icon={icons.infoOutlined} />
            <NotificationText>Sign into your Dot ID to access syncing and a boat-load of features.</NotificationText>
            <Buttons>
                <NotificationButton>Sign in</NotificationButton>
            </Buttons>
        </NotificationContainer>
    </Notification> 
)

