import React from 'react'
import {ConsentConfig, ConsentEvent} from '@signatu/consent'
import {Tabs, Tab } from '@material-ui/core';
import { WithStyles, withStyles, Theme } from '@signatu/styles';

export interface DemoProps {
    config: ConsentConfig
    subject: string
    language: string

    /** How to remove this? */
    classes?: any /** CSS */
}

export interface DemoState {
    consent?: ConsentEvent
}

export interface DemoCardProps {
    element: React.ReactElement<any>
    doc: React.ReactElement<any>
}

export interface DemoCardState {
    selectedTab: number
}

export const consentContent: any = {
    'no': <div>ACME Inc. kan sende meg ukentlige personaliserte e-poster med det formål å tilby meg produkter og tjenester.</div>, 
    'en': <div>ACME Inc. can send me weekly personalized emails for the purpose of offering me relevant products and services.</div>
}

const styles = (theme: Theme) => ({
    root: {
        fontFamily: theme.typography.fontFamily, 
        fontSize: theme.typography.fontSize, 
        fontWeight: theme.typography.fontWeight
    }
})
class DemoCard extends React.Component<DemoCardProps & WithStyles, DemoCardState> {
    constructor(props) {
        super(props)
        this.state = {
            selectedTab: 0
        }
    }
    render() {
        const { selectedTab } = this.state
        const { element, doc, classes } = this.props
        return <div className={classes.root}>
                <Tabs value={selectedTab} onChange={(event, value) => this.setState({selectedTab: value})}>
                    <Tab label="Demo"/>
                    <Tab label="Code"/>
                </Tabs> 
                <div style={{marginTop: "4em"}}>
                    {selectedTab === 0 && element}
                    {selectedTab === 1 && doc}
                </div>
            </div>
    }
}

const styled = withStyles<DemoCardProps>(styles)(DemoCard)
export { styled as DemoCard }

