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

import { DataProcessingGroup } from '../components/dataProcessingGroup';
import { DemoCard, DemoProps } from './common';
import { ThemeProvider, createTheme } from '@signatu/styles';

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
    },
  });
  

const myTheme = createTheme({
    palette: {
        backgroundColor: "#eee"
    }
})
export interface DataProcessingGroupDemoState {
    groupId?: string
    groups: any[]
    type:  ConsentActionType
}
class DataProcessingGroupDemo extends React.Component<DemoProps & WithStyles<'root'>, DataProcessingGroupDemoState> {
    state: DataProcessingGroupDemoState = {
        groups: [], 
        type:  ConsentActionType.CHECKBOX
    }
    name = "Data Processing Group"
    doc = <Highlight className='hljs'>
    {`
        import {DataProcessingGroup} from '@signatu/consent-react';
    
        const config = {
            accessToken: "YOUR_ACCESS_TOKEN"
        }
    
        render() {
            return <DataProcessingGroup
                config={this.props.config} 
                subject={Consent.anonUserId()}
                issuer="signatu.com"
                language={this.props.language}
                groupId={this.state.groupId} >
            </DataProcessingGroup>
        }
`}
    </Highlight>

    async componentWillMount() {
        const base = this.props.config && this.props.config.dataprocessingAPI
        const endPoint = `${base}/dpgroups`

        /** Fetch the data processing */
        const response = await fetch(endPoint, {
            method: 'GET', 
            headers: {
                Authorization: `Bearer ${this.props.config.accessToken}`
            }
        })
        const groups = await response.json() || []
        this.setState({groups})
    }

    render() {
        const { classes } = this.props;
        const {groups, groupId, type} = this.state
        const demo = <div className={classes.root}>
                <FormControl className={classes.formControl}>
                    <InputLabel htmlFor="group-select">Select Data Processing Group</InputLabel>
                    <Select
                        className={classes.selectEmpty}
                        inputProps={{
                            id: 'group-select',
                        }}
                        onChange={event => this.setState({groupId: event.target.value})}
                        value={groupId || ""}>
                        {groups.map(t => <MenuItem key={t.id} value={t.id} > {`${t.name} (${t.id})`} </MenuItem>)}                    
                    </Select>
                </FormControl>
                <FormControl className={classes.formControl}>
                    <InputLabel htmlFor="action-select">Action Type</InputLabel>
                    <Select 
                        className={classes.selectEmpty}
                        inputProps={{
                            id: 'action-select',
                        }}
                        onChange={event => this.setState({type: event.target.value as ConsentActionType})}
                        value={type}>
                        <MenuItem value={ ConsentActionType.CHECKBOX } >Checkbox</MenuItem>
                        <MenuItem value={ ConsentActionType.BUTTONS } >Buttons</MenuItem>
                    </Select>
                </FormControl>
            <hr/>
            {groupId && <div>
                <DataProcessingGroup
                    config={this.props.config} 
                    subject={Consent.anonUserId()}
                    issuer="signatu.com"
                    delegate="customer_rep_id"
                    language={this.props.language}
                    groupId={groupId}
                    type={type} >
                </DataProcessingGroup>
            <Typography variant="title">Custom background</Typography>
            <ThemeProvider theme={myTheme}>                
                <DataProcessingGroup
                        config={this.props.config} 
                        subject={Consent.anonUserId()}
                        issuer="signatu.com"
                        language={this.props.language}
                        groupId={groupId}
                        type={type} >
                </DataProcessingGroup>
            </ThemeProvider>
            
            </div>}
        </div>
        return <DemoCard element={demo} doc={this.doc}/>
    }
}


const styled = withStyles(styles)(DataProcessingGroupDemo);
export { styled as DataProcessingGroupDemo}
