import React, {useState} from "react";
import axios from "axios";
import {
    Button,
    Container,
    CssBaseline,
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    Grid,
    Paper,
    TextField,
    Typography,
} from '@material-ui/core';
import {makeStyles} from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    fieldset: {
        border: 'none',
        //borderBottom: '1px solid',
    },
    form: {
        width: '100%',
        marginTop: theme.spacing(1),
        flexGrow: 1,
    },
    paper: {
        padding: theme.spacing(2),
        alignItems: 'center',
        display: 'flex',
        flexDirection: 'column',
    }
}));

const RegForm = (props) => {
    const classes = useStyles();
    return (
        <Container component="main" maxWidth="md">
            <CssBaseline />
            <Paper className={classes.paper}>
                <Typography component={"h1"} variant={"h5"}>
                    Registrer ditt event
                </Typography>
                <form className={classes.form} noValidate>
                    <fieldset className={classes.fieldset}>
                    <Grid container spacing={3}>
                        <Grid item xs={12}>
                            <TextField 
                                id={"organizer"}
                                label={"Arrangør"}
                                name={"organizer"}
                                variant={"outlined"}
                                margin={"normal"}
                                required
                                fullWidth
                                autoFocus
                            />
                        </Grid>
                        <Grid item xs={12} sm={4}>
                            <TextField 
                                id={"contact_name"}
                                label={"Kontakt person"}
                                name={"contact_name"}
                                variant={"outlined"}
                                margin={"normal"}
                                required
                                fullWidth
                            />
                        </Grid>
                        <Grid item xs={12} sm={4}>
                            <TextField
                                id={"contact_email"}
                                label={"Epostadresse"}
                                name={"contact_email"}
                                variant={"outlined"}
                                margin={"normal"}
                                type={"email"}
                                required
                                fullWidth
                            />
                        </Grid>
                        <Grid item xs={12} sm={4}>
                            <TextField
                                id={"contact_phone"}
                                label={"Telefonnummer"}
                                name={"contact_phone"}
                                variant={"outlined"}
                                margin={"normal"}
                                type={"tel"}
                                required
                                fullWidth
                            />
                        </Grid>
                    </Grid>
                    </fieldset>
                    <fieldset className={classes.fieldset}>
                        <legend>Arrangement</legend>
                        <Grid container spacing={3}>
                            <Grid item xs={12} sm={8}>
                                <TextField
                                    id={"event_name"}
                                    label={"Navn på arrangement"}
                                    name={"event_name"}
                                    variant={"outlined"}
                                    margin={"normal"}
                                    required
                                    fullWidth
                                />
                            </Grid>
                            <Grid item xs={12} sm={4}>
                                <TextField
                                    id={"event_capacity"}
                                    label={"Kapasitet"}
                                    name={"event_capacity"}
                                    variant={"outlined"}
                                    margin={"normal"}
                                    type={"number"}
                                    required
                                    fullWidth
                                />
                            </Grid>
                            <Grid item xs={12} sm={6}>
                                <Categories cid={"5ed0f77a42f75848a95ebf03"} />
                            </Grid>
                            <Grid item xs={12} sm={6}>
                            </Grid>
                        </Grid>
                    </fieldset>
                </form>
            </Paper>
        </Container>
    )
}

const Categories = (props) => {
    const [error, setError] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const [availableItems, setAvailableItems] = useState([]);

    React.useEffect(() => {
        axios.get("https://magy.giaever.online/tff/api/webflow_items?cid=" + props.cid)
            .then((response) => {
                const data = response.data['hydra:member'];
                setAvailableItems(data);
            })
            .catch((error) => {
                console.log(error);
                setError(error);
            })
            .then(() => {
                console.log("DONE");
                setIsLoading(false);
            });
    }, []);

    return (
        <DialogCancelOk
            buttonDesc={isLoading ? "Laster kategorier" : "Velg kategori"}
            buttonDisabled={isLoading}
            dialogTitle={"Velg kategori(er)"}
        >
            {isLoading ? 
                <p>Laster...</p>
                :
                <ul>{availableItems.map(item => <li key={item.id}>{item.name}</li>)}</ul>
            }
        </DialogCancelOk>
    )
}

const DialogCancelOk = (props) => {
    const [open, setOpen] = useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClickClose = () => {
        setOpen(false);
    };

    return (
        <div>
            <Button 
                fullWidth
                disabled={props.buttonDisabled}
                color={"secondary"}
                variant={"outlined"}
                onClick={handleClickOpen}>
                    {props.buttonDesc}
            </Button>
            <Dialog 
                disableBackdropClick
                disableEscapeKeyDown
                open={open}
                onClose={handleClickClose}
            >
                <DialogTitle>{props.dialogTitle}</DialogTitle>
                <DialogContent>
                    {props.children}
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClickClose} color={"primary"}>
                        Avbryt
                    </Button>
                    <Button onClick={handleClickClose} color={"primary"}>
                        Ferdig
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    )
}

export default RegForm;