import { Portal } from "@chakra-ui/portal";
import { Box, Button } from "@chakra-ui/react";
import { addWeeks } from "date-fns";
import React, { useEffect, useState } from "react";
// import moment from "moment";
import Timeline, {
  ReactCalendarGroupRendererProps,
  ReactCalendarItemRendererProps,
  TimelineItemBase,
} from "react-calendar-timeline";
// make sure you include the timeline stylesheet or the timeline will not be styled
import "react-calendar-timeline/lib/Timeline.css";
import CalendarIcon from "./components/Icons/CalendarIcon";
import CirclePlusIcon from "./components/Icons/CirclePlusIcon";
import useOnScreen from "./utils/useOnScreen";

export const Roadmap: React.FC = () => {
  type CustomItem = {
    id: number;
    title: string;
    // @TODO: add any custom props here - will likely extend the django model
  };

  const groups = [
    { id: 1, title: "Project Team" },
    { id: 2, title: "Primary Sponsor" },
    { id: 3, title: "Change Action Plans" },
    { id: 4, title: "Training" },
  ];

  type Item = CustomItem & TimelineItemBase<Date | number>;

  const items: Item[] = [
    {
      id: 1,
      group: 1,
      title: "item 1",
      start_time: new Date(),
      end_time: addWeeks(new Date(), 12),
      canMove: false,
    },
    {
      id: 2,
      group: 2,
      title: "item 2",
      start_time: addWeeks(new Date(), -2),
      end_time: addWeeks(new Date(), 6),
      canMove: false,
    },
    {
      id: 3,
      group: 3,
      title: "item 3",
      start_time: addWeeks(new Date(), 2),
      end_time: addWeeks(new Date(), 3),
      canMove: false,
    },
    {
      id: 4,
      group: 4,
      title: "item 4",
      start_time: addWeeks(new Date(), 2),
      end_time: addWeeks(new Date(), 8),
      canMove: false,
    },
  ];
  const ref = React.useRef();

  const colorsArr = ["#237B4B", "#6BB700", "#FFAA44", "#C4314B", "#8E192E"];

  const itemRenderer: (
    props: ReactCalendarItemRendererProps<Item>
  ) => React.ReactNode = ({ getItemProps, item }) => {
    return (
      <Box
        {...getItemProps({
          onMouseDown: () => {
            console.log("on item click", item.id);
          },
        })}
        rounded="16px"
        px={4}
        backgroundColor={colorsArr[item.id] + " !important"}
        border="unset !important"
      >
        <CalendarIcon />
      </Box>
    );
  };

  const groupRenderer: (
    props: ReactCalendarGroupRendererProps<{
      id: number;
      title: string;
    }>
  ) => React.ReactNode = ({ group }) => {
    return (
      <Box rounded="16px" px={4} border="unset" width={400}>
        {group.title}
      </Box>
    );
  };

  const [top, setTop] = useState("50%");
  const [width, setWidth] = useState("100%");
  const [left, setLeft] = useState("100px");
  // const [height, setHeight] = useState("500px");

  function checkAndSetDimensions() {
    if (ref.current) {
      // @ts-ignore
      const rect = ref?.current?.getBoundingClientRect();
      setTop(rect.top);
      setWidth(rect.width);
      setLeft(rect.left);
      // setHeight(rect.height);
    }
  }

  const isVisible = useOnScreen(ref);

  useEffect(() => {
    if (isVisible) {
      checkAndSetDimensions();
    }
  }, [isVisible]);

  return (
    <Box
      // @ts-ignore
      ref={ref}
      bg="white"
      rounded="xl"
      pos="relative"
      // @NOTE: there is responsive sizing we can tweak
      // w={[500, 900, 1200]}
      w={1200}
      height={39 * (items.length + 4)}
    >
      {/* 
        Render the timeline in a portal (to break out of the DOM) where there are conflicting styles
        then poisition it absolutely or in accordance with some reference point 
      */}
      <Portal>
        <Box
          position="absolute"
          top={top + 10}
          transform="translateY(100%)"
          width={width}
          left={left}
          height={39 * (items.length + 3)}
          // CSS overrides that were not accessible directly (thus the long selectors)
          sx={{
            ".react-calendar-timeline .rct-horizontal-lines .rct-hl-even, .react-calendar-timeline .rct-horizontal-lines .rct-hl-odd": {
              borderBottom: "0px",
            },
            ".react-calendar-timeline .rct-sidebar .rct-sidebar-row": {
              borderBottom: "0px",
            },
            ".react-calendar-timeline .rct-header-root": {
              background: "none",
            },
            ".react-calendar-timeline .rct-dateHeader-primary": {
              color: "black",
              border: "unset",
            },
            ".react-calendar-timeline .rct-calendar-header": {
              border: "unset",
            },
            // ".remove_defaults": {
            //   // border: "unset",
            // },
          }}
        >
          {isVisible && (
            <Timeline
              groups={groups}
              timeSteps={{
                second: 1,
                minute: 1,
                hour: 1,
                day: 1,
                month: 1,
                year: 1,
              }}
              items={items}
              itemRenderer={itemRenderer}
              groupRenderer={groupRenderer}
              defaultTimeStart={addWeeks(new Date(), -5)}
              defaultTimeEnd={addWeeks(new Date(), 5)}
              horizontalLineClassNamesForGroup={() => ["remove_defaults"]}
              verticalLineClassNamesForTime={() => ["remove_defaults"]}
              lineHeight={39}
              sidebarWidth={200}
              canResize={false}
              // @NOTE: there is responsive sizing we can tweak
              // onItemResize
            />
          )}
        </Box>
      </Portal>
      <Button
        leftIcon={<CirclePlusIcon color="#006AC9" />}
        color="#006AC9"
        mt="auto"
        variant="ghost"
        zIndex={2}
        pos="absolute"
        bottom={3}
        left={3}
      >
        Add
      </Button>
    </Box>
  );
};