import React from 'react';

import { styled } from 'styled-components';
import { HashLoader } from 'react-spinners';
import BlueButton from '../../components/UI/BlueButton';
import FloatingBox from '../../components/UI/FloatingBox';

import * as OpenID from 'oidc-client-ts';
import constants from '../../constants';

import { User } from '../../API/User';

const { OIDCConfig } = constants;

const LoginButton = styled(BlueButton)`
    font-size: 11pt;
    width: 250px;
    height: 60px;
    padding: 16px 20px;

    font-size: 11.5pt;
    font-weight: 700;
    cursor: ${props => props.disabled ? 'default' : 'pointer'};

    & svg {
        height: 14pt;
        transform: translateY(4px);
        margin-left: 10px;
    }
    &:hover {
        background: ${props => props.disabled ? 'white' : 'royalblue'};
    }
`;

const SmallText = styled.p`
    font-size: 8pt;
    color: gray;
    margin-top: 16px;
`;

const VVSULogoSVG = () => {
    return <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 451.5 155.9"><path fillRule="evenodd" d="M408.7 0h42.8L416 102.5l-2.8 8.1c-8.2 23.9-33.9 43.6-58 45.2h-.6c-.8.1-1.6.1-2.5.1H348c-.8 0-1.6 0-2.4-.1h-43l15.7-45.2.3-.8h35.7c9.1 0 19.2-7.8 22.5-17.2l.4-1 1.2-3.5h-32.7c-4.4 0-19.5 0-13.1-18.5l4.4-12.9 3.9-11.2L356.5 0H393l-21.7 62.8H387c2.6-7.5 15.8-45.6 21.7-62.8zm-91.2 0h25.9l-15.7 45.3h-7c-9.6 0-20.1 7.9-23.5 17.4L265 155.9c-.5 0-1-.1-1.5-.1h-43l15.8-45.2 7.8-22.6 14.8-42.5c8.3-24.1 34.4-44 58.6-45.2V0zM208 0h48.7l-20.1 58.1c-3.2 9.1-9.4 15.2-19.4 17.2l16.8.1-12.3 35.2c-8.2 23.9-33.9 43.6-58 45.2h-.7c-.8.1-1.6.1-2.5.1h-4.1c-.8 0-1.6 0-2.4-.1h-43l38.2-110.4c8.4-24.1 34.4-44 58.7-45.2l.1-.2zm-12.7 40.8h15.4l-8.1 23h-23.9l4.4-12.5c1.7-4.6 7.3-10.5 12.2-10.5zm-25.6 48.8H194l-5.5 16.1c-1.1 3.4-6.1 10.8-13.6 10.8h-14.1l8.9-26.9zM96.9 0h48.7l-20.2 58.1c-3.2 9.1-9.4 15.2-19.4 17.2l16.8.1-9.3 27.1h-.2l-2.8 8.1c-8.2 23.9-33.9 43.6-58 45.2h-.6c-.8.1-1.7.1-2.5.1h-4.1c-.8 0-1.6 0-2.4-.1H0l15.7-45.2L23.6 88l14.7-42.5C46.7 21.4 72.7 1.5 97 .3V0zM84.2 40.8h15.4l-8.1 23H67.6L72 51.3c1.7-4.6 7.3-10.5 12.2-10.5zM58.6 89.6h24.3l-5.5 16.1c-1.1 3.4-6.1 10.8-13.5 10.8H49.7l8.9-26.9z" clipRule="evenodd"/></svg>;
}

export default class LoginPage extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {
            loading: false,
            error: JSON.parse(window.localStorage.getItem('auth_fail'))
        }

        window.localStorage.removeItem('auth_fail');
        this.openid = this.openid.bind(this);
    }

    async openid() {
        if (this.state.loading === true) return;
        this.setState({loading: true});

        OpenID.Log.setLogger(console);
        OpenID.Log.setLevel(OpenID.Log.NONE);

        let client = new OpenID.UserManager(OIDCConfig);

        client.signinRedirect();
    }

    render() {

        if (User.isCached())
            window.location.href = '/';

        return (
            <div style={{height: '65vh'}}>
                <FloatingBox>
                    <h2>Вход</h2>
                    <hr/>
                    <LoginButton onClick={this.openid} disabled={this.state.loading}>
                        {
                            this.state.loading ?
                                <HashLoader size='24px' color='#4169e1' /> :
                                <>
                                    Войти через 
                                    <VVSULogoSVG />
                                </>
                        }
                    </LoginButton>
                    <SmallText>
                        Вход осуществляется только через<br/>
                        Систему Единого Входа ВВГУ
                    </SmallText>
                    {
                        this.state.error ? 
                        <SmallText style={{color: 'darkred', fontWeight: '600'}}>
                            Произошла ошибка: { this.state.error.error }
                            {
                                this.state.error.error_description ?
                                <>
                                    <br/>
                                    {this.state.error.error_description}
                                </>
                                : null
                            }
                        </SmallText>
                        : null
                    }
                </FloatingBox>
            </div>
        );
    }
}