import React, { useRef } from "react";
import "../Section9/section9.css";
import { NavLink } from "react-router-dom";
import { useState, useEffect } from "react";
import axios from "axios";
import baseUrl from "../../../array/base/config";
import { AddToCalendarButton } from "add-to-calendar-button-react";
/**
 * Represents Section9 component.
 * @module Home/Section9
 * @returns {JSX.Element} The Section9 component.
 */
const Section9 = () => {
  /**
   * State for storing eventData
   * @type {string}
   * @memberof module:Home/Section9
   * @name eventData
   */
  const [eventData, setEventData] = useState([]);
  useEffect(() => {
    eventDataApiCall();
  }, []);
  /**
   * Fetches event data from the API and updates the state.
   * @function eventDataApiCall
   * @async
   * @memberof module:Home/Section9
   */
  const eventDataApiCall = () => {
    axios({
      method: "get",
      url: `${baseUrl}/api/event/`,
    })
      .then((res) => {
        setEventData(res?.data?.data?.results);
      })
      .catch((err) => console.log(err));
  };
  return (
    <>
      {eventData.length > 0 ? (
        <div className="section_9_container mt-3 relative" id="public_events">
          <div className="section_9_container_heading">
            <h1>Latest Events</h1>
          </div>
          <div className="section_9_container_events_body ">
            {eventData?.length >= 4 ? (
              <div className="view_more_events_wrapper">
                <NavLink to="/events">
                  <div className="readmore_list_view">
                    <p>View more</p>
                    <ion-icon
                      className="custom_icon"
                      name="eye-outline"
                    ></ion-icon>
                  </div>
                </NavLink>
              </div>
            ) : (
              ""
            )}

            <div className="section_9_container_events_div">
              {eventData
                .filter((item, i) => i <= 3)
                .map((dat, i) => {
                  const startDateObj = new Date(dat?.event_start_date);
                  const startMonth = startDateObj.toLocaleString("default", {
                    month: "short",
                  });
                  const startDay = startDateObj.getDate();
                  const formattedStartDate = `${startMonth} ${startDay}`;

                  const endDateObj = new Date(dat?.event_end_date);
                  const endMonth = endDateObj.toLocaleString("default", {
                    month: "short",
                  });
                  const endDay = endDateObj.getDate();
                  const formattedEndDate = `${endMonth} ${endDay}`;
                  return (
                    <div
                      className="section_9_container_individual_events_card"
                      key={i}
                    >
                      <NavLink to={`/event/${dat.id}`}>
                        <div className="section_9_container_events_wrapper"></div>
                      </NavLink>
                      <div className="section_9_container_events_card_body">
                        <div className="section_9_container_events_thumbnail">
                          <img src={dat?.image} alt="" />
                        </div>
                      </div>
                      <div className="section_9_container_events_card_footer">
                        <div className="section_9_container_events_card_footer_content">
                          <h3>{dat?.title}</h3>
                          <div className="section_9_container_event_start_end_div">
                            <div className="section_9_container_start_date">
                              <p>Start Date</p>
                              <p>{formattedStartDate}</p>
                            </div>
                            <div className="section_9_container_end_date">
                              <p>End Date</p>
                              <p>{formattedEndDate}</p>
                            </div>
                          </div>
                          <div className="register_add_to_calander">
                            <div className="add_to_calander">
                              <AddToCalendarButton
                                name={dat?.title || ""}
                                className="custom-calendar-button"
                                options={["Google"]}
                                location={dat?.location || ""}
                                startDate={dat?.event_start_date}
                                endDate={dat?.event_end_date}
                                description={dat?.content}
                                trigger="click"
                                size="2"
                              ></AddToCalendarButton>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                })}
            </div>
          </div>
        </div>
      ) : null}
    </>
  );
};

export default Section9;