import React, { Component, useCallback, useState, useEffect} from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Modal, Button } from 'react-native';
import Header from '../shared/header';
import Calendar from 'react-native-calendars/src/calendar';
import { Agenda, calendarTheme } from 'react-native-calendars';
import { Ionicons } from '@expo/vector-icons';
import { ProgressBar, MD3Colors } from 'react-native-paper';

const userslist = 'https://ada.uprrp.edu/~pablo.puig1/TPMG/userslist.php'
const eventlist = 'https://ada.uprrp.edu/~pablo.puig1/TPMG/eventslist.php'

export default function Calendario({ navigation }) {

  const [eventos, setEventos] = useState({});

  useEffect(() => {
    fetch(eventlist)
      .then(response => response.json())
      .then(dat => setEventos(dat))
      .catch(error => console.error(error))
  }, []);

  const formattedEvents = Object.keys(eventos).reduce((result, key) => {
    const item = eventos[key];
    const date = item.startDate;
    if (result[date]){ result[date].push(item);}
    else{result[date] = [item];}
    return result;
  }, {});

  function renderItem(item) {
    console.log('item.activityDescription: ', item.activityDescription)
    return (
      <View>
          <View style={[styles.item, { height: item.height }]}>
            <View>
              <Text style = {[styles.activity_name]}> {item.activityName}</Text>
              <Text style = {[styles.time]}> 10:00AM-2:00PM</Text>
              <Text style = {[styles.activity_description]}> {item.activityDescription}</Text>
            </View>
            {/* <TouchableOpacity onPress={() => onButtonClick(item)}> */}
            <TouchableOpacity onPress={() => alert("Te has subcrito a la actividad!")}>
                <Ionicons name={item.icon} />
            </TouchableOpacity>
          </View>
          <ProgressBar progress={(item.totalSubscribed / item.maxSubscribed)} color={item.totalSubscribed != item.maxSubscribed ? '#1AA7EC' : '#00AB41'} style={styles.progress} />
      </View>

    );
  }

  return (
    <Agenda
      items={formattedEvents}
      renderItem={renderItem}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 24
  },
  item: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: 'white',
    flex: 1,
    padding: 15,
    marginRight: 10,
    marginTop: 32
  },
  activity_name :{
    // fontFamily : 'sans-serif',
    fontSize : 25,
  },
  time : {
    // fontWeight: 'bold'
  },
  activity_description : {
    fontSize : 16,
  },
  progress: {
    height: 5,
    width: 355.2 // this is harcoded and need to be calculated based on the previous View width
  }
});