import { CSSProperties, FC, useMemo } from 'react';
import { Grid, GridProps } from './Grid';

export interface AutoGridProps extends GridProps {
    columnMinWidth?: number;
    columnMinHeight?: number;
}

export const AutoGrid: FC<AutoGridProps> = (props) => {
    const { columnMinWidth = 40, columnMinHeight = 40, columnCount = 0, fullHeight = false, maxContent = true, overflow = 'auto', style = {}, ...rest } = props;

    const getStyle = useMemo(() => {
        let newStyle: CSSProperties = {};

        newStyle['--octane-grid-column-min-height'] = columnMinHeight + 'px';
        newStyle['--octane-grid-column-min-width'] = columnMinWidth + 'px';

        if (columnCount > 1) newStyle.gridTemplateColumns = `repeat(auto-fill, minmax(${columnMinWidth}px, 1fr))`;

        if (Object.keys(style).length) newStyle = { ...newStyle, ...style };

        return newStyle;
    }, [columnMinWidth, columnMinHeight, columnCount, style]);

    return <Grid columnCount={columnCount} fullHeight={fullHeight} overflow={overflow} style={getStyle} {...rest} />;
};