import Icon from '@ant-design/icons';
import { Button } from 'antd';
import React from 'react';
import { getAuthorizeUri } from '../utils/SpotifyAuthUtil';
import SpotifyIcon from './SpotifyIcon';

const scopes: string[] = ['user-read-recently-played'];

interface Props {
    /**
     * Spotify app client ID.
     */
    clientId: string | undefined;
    /**
     * Redirect URI.
     */
    redirectUri: string | undefined;
    /**
     * Alternative label for button.
     */
    label?: string;
}

/**
 * Spotify authentication button.
 */
export default function SpotifyAuthButton(props: Props): JSX.Element {
    // Navigate to authorize URI
    const handleClick = () => {
        window.location.href = getAuthorizeUri(scopes);
    };

    const label = props.label ?? 'Authorize';
    return (
        <Button
            className="spotify-auth-btn"
            onClick={handleClick}
            type="primary"
            shape="round"
            icon={<Icon component={SpotifyIcon} />}
            size="large">
            {label}
        </Button>
    );
}