import moment from "jalali-moment";
import React, { useEffect, useState } from "react";

let daysList = [
  {
    id: 1,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 2,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 3,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 4,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 5,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 6,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 7,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 8,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 9,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 10,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 11,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 12,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 13,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 14,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 15,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 16,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 17,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 18,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 19,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 20,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 21,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 22,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 23,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 24,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 25,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 26,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 27,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 28,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 29,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 30,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 31,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 32,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 33,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 34,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 35,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 36,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 37,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 38,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 39,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 40,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 41,
    dayNumber: "",
    isToday: false,
    events: [],
  },
  {
    id: 42,
    dayNumber: "",
    isToday: false,
    events: [],
  },
];
//---------------
let dotsColor = ["#249D8C", "#F4C84B"];
//=======================================================
const Days = ({
  findFirstDayWeekDay,
  year,
  month,
  currentYear,
  currentMonth,
  currentDay,
  primaryColor,
  eventList,
  activeDay,
  selectDay,
  eventBoxisRight,
  eventBoxTop,
  eventBoxRight,
  showEvent,
}) => {
  const [Daylist, setDayList] = useState(daysList);
  const [fake, setFake] = useState(0);
  //create month days----------------------------
  useEffect(() => {
    let list = daysList;
    let w1 = findFirstDayWeekDay(year, month);
    let m = 31;
    if (month > 6) {
      m = 30;
    }
    if (month === 12) {
      m = 29;
    }
    let dayCounter = 0;
    for (let i = 0; i < list.length; i++) {
      if (i >= w1 && dayCounter < m) {
        dayCounter++;
        list[i].dayNumber = dayCounter;
        //tody check---------------
        if (
          year === currentYear &&
          month === currentMonth &&
          dayCounter === currentDay
        ) {
          list[i].isToday = true;
        } else {
          list[i].isToday = false;
        }
        //events check------------
        list[i].events = [];
        for (let p = 0; p < eventList.length; p++) {
          moment.locale("en");
          let a = moment(eventList[p].date);
          a.locale("fa");
          let eventDay = Number(a.format("DD"));
          let eventMonth = Number(a.format("MM"));
          let eventYear = Number(a.format("YYYY/M/D").split("/")[0]);
          if (
            year === eventYear &&
            month === eventMonth &&
            dayCounter === eventDay
          ) {
            list[i].events.push(eventList[p]);
          }
        }
      } else {
        list[i].dayNumber = "";
        list[i].isToday = false;
      }
    }
    console.log(daysList);
    setDayList(list);
    setFake(fake + 1);
  }, [month]);

  //==============
  const [eventData, setEventData] = useState([]);
  const selectDayHandler=(index)=>{
    setEventData(Daylist[index].events);
    selectDay(index);
  }
  return (
    <div
      className="Days w-full flex flex-row-reverse items-start justify-between flex-wrap gap-y-[2%] relative"
      style={{ height: "calc(100% - 80px)" }}
    >
      {Daylist.map((item, index) => (
        <div
          key={index}
          className="w-[13%] h-[15%] rounded-lg cursor-pointer flex flex-col items-center justify-center text-sm relative"
          style={
            activeDay === index
              ? {
                  backgroundColor: primaryColor,
                  color: "#fff",
                }
              : item.isToday
              ? {
                  border: `1px solid ${primaryColor}`,
                  color: `${primaryColor}`,
                }
              : index % 7 === 6
              ? { color: "#C94E2A" }
              : null
          }
          onClick={() => selectDayHandler(index)}
        >
          <div>{item.dayNumber}</div>
          <div className="w-[90%] flex items-center justify-center gap-x-1 absolute bottom-1">
            {item?.events?.map((event, Index) => (
              <React.Fragment key={Index}>
                {Index < 2 && (
                  <div
                    key={Index}
                    className="w-1 h-1 rounded-full bg-black"
                    style={
                      event?.type
                        ? { backgroundColor: dotsColor[event.type - 1] }
                        : { backgroundColor: dotsColor[Index] }
                    }
                  ></div>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>
      ))}
      {/* ----------events-box---------------- */}
      {showEvent && (
        <div
          className="w-2/3 rounded bg-[#343234] absolute top-4 p-2"
          style={
            eventBoxisRight
              ? {
                  top: `${eventBoxTop}%`,
                  right: `calc(${eventBoxRight}% - 1px)`,
                }
              : {
                  top: `${eventBoxTop}%`,
                  left: `calc(${eventBoxRight}% - 1px)`,
                }
          }
        >
          <div className="w-full flex items-center justify-between">
            {/* <div className="w-1/3 h-[2px] bg-white rounded-lg"></div> */}
            <div className="w-full text-right text text-white">:رویدادها</div>
            {/* <div className="w-1/3 h-[2px] bg-white rounded-lg"></div> */}
          </div>
          <div className="w-full mt-1">
            {eventData?.map((item, index) => (
              <div
                key={index}
                className="w-full flex flex-row-reverse items-center mb-2"
              >
                <div
                  className="w-2 h-2 rounded-full bg-white ml-2"
                  style={
                    item?.type
                      ? { backgroundColor: dotsColor[item.type] }
                      : { backgroundColor: dotsColor[index%2] }
                  }
                ></div>
                <div className="text-sm text-right text-[#999]">
                  {item?.title}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default Days;


// bg-[rgba(0,0,0,0.2)]