import React from 'react';
import { StyleSheet, View, Text, Button, Image, TextInput, Dimensions, ScrollView, FlatList, SafeAreaView, Alert } from 'react-native';
import { Dropdown } from 'react-native-material-dropdown';

let periods = [
    {
        value: 'everyday',
        label: 'Каждый день'
    },
    {
        value: 'twodays',
        label: 'Каждые два дня'
    },
    {
        value: 'threedays',
        label: 'Каждые три дня'
    },
    {
        value: 'nomatter',
        label: 'Не имеет значения'
    }]

let usageTime = [
    {
        id: '1',
        hours: '11',
        minutes: '00'
    },
    {
        id: '2',
        hours: '13',
        minutes: '00'
    },
    {
        id: '3',
        hours: '15',
        minutes: '00'
    },
    {
        id: '4',
        hours: '17',
        minutes: '00'
    },
    {
        id: '5',
        hours: '19',
        minutes: '00'
    },
    {
        id: '6',
        hours: '21',
        minutes: '00'
    },
    {
        id: '7',
        hours: '23',
        minutes: '00'
    },
    {
        id: '8',
        hours: '01',
        minutes: '00'
    },
]

let types = [
    {
        value: 'tablet',
        label: 'Таблетки'
    },
    {
        value: 'drops',
        label: 'Сиропы'
    },
    {
        value: 'other',
        label: 'Другое'
    }
]

/**
 * Profile screen
 */
export default class Profile extends React.Component {

    constructor(props) {
        super(props);
        this.createUsageTime = this.createUsageTime.bind(this);
        this.state = {
            usageTime
        }
    }

    createUsageTime({ title, id }) {
        return (
            <View>
                <Text
                    style={styles.usageTimeItem}
                    onPress={() => {
                        Alert.alert(id)
                        for (let i = 0; i < usageTime.length; i++) {
                            if (usageTime[i].id == id) {
                                usageTime.splice(i, 1);
                            }
                        }
                    }}
                >{title}
                </Text>
            </View>
        )
    }

    static navigationOptions = ({ navigation }) => {
        return {
            title: navigation.getParam('title'),
        };
    };

    render() {

        const { navigate, state } = this.props.navigation;
        // width = Dimensions.get('window').width;
        // height = Dimensions.get('window').height;

        return (

            <ScrollView style={styles.container}>

                <View style={styles.form}>

                    {/* Название препарата */}
                    <View style={styles.input}>
                        <Image style={{width: 30, height: 30, marginRight: 10,}} source={{uri: 'https://img.icons8.com/material/4ac144/256/user-male.png'}} />
                        <TextInput style={styles.inputText}>Введите название препарата</TextInput>
                    </View>

                    {/* Периодичность приема */}
                    <Dropdown
                        label="Периодичность приема"
                        data={periods}
                        value='everyday'
                        containerStyle={styles.dropdown}
                    />

                    {/* Время приема */}
                    <View style={styles.usageTimeMainContainer}>
                        {/* Добавить время */}
                        <View style={styles.usageTimeInputContainer}>
                            <Text style={styles.inputText}>Время приема</Text>
                            <Button
                                title="Добавить"
                                onPress={() => navigate('Home')} // ДОБАВИТЬ ФУНКЦИЮ
                            />
                        </View>
                        {/* Список таймкодов */}
                        <SafeAreaView style={{flex: 1}}>
                            <FlatList
                                data={usageTime}
                                renderItem={({ item }) => <this.createUsageTime
                                    title={`${item.hours}:${item.minutes}`}
                                    id={item.id}
                                />}
                                keyExtractor={item => item.id}
                                horizontal={true}
                                style={{paddingHorizontal: 20}}
                            />
                        </SafeAreaView>
                    </View>

                    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end',marginHorizontal: 20, marginVertical: 20}}>
                        <Dropdown
                            data={types}
                            label="Тип препарата"
                            value='tablet'
                            containerStyle={{width: '50%', height: 50, flex: 1, justifyContent: 'center'}}
                        />
                        <TextInput style={styles.doseTextInput}>Дозировка</TextInput>
                    </View>

                </View>

                {/* Кнопка сохранения данной заметки */}
                <Button
                    title="Добавить"
                    onPress={() => Alert.alert('Успешно', 'Добавлено')} // НУЖНО ДОБАВИТЬ ФУНКЦИЮ НА КНОПКУ
                />

            </ScrollView>
        );

    }

}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff'
    },
    form: {

    },
    input: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 20,
        paddingVertical: 20,
        borderBottomWidth: 1,
        borderBottomColor: '#E2E2E2',
        width: Dimensions.get('window').width,
    },

    usageTimeMainContainer: {
        flexWrap: 'wrap',
        borderBottomWidth: 1,
        borderBottomColor: '#E2E2E2',
    },
    usageTimeInputContainer: {
        flexDirection: 'row',
        paddingHorizontal: 20,
        paddingVertical: 20,
        alignItems: 'center',
        width: Dimensions.get('window').width,
        justifyContent: 'space-between'
    },
    usageTimeItem: {
        backgroundColor: '#fff',
        paddingHorizontal: 20,
        paddingVertical: 10,
        borderRadius: 18,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 1,
        },
        shadowOpacity: 0.22,
        shadowRadius: 2.22,

        elevation: 3,
        marginRight: 20,
        marginBottom: 20
    },
    doseTextInput: {
        width: '50%',
        height: 40,
        flex: 1,
        justifyContent: 'center',
        paddingHorizontal: 20,
        borderBottomWidth: 1,
        marginLeft: 20,
        paddingLeft: 0,
        fontSize: 15,
        borderColor: 'rgb(225, 225, 225)'
    },

    dropdown: {
        paddingHorizontal: 20,
        paddingVertical: 10,
        paddingBottom: 20,
        borderBottomWidth: 1,
        borderBottomColor: '#E2E2E2',
    },
    inputText: {
        fontSize: 18,
        color: '#000'
    }
});