import React from "react";
import { styled } from "styled-components";
import { HashLoader } from "react-spinners";
import { SigninResponse, SigninState } from 'oidc-client-ts';
import FloatingBox from "../../components/UI/FloatingBox";

const CenterContainer = styled.div`
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    text-align: center;

    & h2 {
        font-size: 1.8em;
        font-weight: 600;
        margin: 1.5em 0;
    }
`;

const ErrorText = styled.p`
    font-family: monospace;
    margin: 10px 0;
    width: 780px;
`;

export default class LoggedIn extends React.Component {
    constructor(props) {
        super(props);
        this.response = new SigninResponse(new URL(window.location.href).searchParams);
        this.signin_state = SigninState.fromStorageString(window.localStorage.getItem('oidc_signin_state'));

    }

    async componentDidMount() {
        console.log(this.response)
        console.log(this.signin_state);
    }

    render() {
        return (
            <>
                <div style={{height: '65vh'}}>
                    <CenterContainer>
                        <h2>Подождите пожалуйста</h2>
                        <div style={{margin: '36px auto', width:'fit-content'}}>
                            <HashLoader size='80' color='#0077aa' />
                        </div>
                    </CenterContainer>
                </div>
                
                {
                    this.response.error ?
                    <div>
                        <FloatingBox>
                            <h2>Ошибка авторизации</h2>
                            <p>{this.response.error}</p>
                            <ErrorText>{this.response.error_description}</ErrorText>
                        </FloatingBox>
                    </div>
                    : null
                }
            </>
        )
    }
}