import React, { useState } from 'react'
import { View, Text, StyleSheet, Button } from 'react-native'
import { Ionicons } from '@expo/vector-icons'
import { THEME } from '../theme'
import {
    Collapse,
    CollapseHeader,
    CollapseBody,
    AccordionList
} from 'accordion-collapse-react-native'
import { DATES_TIMES } from '../datetimes'

export const DateTimeScreen = ({ navigation, route }) => {
    const { selectedDate } = route.params
    const { fullDate } = route.params

    function Header({ title }) {
        return (
            <CollapseHeader style={styles.headerCol}>
                <Text style={styles.headerColTextAct}>{title}</Text>
            </CollapseHeader>
        )
    }

    function Body({ data }) {
        const times = []

        for (const [index, value] of data.entries()) {
            times.push(
                <View key={index} style={styles.datePickItem}>
                    <Button
                        title={value}
                        color={THEME.MAIN_COLOR}
                        onPress={() => console.log(selectedDate + '-' + value)}
                    />
                    <Ionicons
                        name='md-arrow-dropright'
                        size={28}
                        color={THEME.MAIN_COLOR}
                        style={styles.dateIcon}
                    />
                </View>
            )
        }

        return (
            <CollapseBody>
                <View style={styles.datePicks}>{times}</View>
            </CollapseBody>
        )
    }

    return (
        <View>
            <AccordionList
                list={DATES_TIMES}
                keyExtractor={(data, index) => data + index}
                header={Header}
                body={Body}
                expandedIndex={0}
            />
            <Button
                title='Выбрать другую дату'
                onPress={() => navigation.navigate('Онлайн запись', { selectedDate })}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    center: {
        /* flex: 1,
        justifyContent: 'center',
        alignItems: 'center' */
    },
    datePicks: {
        flexDirection: 'row',
        justifyContent: 'space-between'
        /* flex: 1,
        ,
        ,
        justifyContent: 'flex-start',
        padding: 0,

        fontSize: 14,

        width: 80,
        height: 30 */
    },
    datePickItem: {
        flexDirection: 'row',
        backgroundColor: '#fff',
        padding: 2,
        paddingRight: 10,
        borderWidth: 1,
        borderColor: THEME.PINK_COLOR,
        borderRadius: 4,
        margin: 4,
        width: 84
    },
    dateIcon: { paddingTop: 5 },
    headerCol: {
        backgroundColor: '#fff'
    },
    headerColText: {
        padding: 14,
        fontFamily: 'rale-light'
    },
    headerColTextAct: {
        padding: 14,
        fontFamily: 'rale-bold',
        fontSize: 16
    }
})