import React, { Component, Fragment } from 'react'
import withStyles from '@material-ui/core/styles/withStyles';
import { Text } from '@vx/text';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import PropTypes from 'prop-types';
import getConfig from 'next/config'

const {publicRuntimeConfig} = getConfig()
const styles = theme => ({
    title: {
        position: 'relative',
    }, formControl: {
        margin: theme.spacing.unit,
        minWidth: 120,
    },
    selectEmpty: {
        marginTop: theme.spacing.unit * 2,
    },
})

class PushTargetForm extends Component {
    state = {
        open: false
    }

    handleChangeSelect = event => {
        this.props.onSelectedTopic(event.target.value);
    };

    handleClose = () => {
        this.setState({ open: false });
    };

    handleOpen = () => {
        this.setState({ open: true });
    };

    handleChange = event => {

        this.setState({ open: event.target.value === 'c' && this.props.topic === '' });

        this.props.onSelectedTarget(event.target.value);
    };
    render() {
        const { classes } = this.props;
        const topics = publicRuntimeConfig.push.topics
        return (
            <Fragment>
                <Typography variant="h6" gutterBottom>
                    <p>Choisir une cible</p>
                </Typography>
                <Grid container spacing={24}>
                    <Grid item xs={12} md={12}>
                        <FormControl component="fieldset">
                            <FormLabel component="legend">Cible</FormLabel>
                            <RadioGroup
                                aria-label="position"
                                name="position"

                                onChange={this.handleChange}
                                row
                            >
                                <FormControlLabel
                                    value="top"
                                    control={<Radio
                                        checked={this.props.target === 'a'}
                                        onChange={this.handleChange}
                                        value="a"
                                        name="radio-button-demo"
                                        aria-label="A"

                                    />}
                                    label="A moi"
                                    labelPlacement="start"
                                />
                                <FormControlLabel
                                    value="start"
                                    control={<Radio
                                        checked={this.props.target === 'b'}
                                        onChange={this.handleChange}
                                        value="b"
                                        name="radio-button-demo"
                                        aria-label="B"

                                    />}
                                    label="A tous les inscrits"
                                    labelPlacement="start"
                                />
                                <FormControlLabel
                                    value="start"
                                    control={<Radio
                                        checked={this.props.target === 'c'}
                                        onChange={this.handleChange}
                                        value="c"
                                        name="radio-button-demo"
                                        aria-label="C"

                                    />}
                                    label="Par sujet"
                                    labelPlacement="start"
                                />
                                <FormControl className={classes.formControl} disabled={!(this.props.target === 'c')}>
                                    <InputLabel htmlFor="demo-controlled-open-select">Sujet</InputLabel>
                                    <Select
                                        open={this.state.open}
                                        onClose={this.handleClose}
                                        onOpen={this.handleOpen}
                                        value={this.props.topic}
                                        onChange={this.handleChangeSelect}

                                    >
                                    {topics.map((item)=> {return <MenuItem value={item.key}>{item.key}</MenuItem>})}
                                    </Select>
                                </FormControl>
                            </RadioGroup>
                        </FormControl>
                    </Grid>

                </Grid>
            </Fragment>
        )
    }
}
PushTargetForm.propTypes = {
    onSelectedTarget: PropTypes.func.isRequired,
    onSelectedTopic: PropTypes.func.isRequired,
    target: PropTypes.string.isRequired,
    topic: PropTypes.string.isRequired

}
export default withStyles(styles)(PushTargetForm);