import React, {useContext, useEffect, useState} from "react";
import {
    Box, 
    Heading, 
    VStack, 
    FormControl,
    Button,
    Center, 
    Select, CheckIcon, ScrollView
  } from "native-base";
import { UserContext } from "../context/UserContext";
import { API } from "../environment/api";
import {TimePicker} from 'react-native-simple-time-picker';
import { View, StyleSheet } from "react-native";
export default function AreaComun({navigation}){

  const { user } = useContext(UserContext)
  const [service, setService] = useState("");
  const [areas, setAreas] = useState([])
  const [isRequesting, setIsRequesting] = useState(false);

  const [selectedHours, setSelectedHours] = useState(0);
  const [selectedMinutes, setSelectedMinutes] = useState(0);

  const [endSelectedHours, setEndSelectedHours] = useState(0);
  const [endSelectedMinutes, setEndSelectedMinutes] = useState(0);

    useEffect(() => {

      const onRequestReservasData = async () => {
        setIsRequesting(true);
  
        try {
          const jsonResponse = await fetch(`${API.BASE_URL}/commonArea/allCommonAreas`, {
            method: "GET",
            headers: {
              'Content-Type': 'application/json'
            }
          })
  
          const response = await jsonResponse.json();
          console.log(response.message);
  
          setAreas(response.message);
  

  
        } catch (error) {
            console.log("ERROR:" + error);
        }
  
        setIsRequesting(false)
      }
  
      onRequestReservasData()


    }, [user])
    

   

    return (
        <Center>
             <Box safeArea p="2" w="90%" maxW="290" py="8">
        <Heading size="lg" color="coolGray.800" _dark={{
        color: "warmGray.50"
      }} fontWeight="semibold">
          Katoikia
        </Heading>
        <Heading mt="1" color="coolGray.600" _dark={{
        color: "warmGray.200"
      }} fontWeight="medium" size="xs">
         Reserve su área común 
        </Heading>
        <ScrollView showsVerticalScrollIndicator={false}> 
        <VStack space={3} mt="5">
        <FormControl isRequired>
            <FormControl.Label>Área común</FormControl.Label>
            <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Elija su área común" _selectedItem={{
        bg: "teal.600",
        endIcon: <CheckIcon size="5" />
      }} mt={1} onValueChange={itemValue => setService(itemValue)}>

        {areas.map(item => (
          <Select.Item label={item.name} value={item.name} />
        ))}
          
        </Select>
          </FormControl>
          <FormControl isRequired>
            <FormControl.Label>Hora de inicio</FormControl.Label>
            <View height="80" >
            <TimePicker 
          selectedHours={selectedHours}
          selectedMinutes={selectedMinutes}
          onChange={(hours, minutes) => {
            setSelectedHours(hours);
            setSelectedMinutes(minutes);
          }}/>
            </View>
          </FormControl>
          <FormControl isRequired>
            <FormControl.Label>Hora de finalización</FormControl.Label>
            <View height="80" >
            <TimePicker 
          selectedHours={selectedHours}
          //initial Hourse value
          selectedMinutes={selectedMinutes}
          //initial Minutes value
          onChange={(hours, minutes) => {
            setEndSelectedHours(hours);
            setEndSelectedMinutes(minutes);
          }}/>
            </View>
           
          </FormControl>
         
        
          <Button mt="2" backgroundColor="tertiary.600">
            Reservar
          </Button>
          <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Comunicados')}>
            Cancelar
          </Button>
        </VStack>

        </ScrollView>
      </Box>
        </Center>
       
    )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    justifyContent: 'center',
    alignItems: 'center',
    height: 40
  }
});