/**
 * Select Signatu API and credentials for the demos
 */
import { TextField, Select, MenuItem, Button, Theme, createStyles, WithStyles, withStyles } from '@material-ui/core';
import { ConsentConfig, Consent, SUPPORTED_LANGUAGES } from '@signatu/consent';
import React from 'react';
import { Language } from '@signatu/common-lib';

const LS_CONSENT_CONFIG = "signatu.consentdemo.config"

export interface DemoConfigProps {
    onChange?(state: DemoConfigState)
}

export interface DemoConfigState {
    config: ConsentConfig
    subject: string
    language: string
}

const styles = (theme: Theme) => createStyles({
    root: {
        display: "flex", alignItems: "baseline", justifyContent: "space-between"
    }
})

class DemoConfig extends React.Component<DemoConfigProps & WithStyles<typeof styles>, DemoConfigState> {
    constructor(props) {
        super(props)
        
        const lsConfig = localStorage.getItem(LS_CONSENT_CONFIG)
        this.state = {
            config: lsConfig ? JSON.parse(lsConfig) : {
                dataprocessingAPI: "https://api.signatu.com/dataprocessing/v0", 
                consentAPI: "https://api.signatu.com/consent/v0", 
                policyAPI: "https://api-server.production.signatu.com/api/v0"
            }, 
            language: 'en', 
            subject: Consent.anonSubject()
        }
        this.props.onChange && this.props.onChange(this.state)
    }

    updateConfig = () => {
        localStorage.setItem(LS_CONSENT_CONFIG, JSON.stringify(this.state.config))
        this.props.onChange && this.props.onChange(this.state)
    }
    changeLanguage = (event: any) => {
        this.setState({language: event.target.value}, this.updateConfig)
    }

    render() {
        const { classes } = this.props
        return <React.Fragment>
            <div className={classes.root} >
                    <TextField 
                        style={{flex: 1}}
                        label="Consent API"
                        value={this.state.config.consentAPI}
                        onChange={event => this.setState({
                             config: {
                                 ...this.state.config, 
                                 consentAPI: event.target.value
                             }
                         })}
                         onBlur={this.updateConfig}
                        >
                    </TextField>
                    <TextField 
                        style={{flex: 1}}
                        label="DataProcessing API"
                        value={this.state.config.dataprocessingAPI}
                        onChange={event => this.setState({
                             config: {
                                 ...this.state.config, 
                                 dataprocessingAPI: event.target.value
                             }
                         })}
                         onBlur={this.updateConfig}
                        >
                    </TextField>
                    <TextField 
                        style={{flex: 1}}
                        type="password"
                        label="AccessToken"
                        value={this.state.config.accessToken}
                        onChange={event => this.setState({
                             config: {
                                 ...this.state.config, 
                                 accessToken: event.target.value
                             }
                         })}
                         onBlur={this.updateConfig}
                        >
                    </TextField>
                    <TextField 
                        style={{flex: 1}}
                        label="API Key"
                        type="password"
                        value={this.state.config.apiKey}
                        onChange={event => this.setState({
                             config: {
                                 ...this.state.config, 
                                 apiKey: event.target.value
                             }
                         })}
                         onBlur={this.updateConfig}
                        >
                    </TextField>
                </div>
                <br/>
                <div style={{display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
                    <Select
                            onChange={this.changeLanguage} 
                            value={this.state.language}>
                            {SUPPORTED_LANGUAGES.map(l => {
                                const lang = new Language(l)
                                return <MenuItem key={lang.isoLanguage} value={lang.isoLanguage} >{lang.name}</MenuItem>
                            })}
                    </Select>
                    <Button variant="outlined" onClick={() => {
                        Consent.clearAnonSubject()
                        this.setState({subject: Consent.anonSubject()}, this.updateConfig)
                    }}>New Subject ID</Button>
                    <div><b>Subject ID:</b> {this.state.subject}</div>
                </div>

            </React.Fragment>
                
    }
}

const styled: React.ComponentType<DemoConfigProps> = withStyles(styles)(DemoConfig) as any
export { styled as DemoConfig }
