import { Col, Row } from "antd";
import { Link } from "react-router-dom";
import { MoodReadResponse, PostReadResponse } from "@newstackdev/iosdk-newgraph-client-js";
import { NLView } from "../../types";
import { PostWidget } from "../../Components/PostWidget";
import { Spin } from "../../Components/Spin";
import { useActions, useAppState } from "../../overmind";
import { useCachedMood } from "../../hooks/useCached";
import { useEffect, useState } from "react";
import FolderClosed from "../../Components/Icons/Folder/Closed";
import useVisibility, { useVisibilityOnce } from "../../hooks/useVisibility";

type MoodsGridParams = {
  title?: string;
  moods?: MoodReadResponse[];
  loadMore?: () => void;
};
const complementTo4 = (p: PostReadResponse[] = []) => p;

export const MoodsGridRow: NLView<{
  mood: MoodReadResponse;
  maxItems?: number;
  noFullWidth?: boolean;
  noFolder?: boolean;
  delay?: number;
  wrap?: boolean;
}> = ({ mood, maxItems, noFullWidth, noFolder, wrap }) => {
  const [isVisible, currentElement] = useVisibilityOnce<HTMLDivElement>(-100);
  const state = useAppState();
  const actions = useActions();

  const m = useCachedMood(mood); //state.api.cache.moods[mood.id || ""] || {};

  useEffect(() => {
    const pc = m?.posts?.length || 0;
    console.log("Visible: ", isVisible);
    isVisible && mood && (pc === 0 || (pc < 4 && !maxItems)) && actions.api.mood.getPosts(mood);
  }, [isVisible]);

  const postsList = maxItems ? m.posts?.slice(0, maxItems) : m.posts;

  console.log(postsList);

  return (
    <Row
      ref={currentElement}
      wrap={wrap}
      className={`nl-mood-grid-row  ${noFullWidth ? "nl-mood-grid-row-height" : "app-main-full-width"} ${wrap ? "wrap" : ""}`}
      justify={wrap ? "start" : "start"}
      align="middle"
    >
      {noFolder ? (
        ""
      ) : (
        <Col xs={8}>
          <div style={{ width: "100%" }}>
            <Link to={`/folder/${mood.id}`}>
              <FolderClosed width="min(66px,100%)" height="auto" className="text-center" />
              <br />
              <small className="paragraph-2r">
                {m.title || ""}
                {/* {JSON.stringify(m || "")} */}
              </small>
              <br />
            </Link>
          </div>
        </Col>
      )}
      {complementTo4(postsList).map((p) => (
        <Col className={wrap ? "wrap" : ""}>
          <PostWidget mood={mood} post={p} aspectRatio={p.aspectRatio} />
        </Col>
      ))}
      {postsList?.length === 0 ? <Col /> : ""}
    </Row>
  );
};

export const MoodsGrid: NLView<MoodsGridParams> = ({ moods, title, loadMore }) => {
  const [isVisible, currentElement] = useVisibility<HTMLDivElement>(-200);
  const state = useAppState();

  useEffect(() => {
    isVisible && loadMore && loadMore();
  }, [isVisible]);

  return (
    <>
      {title && <h2 className="app-main-full-width header-2">{title}</h2>}
      {moods?.map((m, i) => (
        <MoodsGridRow mood={m} maxItems={4} delay={i * 1000} />
      ))}
      <div ref={currentElement} style={{ minHeight: 100, minWidth: 100 }}>
        <br />
        {state.indicators.isWorking && loadMore ? <Spin /> : ""}
        <br />
      </div>
    </>
  );
};