import React, { Component, Fragment } from 'react'
import { connect } from "react-redux";
import { withStyles } from '@material-ui/core/styles';
import Layout from '../components/templates/Layout';
import { TextField, Button, Typography } from '@material-ui/core';
import Switch from '@material-ui/core/Switch';
import _ from "lodash"
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Snackbar from '@material-ui/core/Snackbar';
import SnackbarContent from '@material-ui/core/SnackbarContent';
import WebPush from '../components/atoms/Webpush';
import { payloadFromSubscription } from '../components/atoms/Utility';
import { fetchUserSubscriptionToPushRequest } from '../actions/user'
import Head from 'next/head'

///
/// ! Push notification needs the service worker to be used 
///

const styles = theme => ({
    container: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: theme.spacing(2),
        [theme.breakpoints.up('sm')]: {
            margin: 'auto',
            padding: '0 calc(25vw + 24px)',
            paddingBottom: theme.spacing(5),
        },
        '& div': {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
        }
    },
    title: {
        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
        fontSize: '1.5em',
        fontWeight: '600',
        padding: theme.spacing(3, 0),
        [theme.breakpoints.up('sm')]: {
            paddingTop: theme.spacing(6),
        },
    },
    label: {
        fontFamily: 'Roboto',
        fontSize: '1em',
        fontWeight: '300',
        '& span': {
            fontWeight: '500',
        },
    },
    switch: {
        marginBottom: theme.spacing(2),
        marginLeft: 'auto',
        marginRight: 'auto',
    },
})

// //TODO: put in config
// const applicationServerPublicKey = 'BNFyiyPiLH97Dgc0m1vXluUNaCN6y3Hkgd4YcqS2lVkP8my3tq2D5gM5g7cY6R4VxC7GljSzkLRu+k+oO+2TtjU=';

class Parametres extends Component {

    state = {
        isSafari: false,
        general: false,
        openSnack: false,
        error: null,
        subscriveUserEnabled: false,
        subscription: { endpoint: '' },
    }
    componentDidMount() { 
          this.props.fetchUserSubscriptionToPushRequest();
      }

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

    handleChange = () => {

    }

    onWebPushToggle = () => {
        this.setState({
            subscriveUserEnabled: !this.state.subscriveUserEnabled,
        })
    }

    onUpdateSubscriptionOnServer = (subscription) => {
        var payload = payloadFromSubscription(subscription)
        this.setState({ subscription: subscription })

        this.props.subscribeUserToPushRequest(payload);
    }

    onSubscriptionFailed = (error) => {
        console.error("onSubscriptionFailed:", error)
    }

    render() {
        const { classes } = this.props;

        return (
            <Layout>
                <div className={classes.container}>
                    <Typography
                        className={classes.title}
                        paragraph={true}
                        align="center"
                    >
                        Paramètres
                    </Typography>
                    <div >
                        <WebPush.Consumer>
                            {({ on, toggleSubscription }) => (
                                <Fragment>
                                    <Typography
                                        className={classes.label}
                                        paragraph={true}
                                    >
                                        Recevoir des notifications : <span>{on ? 'oui' : 'non'}</span>
                                    </Typography>
                                    <Switch
                                        label="Authoriser les notifications"
                                        color="primary"
                                        className={classes.switch}
                                        onChange={() => toggleSubscription()}
                                        checked={on}
                                    />
                                </Fragment>
                            )}
                        </WebPush.Consumer>
                    </div>
                </div>
            </Layout>
        )
    }
}

function mapStateToProps(state) {

    return {
        isUserSubscribedToPush: state.isUserSubscribedToPush
    };
}

export default withStyles(styles)(connect(mapStateToProps, {fetchUserSubscriptionToPushRequest})(Parametres));

