import {
    ComponentProps,
    DetailedHTMLProps,
    HTMLAttributes,
    PropsWithChildren,
} from "react";
import Stack from "../../layout/Stack";
import Container from "../../layout/Container";
import Row from "../../layout/Row";
import TWUIDocsAside from "./TWUIDocsAside";
import { twMerge } from "tailwind-merge";
import Paper from "../../elements/Paper";
import TWUIDocsRightAside from "./TWUIDocsRightAside";

export type DocsLinkType = {
    title: string;
    href: string;
    strict?: boolean;
    children?: DocsLinkType[];
    editPage?: string;
};

type Props = PropsWithChildren & {
    DocsLinks: DocsLinkType[];
    docsAsideBefore?: React.ReactNode;
    docsAsideAfter?: React.ReactNode;
    wrapperProps?: ComponentProps<typeof Stack>;
    docsContentProps?: ComponentProps<typeof Row>;
    leftAsideProps?: DetailedHTMLProps<
        HTMLAttributes<HTMLElement>,
        HTMLElement
    >;
    autoExpandAll?: boolean;
    editPageURL?: string;
};

/**
 * # TWUI Docs
 * @className `twui-docs-content`
 */
export default function TWUIDocs({
    children,
    DocsLinks,
    docsAsideAfter,
    docsAsideBefore,
    wrapperProps,
    docsContentProps,
    leftAsideProps,
    autoExpandAll,
    editPageURL,
}: Props) {
    return (
        <Stack
            center
            {...wrapperProps}
            className={twMerge("w-full px-4 sm:px-6", wrapperProps?.className)}
        >
            <Container>
                <Paper className="xl:p-8 mobile-paper-hidden">
                    <Row
                        {...docsContentProps}
                        className={twMerge(
                            "items-start gap-8 w-full flex-nowrap",
                            docsContentProps?.className
                        )}
                    >
                        <TWUIDocsAside
                            DocsLinks={DocsLinks}
                            after={docsAsideAfter}
                            before={docsAsideBefore}
                            autoExpandAll={autoExpandAll}
                            {...leftAsideProps}
                        />
                        <div
                            className={twMerge(
                                "block twui-docs-content pl-0 xl:pl-6 grow",
                                "overflow-hidden"
                            )}
                        >
                            {children}
                        </div>
                        <TWUIDocsRightAside editPageURL={editPageURL} />
                    </Row>
                </Paper>
            </Container>
        </Stack>
    );
}