import DataTableContext from "@insite/mobius/DataTable/DataTableContext";
import applyPropBuilder from "@insite/mobius/utilities/applyPropBuilder";
import { StyledProp } from "@insite/mobius/utilities/InjectableCss";
import injectCss from "@insite/mobius/utilities/injectCss";
import MobiusStyledComponentProps from "@insite/mobius/utilities/MobiusStyledComponentProps";
import * as React from "react";
import styled, { css, withTheme } from "styled-components";

export type DataTableBodyProps = MobiusStyledComponentProps<
    "tbody",
    {
        /** CSS string or styled-components function to be injected into this component. */
        css?: StyledProp<DataTableBodyProps>;
        /**
         * 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 DataTableBodyStyle = styled.tbody`
    ${injectCss}
`;

const DataTableBody: React.FC<DataTableBodyProps> = ({ mergeCss, css: bodyCss = "", ...otherProps }) => {
    const { applyStyledProp } = applyPropBuilder({ ...otherProps }, { component: "dataTable" });
    const { theme } = otherProps;
    const resolvedMergeCss = mergeCss ?? theme?.dataTable.defaultProps?.mergeCss;
    return (
        <DataTableContext.Consumer>
            {() => (
                <DataTableBodyStyle
                    {...otherProps}
                    css={css`
                        ${applyStyledProp(["cssOverrides", "body"], resolvedMergeCss)}
                        ${bodyCss}
                    `}
                />
            )}
        </DataTableContext.Consumer>
    );
};

export default withTheme(DataTableBody);
