import React, { Component } from 'react';
import firebase from 'firebase';

import Modal from './components/Modal';
import Card from './components/Card';

const config = {
    apiKey: "AIzaSyDn_AeL8sGgUfxMwZ7cVWNKLYI_fSfmYRE",
    authDomain: "arczi-14a47.firebaseapp.com",
    databaseURL: "https://arczi-14a47.firebaseio.com",
    projectId: "arczi-14a47",
    storageBucket: "arczi-14a47.appspot.com",
    messagingSenderId: "951789644139"
};

const database = firebase.initializeApp(config);
const firestore = database.firestore();

const styles = {
    background: {
        'position': 'fixed',
        'width': '100%',
        'height': '100vh',
        'background': 'url("https://uc177927c710a1bcf482878a828a.previews.dropboxusercontent.com/p/thumb/AAUG0pUF8JhHEEX_m90uSqYIc-NmxTsu5kaZl6Z8Qcbn6aUQljG_F9YJz0-kQJhAZp4ZhtjD5cc8narC2oTUwTYGe4gV9Nl90lViSVgPGPLmFNsvGcwbeLfCfwuV6mEjAqOv4vE_jLk0_jpxV3A_ZfyK1KsEK2K8JsvkwSzNdOswLtcNR5bqtHQa0ULSIgSsjEjhqr9utKZ5TxvtYGMTQDHcOV8VULAcN3iY6SNugP9QaE15SkYBBrZpenGgXzcjRRetBxqZrqzyw9dKyyvonARV/p.jpeg?size=2048x1536&size_mode=3")',
        'zIndex': '-1',
        'backgroundSize': '100% 100%'
    },
    body: {
        'fontFamily': 'Roboto, sans-serif'
    },
    menu: {
        'backgroundColor': '#8e352e',
        'color': 'white',
    }
};

class App extends Component {
    state = {
        loaded: false,
        czwartek: [],
        piatek: [],
        sobota: [],
        niedziela: []
    };

    sortFunction = (a, b) => {
        if (parseInt(a.godzina_start) - parseInt(b.godzina_start)) {
            return parseInt(a.godzina_start) - parseInt(b.godzina_start);
        } else return parseInt(a.minuta_start) - parseInt(b.minuta_start)
    };

    sort = () => {
        this.setState({
            czwartek: this.state.czwartek.sort(this.sortFunction),
            piatek: this.state.piatek.sort(this.sortFunction),
            sobota: this.state.sobota.sort(this.sortFunction),
            niedziela: this.state.niedziela.sort(this.sortFunction)
        })
    };

    componentDidMount() {
        Promise.all([this.getSnapshot('czwartek'), this.getSnapshot('piatek'), this.getSnapshot('sobota'), this.getSnapshot('niedziela')])
            .then(this.sort);
    }

    getSnapshot = (day) => new Promise(resolve => {
        firestore.collection(day).get()
            .then(snapshot => {
                snapshot.forEach(doc => this.setState({
                    [day]: [...this.state[day], {
                        id: doc.id,
                        ...doc.data()
                    }]
                }));
                resolve();
            });
    });

    generateEvents = day => ( this.state[day].length > 0 &&
        this.state[day].map(el => <React.Fragment key={el.id}>
            <Card
                database={firestore}
                removeEvent={this.removeEvent}
                id={el.id}
                day={day}
                opis={el.opis}
                kolor={el.kolor}
                godzina_start={el.godzina_start}
                godzina_koniec={el.godzina_koniec}
                minuta_start={el.minuta_start}
                minuta_koniec={el.minuta_koniec}
            />
            <br/>
        </React.Fragment>)
    );

    newEvent = (day, event) => this.setState({ [day]: [...this.state[day], event] });

    removeEvent = (day, id) => this.setState({ [day]: this.state[day].filter(event => event.id !== id)});

    render() {
        return (
            <>
                <div className="background" style={styles.background}/>
                <div className={'container-fluid'} style={styles.body}>
                    <div className="row">
                        <div className="col-12 my-4 text-center">
                            <h1 style={{'color': 'white'}}>
                                ZIMOWISKO KUGLARSKIE VOL.3
                                &nbsp;
                                <Modal buttonLabel={"DODAJ"} database={firestore} newEvent={this.newEvent}/>
                            </h1>

                        </div>
                    </div>
                    <div className="row py-2" style={styles.menu}>
                        <div className="col-3 text-center">CZWARTEK</div>
                        <div className="col-3 text-center">PIĄTEK</div>
                        <div className="col-3 text-center">SOBOTA</div>
                        <div className="col-3 text-center">NIEDZIELA</div>
                    </div>
                    <div className="row mt-4" style={{'background': 'url("")'}}>
                        <div className="col-3">
                            { this.generateEvents('czwartek') }
                        </div>
                        <div className="col-3">
                            { this.generateEvents('piatek') }
                        </div>
                        <div className="col-3">
                            { this.generateEvents('sobota') }
                        </div>
                        <div className="col-3">
                            { this.generateEvents('niedziela') }
                        </div>
                    </div>
                </div>
            </>
        );
    }
}

export default App;