const HanyuuOAuth2UserGuiseHeader = function(guise) {
    const element = <div class="oauth2-userhead-guise">
        <div class="oauth2-userhead-guise-avatar">
            <div class="oauth2-userhead-guise-avatar-image">
                <img src={guise.avatar_uri} alt=""/>
            </div>
        </div>
        <div class="oauth2-userhead-guise-text">
            <p>Are you <a href={guise.profile_uri} target="_blank" style={`color: ${guise.colour}`}>{guise.name}</a> and did you mean to use your own account?</p>
            <p><a href={guise.revert_uri} target="_blank">Click here</a> and reload this page.</p>
        </div>
    </div>;

    return {
        get element() { return element; },

        get visible() { return !element.classList.contains('hidden'); },
        set visible(state) {
            element.classList.toggle('hidden', !state);
        },
    };
};

const HanyuuOAuth2UserHeader = function(user) {
    const element = <div class="oauth2-userhead">
        <div class="oauth2-userhead-main">
            <div class="oauth2-userhead-main-avatar">
                <div class="oauth2-userhead-main-avatar-image">
                    <img src={user.avatar_uri} alt=""/>
                </div>
            </div>
            <div class="oauth2-userhead-main-name">
                <a href={user.profile_uri} target="_blank">{user.name}</a>
            </div>
        </div>
    </div>;

    let guiseInfo;
    if(user.guise) {
        guiseInfo = new HanyuuOAuth2UserGuiseHeader(user.guise);
        element.appendChild(guiseInfo.element);
    }

    return {
        get element() { return element; },

        get guiseVisible() { return guiseInfo?.visible === true; },
        set guiseVisible(state) {
            if(guiseInfo !== undefined)
                guiseInfo.visible = state;
        },
    };
};