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';

// react hooks, useState and useEffect

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 }) {

  // state = {
  //   array: []
  // }
  const [eventos, setEventos] = useState({});

  useEffect(() => {
    fetch(eventlist)
      .then(response => response.json())
      .then(dat => setEventos(dat))
        // this.setState({ array: response })
        // state.array = response
        // console.log(response)
      // );
      // console.log(state.array)
      // state.array = array
      .catch(error => console.error(error))
  }, []);

  {/*
      TODO: Convert array of dictionary into a dictionary of dictionary where the keys are the `startDate

  */}

  var events = {}
  // console.log('array: ', this.state.array)

  // {this.state.array.map(value => {
  //   console.log('value: ', value)
  //   events[value.startDate] = [{  // this have a problem because we can have multiple events in the same date, so it is not a best key
  //     'id' : value.id,
  //     'activityDescription' : value.activityDescription,
  //     'subscribed' : value.subscribed,
  //     'icon' : value.icon,
  //     'totalSubscribed' : value.totalSubscribed,
  //     'maxSubscribed' : value.maxSubscribed
  //   }]
  // });}

  // console.log('events: ', events);


  // getMoviesFromApi();

  // const [dates, setDates] = useState([
  //   {
  //     date: '2022-12-06',
  //     items: [1, 2, 3]
  //   },
  //   {
  //     date: '2022-12-07',
  //     items: [1, 2, 3]
  //   }
  // ]);

  // const [items, setItems] = useState([
  //   {id: '1', date: '2022-12-06',  name: 'matricula', sub: false, count: 10, max: 10}
  // ])

  // TODO 1: make sure more than one activity on the same date appears on screen
  // TO SOLVE: Two items of the same date, just the last item appear
  // TODO 2: make can we add images as part of the item? (this is more advanced, which could be implemented in the future)

  const [items, setItems] = useState({
    '2022-12-21': [{
      id: '1',
      activityDescription: 'aaaa',
      subscribed: false,
      icon: 'person-add-outline',
      totalSubscribed: 10,
      maxSubscribed: 10 }],
    '2022-12-22':[{
      id: '2',
      activityDescription: 'Actividad de cocina para la comunidad de Santa Rita, Río Piedras 🍲',
      subscribed: false,
      icon: 'person-add-outline',
      totalSubscribed: 3, 
      maxSubscribed: 7 }],
    '2022-12-23': [{
      id: '3',
      activityDescription: 'Taller de aprendizaje de construcción de techos 🏠',
      subscribed: false,
      icon: 'person-add-outline',
      totalSubscribed: 7,
      maxSubscribed: 7 }],
    '2022-12-24': [],
  });

  const [data, setData] = useState({data});

  const [selectedIcon, setSelectedIcon] = useState('person-add-outline');

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

  // const [current, setCurrent] = useState({formattedEvents});

  console.log(formattedEvents)
  console.log(items)

 const onButtonClick = useCallback((itemClicked) => {
   // [1]. change selected icon sub status from false to true or vice versa
   // [2]. change icon from 'person-add-outline' to 'person-sharp' or vice versa

   {
     Object.keys(items).map(key => {
       items[key].map(item => {
         // alert(item.id)
         if (item.id === itemClicked.id) {
            // alert(item.icon)
           // alert(item.sub)
             return{
              ...item,
              subscribed: true, //item.sub === false ? true : false,
              icon: 'person-sharp' //item.icon === 'person-add-outline' ? 'person-sharp' : 'person-add-outline'
           }

           // setSelectedIcon(selectedIcon === 'person-add-outline' ? 'person-sharp' : 'person-add-outline')
         }
         else{
           return item
         }
        //  {items[key].id}
       })

     })
   }

 }, [setItems]);
  


//     const onButtonClick = useCallback((itemClicked) => {
        
//         Object.keys(items).map(key => {
//             items[key].map(item => {

//                 const id = itemClicked
//                 alert(id)

//                 if (item.id === itemClicked.id) {
// //                    alert(item.id)
// //                    if (typeof items[key] === 'object'){
//                         setItems({
//                             ...items,
//                         sub: !item.sub, //item.sub === false ? true : false,
//                         icon: 'person-sharp' // item.icon === 'person-add-outline' ? 'person-sharp' : 'person-add-outline'
//                         });
// //                    }
//                 }
//             })
//         })
//     }, [setItems]);


  function renderItem(item) {
    console.log('item.activityDescription: ', item.activityDescription)
    return (
      <View>
          <View style={[styles.item, { height: item.height }]}>
            <Text> {item.activityDescription}</Text>
            {/* <Text> {data.title}</Text> */}
            {/* <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}
      // items={items}
      // item={current}
      // items={state.array}
      // data={data}
      renderItem={renderItem}
      // renderItem={(eventos, eventos.startDate)}
    />
  );


  // return (
  //   <Agenda
  //         items={current}
  //         renderItem={(item, firstItemInDay) => {
  //           return (
  //             <View>
  //               <Text>{item.activityName}</Text>
  //               <Text>{item.startDate}</Text>
  //             </View>
  //           );
  //         }}
  //       />
  // );


}


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