constructor(props) {

super(props)

this.root = React.createRef()

this.state = {

current: 'input',

options: {},

input: '',

fullscreen: false,

}

}

render() {

const {state} = this

const {options, input, current, fullscreen, transform} = state

const onOptions = (options) => {

this.setState({options: options})

}

const content = (

<div css={styles.fullscreen}>

<Tabs

current={current}

onTab={current => this.setState({current: current})}

onFullscreen={() => this.setState({fullscreen: !this.state.fullscreen})}

/>

{current === 'options' && <Options

css={styles.content}

fullscreen={fullscreen}

options={options}

onOptions={(options) => onOptions(options)} />}

{current === 'input' && <Input

css={styles.content}

fullscreen={fullscreen}

input={input}

onInput={input => this.setState({input: input})} />}

{current === 'transform' && <Transform

css={styles.content}

fullscreen={fullscreen}

transform={transform}

onTransform={transform => this.setState({transform: transform})} />}

{current === 'output' && <Output

css={styles.content}

fullscreen={fullscreen}

options={options}

input={input}

transform={transform} />}

</div>

)

return (

<div ref={this.root}>

{ fullscreen ? (

<Modal

isOpen={fullscreen}

appElement={this.root.current}

shouldCloseOnOverlayClick={true}

shouldCloseOnEsc={true}

onRequestClose={e => this.setState({fullscreen: false})}

className={css([

styles.modal,

])}

overlayClassName={css([

styles.overlay,

])}

>

{content}

</Modal>

) : (

<>{content}</>

)}

</div>

)

}