import { FC } from "react";
import { observer } from "mobx-react";
// hooks
import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
import { useGanttChart } from "@/components/gantt-chart/hooks/use-gantt-chart";
// helpers
import { cn } from "@/helpers/common.helper";
// types
import { IMonthBlock } from "../../views";
// constants

export const MonthChartView: FC<any> = observer(() => {
  // chart hook
  const { currentViewData, renderView } = useGanttChart();
  const monthBlocks: IMonthBlock[] = renderView;

  return (
    <div className="absolute top-0 left-0 min-h-full h-max w-max flex divide-x divide-custom-border-100/50">
      {monthBlocks?.map((block, rootIndex) => (
        <div key={`month-${block?.month}-${block?.year}`} className="relative flex flex-col">
          <div
            className="w-full sticky top-0 z-[5] bg-custom-background-100 flex-shrink-0"
            style={{
              height: `${HEADER_HEIGHT}px`,
            }}
          >
            <div className="h-1/2">
              <div
                className="sticky inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize"
                style={{
                  left: `${SIDEBAR_WIDTH}px`,
                }}
              >
                {block?.title}
              </div>
            </div>
            <div className="h-1/2 w-full flex">
              {block?.children?.map((monthDay, index) => (
                <div
                  key={`sub-title-${rootIndex}-${index}`}
                  className="flex-shrink-0 border-b-[0.5px] border-custom-border-200 py-1 text-center capitalize"
                  style={{ width: `${currentViewData?.data.width}px` }}
                >
                  <div className="space-x-1 text-xs">
                    <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
                    <span
                      className={cn({
                        "rounded-full bg-custom-primary-100 px-1 text-white": monthDay.today,
                      })}
                    >
                      {monthDay.day}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="h-full w-full flex-grow flex divide-x divide-custom-border-100/50">
            {block?.children?.map((monthDay, index) => (
              <div
                key={`column-${rootIndex}-${index}`}
                className="h-full overflow-hidden"
                style={{ width: `${currentViewData?.data.width}px` }}
              >
                {["sat", "sun"].includes(monthDay?.dayData?.shortTitle) && (
                  <div className="h-full bg-custom-background-90" />
                )}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
});