import {
    FormControl,
    InputLabel,
    MenuItem,
    Select,
    WithStyles,
    withStyles
} from '@material-ui/core';
import { Consent, ConsentActionType } from '@signatu/consent';
import React from 'react';
import Highlight from 'react-highlight';

import { DataProcessingSpec } from '../components/dataProcessingSpec';
import { DemoCard, DemoProps } from './common';
import { DataProcessingSpecSelector } from './dataProcessingSpecSelector';

const styles = theme => ({
    root: {
      display: 'flex',
      flexWrap: 'nowrap' as any,
    },
    formControl: {
      margin: theme.spacing.unit,
      minWidth: 250,
      maxWidth: 500
    },
    selectEmpty: {
      marginTop: theme.spacing.unit * 2,
      minWidth: 200
    }
})
export interface DataProcessingSpecDemoState {
    specId?: string
    type: ConsentActionType
}

class DataProcessingSpecDemo extends React.Component<DemoProps & WithStyles<typeof styles>, DataProcessingSpecDemoState> {
    state: DataProcessingSpecDemoState = {
        type:  ConsentActionType.CHECKBOX
    }
    name = "Data Processing Spec"
    doc = (
    <Highlight className='hljs'>
    {`

`}
    </Highlight>
)

    render() {
        const { classes, config } = this.props;

        const demo = (
        <div>
            <DataProcessingSpecSelector config={config} onChange={event => this.setState({specId: event.target.value})}/>
            <FormControl className={classes.formControl}>
                    <InputLabel htmlFor="action-select">Action Type</InputLabel>
                <Select 
                    inputProps={{
                        id: "action-select"
                    }}
                    onChange={event => this.setState({type: event.target.value as  ConsentActionType})}
                    value={this.state.type}
                >
                    <MenuItem value={ConsentActionType.CHECKBOX}>Checkbox</MenuItem>
                    <MenuItem value={ConsentActionType.BUTTONS}>Buttons</MenuItem>
                </Select>
            </FormControl>
            <hr/>

            {this.state.specId &&  
                <DataProcessingSpec
                    config={this.props.config} 
                    subject={Consent.anonUserId()}
                    issuer="signatu.com"
                    language={this.props.language}
                    specId={this.state.specId}
                    type={this.state.type} 
                />
            }
        </div>
        )
        return <DemoCard element={demo} doc={this.doc}/>
    }
}

const styled: React.ComponentType<DemoProps> = withStyles(styles)(DataProcessingSpecDemo)
export { styled as DataProcessingSpecDemo}
