import React, { useState } from "react";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import type { Dayjs } from "dayjs";
import dayLocaleData from "dayjs/plugin/localeData";
import {
  Calendar,
  Col,
  DatePicker,
  Popover,
  Radio,
  Row,
  Select,
  Typography,
  theme,
} from "antd";
import type { CalendarProps } from "antd";
import { IoMdArrowDropdown } from "react-icons/io";
import { MdOutlineEdit } from "react-icons/md";
import { RiDeleteBin6Fill } from "react-icons/ri";

dayjs.extend(dayLocaleData);

const App: React.FC = () => {
  const [year, setYear] = useState<number>(dayjs().year());
  const [month, setMonth] = useState<number>(dayjs().month());
  const onChangeDatePicker = (value: any) => {
    if (value) {
      setYear(value.$y); // Extract year from the selected date and update the year state
      setMonth(value.$M); // Extract month from the selected date and update the month state
    } else {
      const today = dayjs(); // Get the current date
      setYear(today.year()); // Update the year state to the current year
      setMonth(today.month());
    }
  };
  const popoverDays = [
    {
      day: 10,
      month: 3,
      year: 2024,
      title: "مسابقة الشطرنج الدولية",
      time: "الساعة 11",
    },
    {
      day: 22,
      month: 3,
      year: 2024,
      title: "مسابقة الشطرنج الدولية",
      time: "الساعة 12",
    },
  ];

  const [actionsVisible, setActionsVisible] = useState(0);

  const toggleActionsVisibility = (day: number) => {
    setActionsVisible(day);
  };
  const dateCellRender = (value: dayjs.Dayjs) => {
    const day = value.date();
    const month = value.month() + 1;
    const year = value.year();

    const matchingDay = popoverDays.find(
      (date) => date.day === day && date.month === month && date.year === year,
    );

    if (matchingDay) {
      return (
        <Popover
          placement="top"
          className="CalenderPop"
          rootClassName="CalenderPop"
          trigger="hover"
          content={
            <div
              className="Calendar_Popover"
              onClick={() => toggleActionsVisibility(day)}
            >
              <h5>{matchingDay.title}</h5>
              <h6>{matchingDay.time}</h6>
              {actionsVisible === day && ( // Only show actions if actionsVisible is true
                <span className="Actions">
                  <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
                  <RiDeleteBin6Fill size={22} style={{ color: "#C11313" }} />
                </span>
              )}
            </div>
          }
          // open={true}
        >
          <div className="Calendar_ActiveDiv">{day}</div>
        </Popover>
      );
    }

    return <div className="Calendar_Div">{day}</div>;
  };

  return (
    <div className={"CalendarSection"}>
      <Calendar
        fullscreen={false}
        fullCellRender={dateCellRender}
        value={dayjs(`${year}-${month + 1}-01`)}
        headerRender={() => {
          return (
            <div className="CalendarHeader">
              <h4>تقويم المدرسة</h4>
              <DatePicker
                suffixIcon={<IoMdArrowDropdown size={30} />}
                onChange={(newDate: number) => onChangeDatePicker(newDate)}
                picker="month"
              />
            </div>
          );
        }}
      />
    </div>
  );
};

export default App;
