import DataTableCellBase, { DataTableCellBaseProps } from "@insite/mobius/DataTable/DataTableCellBase";
import DataTableContext from "@insite/mobius/DataTable/DataTableContext";
import Typography, { TypographyPresentationProps } from "@insite/mobius/Typography";
import applyPropBuilder from "@insite/mobius/utilities/applyPropBuilder";
import * as React from "react";
import { css, withTheme } from "styled-components";

export interface DataTableCellProps extends DataTableCellBaseProps {
    /** Props to be passed to the cell's typography child. */
    typographyProps?: TypographyPresentationProps;
    /**
     * Indicates how the `css` property is combined with the default `css` property from the theme.
     * If true, the default css is applied first and then the component css is applied after causing
     * a merge, much like normal CSS. If false, only the component css is applied, overriding the default css in the theme.
     */
    mergeCss?: boolean;
}

const DataTableCell: React.FC<DataTableCellProps> = ({
    mergeCss,
    css: cellCss = "",
    children,
    typographyProps,
    ...otherProps
}) => {
    const { applyStyledProp } = applyPropBuilder({ ...otherProps }, { component: "dataTable" });
    const { theme } = otherProps;
    const resolvedMergeCss = mergeCss ?? theme?.dataTable.defaultProps?.mergeCss;
    return (
        <DataTableContext.Consumer>
            {({ cellTypographyProps }) => (
                <DataTableCellBase
                    {...otherProps}
                    css={css`
                        ${applyStyledProp(["cssOverrides", "cell"], resolvedMergeCss)}
                        ${cellCss}
                    `}
                >
                    {typeof children === "string" ? (
                        <Typography {...cellTypographyProps} {...typographyProps}>
                            {children}
                        </Typography>
                    ) : (
                        children
                    )}
                </DataTableCellBase>
            )}
        </DataTableContext.Consumer>
    );
};

export default withTheme(DataTableCell);
