import React, { ElementType, forwardRef, FunctionComponent, Ref } from "react";
import { Grid, GridCell, GridContainer } from "../Grid/grid";

export interface LayoutGridContainerProps {
    /** Child elements. */
    children?: any;
    /** CSS class names. */
    className?: string;
    /** Ref to the component. */
    ref?: Ref<HTMLElement>;
    /** Customize the tag element (defaults to 'div'). */
    tag?: ElementType;
}

export const LayoutGridContainer: FunctionComponent<LayoutGridContainerProps> = forwardRef(
    (props: LayoutGridContainerProps, ref: Ref<HTMLElement>) => {
        // @ts-ignore Layout is an internal prop to avoid code duplication for LayoutGrid
        return <GridContainer layout ref={ref} {...props} />;
    }
);

LayoutGridContainer.displayName = "LayoutGridContainer";

export interface LayoutGridProps {
    /** Child elements. */
    children?: any;
    /** CSS class names. */
    className?: string;
    /** Ref to the component. */
    ref?: Ref<HTMLElement>;
    /** Customize the tag element (defaults to 'div'). */
    tag?: ElementType;
}

export const LayoutGrid: FunctionComponent<LayoutGridProps> = forwardRef((props: LayoutGridProps, ref: Ref<HTMLElement>) => {
    // @ts-ignore Layout is an internal prop to avoid code duplication for LayoutGrid
    return <Grid layout ref={ref} {...props} />;
});

LayoutGrid.displayName = "LayoutGrid";


export interface LayoutGridCellProps {
    /** Child elements. */
    children?: any;
    /** CSS class names. */
    className?: string;
    /** Number of columns the cell spans on a large screen. Fullscreen is 12. */
    large?: number;
    /** Number of columns the cell spans on a medium screen. Fullscreen is 8. */
    medium?: number;
    /** Ref to the component. */
    ref?: Ref<HTMLElement>;
    /** Number of columns the cell spans on a small screen. Fullscreen is 4. */
    small?: number;
    /** Customize the tag element (defaults to 'div'). */
    tag?: ElementType;
}

export const LayoutGridCell: FunctionComponent<LayoutGridCellProps> = forwardRef((props: LayoutGridCellProps, ref: Ref<HTMLElement>) => {
    // @ts-ignore Layout is an internal prop to avoid code duplication for LayoutGrid
    return <GridCell layout ref={ref} {...props} />;
});

LayoutGridCell.displayName = "LayoutGridCell";