import { signIn } from "next-auth/react";

import dynamic from "next/dynamic";

import { AiFillGithub } from "react-icons/ai";

import { SiStackblitz } from "react-icons/si";

import CTAButton from "../../components/pages/landing/shared/CTAButton";

import { SectionHeader } from "../../components/pages/landing/shared/Headings";

import { examples } from "./generated/exampleComponents.gen";

import "../pages/landing/gradients.css";

import "./styles.css";

const baseGitHubURL = "https://github.com/TypeCellOS/BlockNote/tree/main/";

// const baseCodeSandboxURL =

// "https://githubbox.com/TypeCellOS/BlockNote/tree/main/";

const baseStackBlitzURL =

"https://www.stackblitz.com/github/TypeCellOS/BlockNote/tree/main/";

const ThemedExample = dynamic(() => import("./ThemedExample"), {

ssr: false,

});

export function ExampleBlock(props: {

name: keyof typeof examples;

path: string;

children: any;

isProExample?: {

userStatus: "business" | "starter" | "free" | undefined;

};

}) {

const showCode =

!props.isProExample ||

props.isProExample.userStatus === "starter" ||

props.isProExample.userStatus === "business";

return (

<div className="demo nx-bg-primary-700/5 dark:nx-bg-primary-300/10 mt-6 rounded-lg p-4">

{showCode && (

<div className={"z-10 flex flex-row gap-6 pb-4"}>

<a

className={

"nx-select-none nx-text-gray-600 hover:nx-text-black dark:nx-text-gray-200 dark:hover:nx-text-white flex flex-row items-center gap-1"

}

href={`${baseGitHubURL}${props.path}/`}

target="_blank">

<AiFillGithub />

<div className={"text-sm"}>GitHub</div>

</a>

<a

className={

"nx-select-none nx-text-gray-600 hover:nx-text-black dark:nx-text-gray-200 dark:hover:nx-text-white flex flex-row items-center gap-1"

}

href={`${baseStackBlitzURL}${props.path}/`}

target="_blank">

<SiStackblitz />

<div className={"text-sm"}>StackBlitz</div>

</a>

</div>

)}

<div className={"demo-contents h-96 overflow-auto rounded-lg"}>

<ThemedExample name={props.name} />

</div>

{showCode ? (

props.children

) : (

<div

className={

"relative flex h-96 flex-col items-center justify-center gap-2"

}>

<div className={"absolute h-1/2 w-1/2"}>

<div className={"cta-glow h-full w-full"}></div>

</div>

<div className={"z-10 flex w-2/3 flex-col items-center"}>

<SectionHeader>Pro Example</SectionHeader>

<p className={"text-center text-[#00000080] dark:text-[#FFFFFFB2]"}>

Get access to the full source code for pro examples by subscribing

to BlockNote Pro

</p>

<div className={"mt-8"}>

<CTAButton

href={"/pricing"}

color={"pro"}

size={"large"}

hoverGlow={true}>

Get BlockNote Pro

</CTAButton>

</div>

{!props.isProExample?.userStatus && (

<p className={"mt-1 text-xs"}>

Or{" "}

<button

className={"nx-text-primary-600"}

onClick={async () => {

await signIn("github", {});

}}>

sign in

</button>{" "}

via GitHub

</p>

)}

</div>

</div>

)}

</div>

);

}