import {
	MoodReadResponse,
	PostReadResponse,
} from "@newcoin-foundation/iosdk-newgraph-client-js";
import { Col, Row } from "antd";
import { useEffect } from "react";
import { Link } from "react-router-dom";
import { useCachedMood } from "../hooks/useCached";
import { useActions, useAppState } from "../overmind";
import Title from "../Pages/Explore/Title";
import { NLView } from "../types";
import { ContentLayout } from "./ContentLayout";
import { Ebene } from "./Icons/Ebene";
import FolderClosed from "./Icons/Folder/Closed";
import { LargeArrowBack } from "./Icons/LargeArrowBack";
import { LoadMore } from "./LoadMore";
import { MaybeLink, PostWidget } from "./PostWidget";
import { PremiumContent } from "./PremiumContent";

export const TopFoldersGrid: NLView<{
	mood: MoodReadResponse;
	maxPosts?: number;
	title: string | undefined;
	noFolder?: boolean;
	wrap?: boolean;
	posts?: string | undefined;
	noFullWidth?: boolean;
	blur?: boolean;
}> = ({ mood, maxPosts, title, posts, noFolder, noFullWidth, wrap }) => {
	const m = useCachedMood(mood);

	maxPosts = maxPosts || m.posts?.length || 0;

	const postsList =
		title === "Explore folders"
			? m.posts?.slice(0, maxPosts && maxPosts + 1)
			: title === "Moods"
			? m.posts
			: m.posts?.slice(0, maxPosts);

	return (
		<PremiumContent
			stakeToAccess={m.stakeToAccess}
			owner={m?.author}
			style={{ width: "100%" }}
			link={"/folder/" + m.id}
			// className={title === "Moods" ? "" : ""}
		>
			<Row
				style={{
					width: "100%",
					height: "auto",
					display: "flex",
					justifyContent: `${
						posts === "full" ? "space-between" : ""
					}`,
					// flexWrap: "unset",
				}}
				wrap={true}
				className={`${
					noFullWidth
						? "nl-mood-grid-row-height"
						: "app-main-full-width"
				} ${title === "Moods" ? "nl-mood-grid-row-four" : ""}`}
			>
				{/* // folder */}
				{!noFolder && (
					<Link to={`/folder/${mood.id}`} className="ant-col">
						<Col
							className="bg-hover"
							style={{
								justifyContent: "center",
								flexDirection: "column",
								aspectRatio: "1/1",
								height: "100%",
								flex: 1,
							}}
						>
							<FolderClosed className="text-center folder" />

							<small
								className="folder-name"
								style={{ paddingTop: "5px" }}
							>
								{/* @ts-ignore */}
								{m.title?.length > 10
									? m.title?.substring(0, 3) + "..."
									: m?.title || ""}
							</small>
						</Col>
					</Link>
				)}

				{/* // image */}
				{!postsList?.length && (
					<Col style={{ aspectRatio: "1/1" }} />
				)}
				{postsList?.map((p) => (
					<MaybeLink
						// style={}
						to={
							!p.id
								? ""
								: !mood
								? `/post/${p.id}`
								: `/folder/${mood.id}/${p.id}`
						}
						className={
							p.contentType === "text/plain"
								? "maybelink ant-col"
								: "ant-col"
						}
					>
						<Col
							className={"bg-hover"}
							style={{
								justifyContent: "center",
								flexDirection: "column",
								aspectRatio: "1/1",
								height: "100%",
								flex: 1,
							}}
						>
							<PostWidget
								mood={mood}
								post={p}
								aspectRatio={p.aspectRatio}
							/>
						</Col>
					</MaybeLink>
				))}
			</Row>
		</PremiumContent>
	);
};

const TopFolders: NLView<{
	maxItems?: number;
	maxPostsToShow?: number;
	skipItems?: number;
	title?: string;
	posts?: string;
	userMoods?: MoodReadResponse[];
}> = ({ maxItems, title, posts, userMoods, skipItems, maxPostsToShow }) => {
	const state = useAppState();
	const moods = userMoods ? userMoods : state.lists.top.moods.items || [];
	const actions = useActions();
	maxItems = maxItems || 100;

	return (
		<>
			{title === undefined && (
				<Row style={{ width: "100%" }}>
					{/* <LargeArrowBack /> */}
					<p className="header-2 u-margin-bottom-medium">
						Explore folders
					</p>
				</Row>
			)}

			<div>
				{title ? <Title title={title} href="/top/folders" /> : ""}
				{moods
					?.slice(skipItems || 0, (skipItems || 0) + (maxItems || 3))
					.map((m, i) => (
						<Row
							className="nl-mood-grid-row"
							style={
								posts === "full"
									? {
											justifyContent: "space-between",
											alignItems: "center",
									  }
									: {
											justifyContent: "start",
											alignItems: "center",
									  }
							}
						>
							<TopFoldersGrid
								mood={m}
								maxPosts={maxPostsToShow} //i}
								title={title}
								posts={posts}
							/>
						</Row>
					))}
			</div>
			{!userMoods && (moods?.length || 0) < maxItems && (
				<LoadMore loadMore={() => actions.lists.top.moods()} />
			)}
		</>
	);
};

export default TopFolders;
