import React, { ElementType, forwardRef, Ref } from "react";
import classNames from "classnames";

export interface GridContainerProps {
    /** 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 GridContainer = forwardRef(
    (
        {
            children,
            className,
            // @ts-ignore Layout is an internal prop to avoid code duplication for LayoutGrid
            layout,
            tag: Tag = "div",
            ...props
        }: GridContainerProps,
        ref: Ref<HTMLElement>
    ) => {
        const layoutClass = layout ? "-layout" : "";
        return (
            <Tag className={classNames(`axiom${layoutClass}-grid-container`, className)} ref={ref} {...props}>
                {children}
            </Tag>
        );
    }
);

GridContainer.displayName = "GridContainer";

export interface GridProps {
    /** 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 Grid = forwardRef(
    (
        {
            children,
            className,
            // @ts-ignore Layout is an internal prop to avoid code duplication for LayoutGrid
            layout,
            tag: Tag = "div",
            ...props
        }: GridProps,
        ref: Ref<HTMLElement>
    ) => {
        const layoutClass = layout ? "-layout" : "";
        return (
            <Tag className={classNames(`axiom${layoutClass}-grid`, className)} ref={ref} {...props}>
                {children}
            </Tag>
        );
    }
);

Grid.displayName = "Grid";

export interface GridCellProps {
    /** 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 GridCell = forwardRef(
    (
        {
            className,
            children,
            large,
            // @ts-ignore Layout is an internal prop to avoid code duplication for LayoutGrid
            layout,
            medium,
            small,
            tag: Tag = "div",
            ...props
        }: GridCellProps,
        ref: Ref<HTMLElement>
    ) => {
        const spanClasses: string[] = [];
        const layoutClass = layout ? "-layout" : "";

        if (small) {
            spanClasses.push(`axiom${layoutClass}-grid__cell--span-${small}-small`);
        }

        if (medium) {
            spanClasses.push(`axiom${layoutClass}-grid__cell--span-${medium}-medium`);
        }

        if (large) {
            spanClasses.push(`axiom${layoutClass}-grid__cell--span-${large}-large`);
        }

        return (
            <Tag className={classNames(`axiom${layoutClass}-grid__cell`, spanClasses, className)} ref={ref} {...props}>
                {children}
            </Tag>
        );
    }
);

GridCell.displayName = "GridCell";