import clsx from "clsx";
import React, { FC } from "react";
import { Breadcrumbs, LinkCrumb } from "../../components/Breadcrumbs";
import Viewport from "../../components/ViewPort";
import styles from './default.module.scss';

export type DefaultPageProps = {
    className?: string;
    path?: string;
    lastUpdated?: string;
    children?: React.ReactChild;
};

export type RelPathProps = {
    path: string;
};

const RelPath : FC<RelPathProps> = ({path, ...props}) => {
    const _path = path[path.length - 1] === '/' ? path.substr(0, path.length - 1) : path;

    const parts = _path.split('/');
    const rels = [''];

    for(let i = 1; i < parts.length; i++) {
        rels.push([rels[i - 1], parts[i]].join('/'));
    }

    rels[0] = '/';
    parts[0] = 'flu0r1ne.net';

    return (
        <Breadcrumbs>
            {rels.map((relHref, i) => (
                <LinkCrumb key={relHref} href={relHref}>
                    {parts[i]} 
                </LinkCrumb>
            ))}
        </Breadcrumbs>
    );
}

const LastUpdatedDate : FC<{ children: React.ReactNode }> = ({children}) => (
    <span className={styles.date}><b>Last Updated: </b>{children}</span>
)

const DefaultPage : FC<DefaultPageProps> = ({className, lastUpdated, children, path, ...props}) => (
    <Viewport
        className={clsx(styles.viewportOverrides, className)}
    >
        {path !== undefined ? <RelPath path={path!} /> : undefined}
        {lastUpdated ? <LastUpdatedDate>{lastUpdated}</LastUpdatedDate> : undefined}
        {children}
    </Viewport>
);

export default DefaultPage;