// Consent React Components demo
import { createTheme, ThemeProvider } from '@signatu/styles';
import React from 'react';
import ReactDOM from 'react-dom';

import { Demo as ConsentDemo } from './demo';
import { DemoConfig, DemoConfigState } from './demo/demoConfig';
import { ConsentConfig } from '@signatu/consent';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core';
import { SignatuTheme } from './demo/theme';

interface ConsentDemoWrapperState {
    config?: ConsentConfig
    language?: string
    subject?: string
}
class ConsentDemoWrapper extends React.Component<any, ConsentDemoWrapperState> {
    state: ConsentDemoWrapperState = {}
    updateConfig = (state: DemoConfigState) => {
        this.setState({...state})
    }
    render() {
        const { config, subject, language } = this.state
        const theme = createTheme({})
        return (
        <div>
            <MuiThemeProvider theme={createMuiTheme(SignatuTheme)}>
                <DemoConfig onChange={this.updateConfig} />
                <ThemeProvider theme={theme}>
                    {config && subject && language && <ConsentDemo config={config} subject={subject} language={language}/>}
                </ThemeProvider>
            </MuiThemeProvider>
        </div>
        )
    }
}

ReactDOM.render(
    <ConsentDemoWrapper />,
    document.getElementById('root')
);
