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 DefaultPage = {
    className?: string;
    path?: string;
};

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 DefaultPage : FC<DefaultPage> = ({className, children, path, ...props}) => (
    <Viewport
        className={clsx(styles.viewportOverrides, className)}
    >
        {path !== undefined ? <RelPath path={path!} /> : undefined}
        {children}
    </Viewport>
);

export default DefaultPage;