import { StyColorDisplay, StyColorGroup } from "@dreipol/t3-ui";
import { PaletteColor, useTheme } from "@mui/material";
import { PropsWithChildren } from "react";

export type StyColorsProps = PropsWithChildren<{}>;

export const StyColors = ({ children }: StyColorsProps) => {
    const theme = useTheme();

    const createGroup = (name: string, color: PaletteColor) => {
        return <>
            <StyColorDisplay name={ `theme.palette.${ name }.main` } colorCode={ color.main }/>
            <StyColorDisplay name={ `theme.palette.${ name }.dark` } colorCode={ color.dark }/>
            <StyColorDisplay name={ `theme.palette.${ name }.light` } colorCode={ color.light }/>
            <StyColorDisplay name={ `theme.palette.${ name }.contrastText` } colorCode={ color.contrastText }/>
        </>
    }
    return <>
        <StyColorGroup title="Brand" cols={ 4 }>
            { createGroup('primary', theme.palette.primary) }
            { createGroup('secondary', theme.palette.secondary) }
        </StyColorGroup>

        <StyColorGroup title="Signal" cols={ 4 }>
            { createGroup('info', theme.palette.info) }
            { createGroup('success', theme.palette.success) }
            { createGroup('warning', theme.palette.warning) }
            { createGroup('error', theme.palette.error) }
        </StyColorGroup>

        <StyColorGroup title="Text" cols={ 4 }>
            <StyColorDisplay name={ `theme.palette.text.primary` } colorCode={ theme.palette.text.primary }/>
            <StyColorDisplay name={ `theme.palette.text.secondary` } colorCode={ theme.palette.text.secondary }/>
            <StyColorDisplay name={ `theme.palette.text.disabled` } colorCode={ theme.palette.text.disabled }/>
        </StyColorGroup>

        <StyColorGroup title="Common" cols={ 4 }>
            <StyColorDisplay name={ `theme.palette.common.black` } colorCode={ theme.palette.common.black }/>
            <StyColorDisplay name={ `theme.palette.common.white` } colorCode={ theme.palette.common.white }/>
        </StyColorGroup>

        <StyColorGroup title="Misc" cols={ 4 }>
            <StyColorDisplay name={ `theme.palette.divider` } colorCode={ theme.palette.divider }/>
            <StyColorDisplay name={ `theme.palette.background.paper` } colorCode={ theme.palette.background.paper }/>
            <StyColorDisplay name={ `theme.palette.background.default` }
                colorCode={ theme.palette.background.default }/>
        </StyColorGroup>

        { children }
    </>
}