import { Theme, WithStyles, withStyles } from '@signatu/styles';
import { ConsentConfig, ConsentEvent, CookieConsent } from '@signatu/consent';
import React from 'react';

import { ConsentButtons } from '../components/consentButtons';
import { ConsentProps } from '../lib/consentBase';
import { signatuButton } from '../styles/button';

export interface CookieBannerProps extends ConsentProps  {
    config: ConsentConfig
}
export interface CookieBannerState {
    loaded: boolean
    accepted: boolean
    consent?: ConsentEvent
}

const styles = (theme: Theme) => ({
    root: {
        display: "none",
        position: "fixed", 
        bottom: 0, 
        left: 0, 
        width: "100%", 
        opacity: 0, 
        zIndex: 9999
    }, 
    show: {
        display: "flex", 
        opacity: 0.9,
        transition: 'opacity 2s ease-in'
    }, 
    banner: {
        transition: 'all 1s', 
        display: "flex", 
        flex: 1, 
        flexDirection: "row", 
        padding: theme.spacing.unit * 4,
        backgroundColor: theme.palette.primary.main, 
        color: theme.palette.primary.contrastText, 
        '& a': {
            color: theme.palette.primary.contrastText
        }, 
        boxSizing: 'border-box'
    }, 
    content: {
        flex: 1
    }, 
    fill: {
        margin: theme.spacing.unit * 4
    }, 
    buttonContainer: {
        maxWidth: "320px"
    }, 
    button: signatuButton(theme)
})

class CookieBanner extends React.Component<CookieBannerProps & WithStyles, CookieBannerState> {

    cookieConsent?: CookieConsent
    consent?: ConsentEvent
    constructor(props) {
        super(props)
        this.state = { loaded: false, accepted: false}
    }

    update(consent?: ConsentEvent) {
        /** One second delay on action */
        const timeout = consent ? 1000 : 0;
        setTimeout(() => this.setState({loaded: true, consent, accepted: consent ? !!consent.action : false}), timeout)        
    }

    render() {
        const { classes, subject, issuer, config, scope, delegate, children } = this.props
        const { loaded, consent } = this.state
        /** If we have loaded and no action from the user => show dialog. Otherwise hide it */
        return (
        <div data-type="CookieBanner" className={`${classes.root} ${loaded && !consent ? classes.show : ""}`}>
                <div className={classes.banner}>
                    <div className={classes.content}>{children}</div>
                    <div className={classes.fill}/>
                    <div className={classes.buttonContainer}>
                        <ConsentButtons
                            config={config} 
                            subject={subject}
                            issuer={issuer}
                            scope={scope}

                            delegate={delegate}
                            
                            /** Overrides */
                            target="signatu.com/demo/checkboxandbuttons"
                            language={this.props.language}

                            onLoaded={c => this.update(c)}
                            onAction={c => this.update(c)} 
                        />
                    </div>
                </div>
            </div>
        )
    }
}

const styled = withStyles<CookieBannerProps>(styles)(CookieBanner)
export { styled as CookieBanner }
