import { mergeProps, splitProps, useContext } from "solid-js";
import classNames from "./classnames";
import Col from "./Col";
import FormContext from "./FormContext";
import { useBootstrapPrefix } from "./ThemeProvider";
import { Dynamic } from "solid-js/web";
const defaultProps = {
    as: "label",
    column: false,
    visuallyHidden: false,
};
const FormLabel = (p) => {
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "as",
        "bsPrefix",
        "column",
        "visuallyHidden",
        "className",
        "htmlFor",
    ]);
    const formContext = useContext(FormContext);
    const bsPrefix = useBootstrapPrefix(local.bsPrefix, "form-label");
    let columnClass = "col-form-label";
    if (typeof local.column === "string")
        columnClass = `${columnClass} ${columnClass}-${local.column}`;
    const classes = () => classNames(local.className, bsPrefix, local.visuallyHidden && "visually-hidden", local.column && columnClass);
    return !!local.column ? (<Col as="label" className={classes()} htmlFor={local.htmlFor || formContext.controlId} {...props}>
      {props.children}
    </Col>) : (<Dynamic component={local.as} className={classes()} htmlFor={local.htmlFor || formContext.controlId} {...props}>
      {props.children}
    </Dynamic>);
};
export default FormLabel;