import React from "react";
import {
    chakra,
    Heading,
    ListItem,
    OrderedList,
    Table,
    Td,
    Tr,
    UnorderedList,
    Image,
    SimpleGrid,
    Text,
    FlexProps,
    Box,
} from "@chakra-ui/react";
import { GalleryView } from "./gallery";
import { HTMLCodeBlockView } from "./html-code-block";
import { AccordionView } from "./accordion";
import { CardsView } from "./cards/CardsView";
import { TabsView } from "./tabs";
import { BaseFlexboxComponent, BaseFlexboxItemComponent } from "./flexbox";
import ButtonLink from "../buttons/ButtonLink";
import { LinkView } from "./link/LinkView";
import { TextView } from "./text/TextView";

export function renderJSON(content: any[]) {
    return (
        content?.map?.((item) => {
            console.log(item);
            const { attrs, content, type, text, marks } = item;
            try {
                switch (type) {
                    case "custom-link":
                    case "customLink":
                        return (
                            <chakra.div display="inline-block">
                                {renderJSON(content)}
                            </chakra.div>
                        );
                    case "flexbox":
                        return (
                            <BaseFlexboxComponent
                                node={item}
                                children={renderJSON(content)}
                            />
                        );
                    case "flexboxItem":
                        return (
                            <BaseFlexboxItemComponent
                                node={item}
                                children={renderJSON(content)}
                            />
                        );
                    case "tabs":
                        return <TabsView tabs={content || []} />;

                    case "card-list":
                    case "cardList":
                        return <CardsView {...attrs} />;

                    case "gallery":
                        return <GalleryView {...attrs} />;

                    case "chakraImage":
                        return <Image {...attrs} />;

                    case "blockquote":
                        return <chakra.blockquote
                            borderStartColor="gray.100"
                            borderStartStyle="solid"
                            borderStartWidth="4px"
                            ps={4}
                            fontStyle="italic"
                        >
                            {renderJSON(content)}
                        </chakra.blockquote>;

                    case "text":
                        return <TextView node={item} />;

                    case "paragraph":
                        return content ? renderJSON(content) : "";

                    case "htmlCodeBlock":
                        return <HTMLCodeBlockView {...attrs} props={{ mt: 8 }} />;

                    case "heading": {
                        const { level, ...props } = attrs as {
                            level: 1 | 2 | 3 | 4;
                            textAlign: "left" | "right" | "center";
                        };

                        return (
                            <Heading {...props} as={`h${level}`}>
                                {renderJSON(content)}
                            </Heading>
                        );
                    }
                    case "accordion":
                        return (
                            <AccordionView {...attrs}>{renderJSON(content)}</AccordionView>
                        );

                    case "orderedList":
                        return <OrderedList>{renderJSON(content)}</OrderedList>;

                    case "listItem":
                        return <ListItem>{renderJSON(content)}</ListItem>;

                    case "table":
                        return <Table>{renderJSON(content)}</Table>;

                    case "tableRow":
                        return <Tr {...attrs}>{renderJSON(content)}</Tr>;

                    case "tableCell":
                        return <Td {...attrs}>{renderJSON(content)}</Td>;

                    case "bulletList":
                        return <UnorderedList>{renderJSON(content)}</UnorderedList>;

                    case "bulletListItem":
                        return <ListItem>{renderJSON(content)}</ListItem>;
                }
            } catch { }
            return content ? renderJSON(content) : <></>;
        }) || <></>
    );
}