import { IProps } from "@/common/Iprops.interface";
import { useEffect, useMemo, useState } from "react";
import { chunk as _chunk } from "lodash";
import { offset, flip, shift, arrow } from "@floating-ui/react-dom";
import {
  useFloating,
  useInteractions,
  useHover,
} from "@floating-ui/react-dom-interactions";
interface EventItemType extends IProps {
  itmeIndex: number;
  data: any;
}
interface EventsTableType extends IProps {
  tableIndex: number;
  data: any;
}
interface EventColsType extends IProps {
  data: any;
}

export const EventItem = (props: EventItemType) => {
  const { itmeIndex, data } = props;
  const [open, setOpen] = useState(false);
  const { x, y, reference, floating, strategy,context } = useFloating({
    open,
    onOpenChange: setOpen,
    placement: itmeIndex>1?"left" :"right",
    strategy: "fixed",
  });
  const {getReferenceProps, getFloatingProps} = useInteractions([
    useHover(context, {
      // props
    })
  ]);
  const move = useMemo(() => {
    return itmeIndex * 85 + "px";
  }, [itmeIndex]);
  const dates = useMemo(() => {
    let date;
    if (data.date) {
      date = data.date.split("-");
    } else {
      date = undefined;
    }
    return date;
  }, [data]);
  return (
    <>
      <div
        className={`max-w-[12rem] h-fit cursor-pointer`}
        ref={reference}
        style={{
          transform: `translateY(${move})`,
        }}
      >
        <div className="flex items-baseline">
          <div className="int-font-sub text-theme-dark">
            {dates && dates[0]}/
          </div>
          <div className="int-font-hero border-b-[2px] border-theme-dark backdrop-opacity-30  text-theme-dark">
            {dates && dates[1]}
          </div>
        </div>
        <div className="py-2 content-1-cn line-clamp-3 h-[70px]  overflow-y-hidden ">
          {data ? data.title : ""}
        </div>
      </div>
      {open&&data && data.title.length > 37 &&  (
        <div
          ref={floating}
          className="bg-theme-dark content-1-cn z-[9999] text-white py-5 px-3 w-[260px] rounded-md break-all"
          style={{
            position: strategy,
            top: y ?? 0,
            left: x ?? 0,
          }}
        >
            {data.title}
        </div>
      )}
    </>
  );
};

export const EventCols = (props: EventColsType) => {
  const { data } = props;
  return (
    <div className="grid grid-cols-4 pb-[3rem]">
      {data &&
        data.length > 0 &&
        data.map((i: any, index: number) => (
          <EventItem itmeIndex={index} data={i} key={index}></EventItem>
        ))}
    </div>
  );

};

export const EventsTable = (props: EventsTableType) => {
  const { tableIndex, data } = props;
  const [colData, setColData] = useState<undefined | any[]>(undefined);
  useEffect(() => {
    const half = 4;
    const c = _chunk(data, half);
    setColData(c);
  }, [data]);
  return (
    <div>
      {colData &&
        colData.map((k, index) => <EventCols data={k} key={index}></EventCols>)}
    </div>
  );
};
