import { Theme, WithStyles, withStyles } from '@signatu/styles';
import { ConsentActionType, ConsentEvent } from '@signatu/consent';
import PropTypes from 'prop-types';
import React from 'react';

import { CONSENT_BASE_PROPTYPES, ConsentProps } from '../lib/consentBase';
import { ConsentStatus } from '../lib/consentStatus';
import { ConsentTitle } from '../lib/consentTitle';
import { ConsentAction } from './consentAction';

export interface ConsentRequestState {
    consent?: ConsentEvent
}

export interface ConsentRequestProps extends ConsentProps {
    /** Just use the base props */
    type?: ConsentActionType

    acceptText?: string
    refuseText?: string
}

const styles = (theme: Theme) => ({
    root: {
        fontFamily: theme.typography.fontFamily, 
        fontWeight: theme.typography.fontWeight, 
        fontSize: theme.typography.fontSize, 
        padding: theme.spacing.unit * 2,
        backgroundColor: theme.palette.backgroundColor, 
        borderColor: theme.palette.borderColor, 
        borderRadius: theme.spacing.unit / 2
    }
})

class ConsentRequest extends React.Component<ConsentRequestProps & WithStyles, ConsentRequestState> {
    /** PropTypes for non-Typescript environments */
    static propTypes = {
        ...CONSENT_BASE_PROPTYPES, 
        type: PropTypes.string as PropTypes.Validator<ConsentActionType | undefined>, 
        acceptText: PropTypes.string as PropTypes.Validator<string | undefined>, 
        refuseText: PropTypes.string as PropTypes.Validator<string | undefined>, 
        classes: PropTypes.any
    }
    
    checkboxId = "checkbox-" + Math.random().toString(16).slice(2)
    componentIsMounted = false

    constructor(props) {
        super(props)
        this.state = { }
    }

    componentDidMount() {
        this.componentIsMounted = true
    }

    componentWillUnmount() {
        this.componentIsMounted = false
    }

    onAction = (consent: ConsentEvent) => {
        const { onAction } = this.props
        if (this.componentIsMounted) {
            this.setState({consent})
            if ( onAction ) {
                onAction(consent)    
            }
        }
    }
    onLoaded = (consent: ConsentEvent) => {
        if (this.componentIsMounted) {
            const { onLoaded } = this.props
            this.setState({consent})
            if ( onLoaded ) {
                onLoaded(consent)
            } 
        }
    }

    render() {
        const type = this.props.type || ConsentActionType.CHECKBOX
        const { classes, title, subtitle, config, subject, issuer, target, delegate, scope, language, acceptText, refuseText } = this.props
        if ( ! config ) {
            return null
        }
        return (
        <div className={classes.root} data-type="ConsentRequest">
            <ConsentTitle
                title={title}
                subtitle={subtitle}
            />
            
            <ConsentAction
                id={this.checkboxId}
                config={config}
                subject={subject}
                issuer={issuer}
                target={target}
                scope={scope}
                delegate={delegate}
                language={language}
                acceptText={acceptText}
                refuseText={refuseText}
                
                type={type}
                onAction={this.onAction}
                onLoaded={this.onLoaded}
            >
                {this.props.text}
                {this.props.children}
            </ConsentAction>                
            <ConsentStatus consent={this.state.consent} language={this.props.language || 'en'} type={type}/>
        </div>
        )
    }
}

const styled = withStyles<ConsentRequestProps>(styles)(ConsentRequest)
export { styled as ConsentRequest }
