---
import ListItem from "./items/StrapiBlockListItem.astro";
import List from "./items/StrapiBlockList.astro";
import StrapiBlockCustom from "./StrapiBlockCustom.astro";

import { renderPropertyClasses, StrapiBlockThemeDefault } from "../../lib";
import type {
    AstroComponent,
    StrapiBlockListItem,
    StrapiBlockListType,
    StrapiBlockTheme,
} from "../../types";

type Props<FontColors extends string> = {
    class?: string;
    format: StrapiBlockListType;
    color?: FontColors;
    data: Array<StrapiBlockListItem>;
    block?: AstroComponent;
    theme: StrapiBlockTheme;
};

const { data, format = "unordered", class: classes = '', theme = StrapiBlockThemeDefault, block } = Astro.props;

const renderData = data.filter(
    (item: StrapiBlockListItem) => item.children && item.children.length,
);
---
{ block && (<StrapiBlockCustom {...Astro.props} comp={block} data={renderData} />)}
{ !block && (<div class={classes}>
    {
        format === "unordered" && (
            <List tag="ul" class={renderPropertyClasses(theme, ['list', 'unordered'])}>
                {renderData.map((item: StrapiBlockListItem) => (
                    <ListItem 
                        class={renderPropertyClasses(theme, ['list', 'item'])}
                        data={item.children}
                        theme={theme} />
                ))}
            </List>
        )
    }

    {
        format === "ordered" && (
            <List tag="ol" class={renderPropertyClasses(theme, ['list', 'ordered'])}>
                {renderData.map((item: StrapiBlockListItem) => (
                    <ListItem 
                    class={renderPropertyClasses(theme, ['list', 'item'])} 
                    data={item.children} 
                    theme={theme} />
                ))}
            </List>
        )
    }
</div>)}