import React from 'react';
import { View, StyleSheet } from 'react-native';
import { HEADER_HEIGHT, STATUSBAR_HEIGHT, ICON_SIZE_LARGE } from '../../../utils/Sizes';
import { LEFT_ARROW, RIGHT_ARROW, CALENDAR } from '../../../utils/Icons';
import { LIGHT_BLUE } from '../../../utils/Colors';
import LeftArrowWithText from '../../UI/LeftArrowWithText/LeftArrowWithText';
import RightArrowWithText from '../../UI/RightArrowWithText/RightArrowWithText';
import CalendarModal from '../../Modals/CalendarModal/CalendarModal';
import CalendarIcon from '../../UI/CalendarIcon/CalendarIcon';
import Icon from 'react-native-vector-icons/FontAwesome';


export default class RangeHeader extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            calendarVisible: false,
            icons: []
        }
    }

    componentDidMount() {
        Promise.all([
            Icon.getImageSource(LEFT_ARROW, ICON_SIZE_LARGE, 'white'),
            Icon.getImageSource(RIGHT_ARROW, ICON_SIZE_LARGE, 'white'),
            Icon.getImageSource(CALENDAR, ICON_SIZE_LARGE, 'white')
        ]).then(sources => {
            this.setState(() => ({
                icons: sources
            }));
        });
    }

    toggleModal = () => {
        this.setState(prevState => ({
            calendarVisible: !prevState.calendarVisible
        }));
    }

    render() {
        return (
            <View
                style={styles.container}
            {   ...this.props}
            >
                <CalendarModal
                    minDate={this.props.dates.minDate}
                    selectedDate={this.props.dates.selectedDate}
                    toggleModal={this.toggleModal}
                    visible={this.state.calendarVisible}
                    dateSelected={this.props.onCalendarDateSelected}
                />

                <View style={styles.datesContainer}>
                <LeftArrowWithText
                    date={this.props.dates.fromDate}
                    onPress={this.props.onPrevWeekPressed}
                    icon={this.state.icons[0]}
                />
                <RightArrowWithText
                    date={this.props.dates.toDate}
                    onPress={this.props.onNextWeekPressed}
                    icon={this.state.icons[1]}
                />
                </View>
                <CalendarIcon
                    icon={this.state.icons[2]}
                    toggleModal={this.toggleModal}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        height: HEADER_HEIGHT(),
        backgroundColor: LIGHT_BLUE,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        paddingTop: STATUSBAR_HEIGHT,
        paddingHorizontal: 16,
        width:'100%'
    },
    datesContainer: {
        alignItems: 'center',
        flexDirection: 'row',
    }
});