'use strict';

import React from 'react';
import ReactNative from 'react-native';
import CalendarModeSelector from './CalendarModeSelector';
import Calendar from './Calendar';

const {
    Component,
} = React;

const {
    StyleSheet,
    TouchableOpacity,
    View,
    Text,
    Dimensions,
} = ReactNative;

export default class CalendarPicker extends Component {

    constructor(props) {
        super(props);

        this.state = {
            selectMode: this.props.selectMode,
        };

        this.onSelect = this.onSelect.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onOK = this.onOK.bind(this);
    }

    onSelect(selectMode) {
        this.setState({
            selectMode
        });
    }

    onCancel() {
        this.props.onCancel && this.props.onCancel();
    }

    onOK(selected) {
        this.props.onOK && this.props.onOK(selected);
    }

    render() {

        return (
            <View style={styles.container}>
                {this.props.calendarModes && this.props.calendarModes.length > 1
                        ? <CalendarModeSelector
                            calendarModes={this.props.calendarModes}
                            selectMode={this.state.selectMode}
                            onSelect={this.onSelect}
                        /> : null}

                <Calendar
                    startFromMonday={true}
                    selectMode={this.state.selectMode}
                    selected={this.props.selected}
                    onCancel={this.onCancel}
                    onOK={this.onOK}
                />
                <View style={{height: 1000}} />
            </View>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        top: 45,
        left: 0,
        right: 0,
        backgroundColor: '#A8A8A8',
        opacity: 0.95,
    },
    calendarContainer: {

    },
});