import type { ReactNode } from "react";
import FieldLabel from "./help/FieldLabel";
import ActionToolbar from "./ActionToolbar";

type PolicySectionProps = {
  title?: ReactNode;
  summary?: ReactNode;
  actions?: ReactNode;
  children: ReactNode;
  className?: string;
  headingClassName?: string;
};

type PolicyTableProps = {
  children: ReactNode;
  fieldLabel: ReactNode;
  settingLabel: ReactNode;
  effectiveLabel?: ReactNode;
  lowerLevelLabel?: ReactNode;
  showEffectiveColumn?: boolean;
  showAllowColumn?: boolean;
  className?: string;
  rowClassName?: string;
  headerClassName?: string;
};

type PolicyRowProps = {
  label: ReactNode;
  help?: ReactNode;
  note?: ReactNode;
  control: ReactNode;
  effective?: ReactNode;
  effectiveHelp?: ReactNode;
  allowControl?: ReactNode;
  className?: string;
  labelClassName?: string;
  controlClassName?: string;
  effectiveClassName?: string;
  effectiveCellClassName?: string;
};

export function PolicySection({
  title,
  summary,
  actions,
  children,
  className = "",
  headingClassName = ""
}: PolicySectionProps) {
  return (
    <section className={["policy-section", className].filter(Boolean).join(" ")}>
      {(title || summary || actions) &&
      <ActionToolbar surface="section-header" className={headingClassName}>
          {title && <h3>{title}</h3>}
          {actions ?? summary}
        </ActionToolbar>
      }
      {children}
    </section>);

}

export function PolicyTable({
  children,
  fieldLabel,
  settingLabel,
  effectiveLabel,
  lowerLevelLabel,
  showEffectiveColumn = false,
  showAllowColumn = false,
  className = "",
  rowClassName = "",
  headerClassName = ""
}: PolicyTableProps) {
  return (
    <div className={[
    "policy-table",
    showEffectiveColumn ? "with-effective-column" : "",
    showAllowColumn ? "with-allow-column" : "",
    className].
    filter(Boolean).join(" ")}>
      <div className={[rowClassName, "policy-row", "policy-row-header", headerClassName].filter(Boolean).join(" ")}>
        <span>{fieldLabel}</span>
        <span>{settingLabel}</span>
        {showEffectiveColumn && <span>{effectiveLabel}</span>}
        {showAllowColumn && <span>{lowerLevelLabel}</span>}
      </div>
      {children}
    </div>);

}

export function PolicyRow({
  label,
  help,
  note,
  control,
  effective,
  effectiveHelp,
  allowControl,
  className = "",
  labelClassName = "",
  controlClassName = "",
  effectiveClassName = "",
  effectiveCellClassName = ""
}: PolicyRowProps) {
  return (
    <div className={["policy-row", className].filter(Boolean).join(" ")}>
      <div className={["policy-field-label", labelClassName].filter(Boolean).join(" ")}>
        {help ?
        <FieldLabel className="policy-field-title" help={help}>{label}</FieldLabel> :
        <strong>{label}</strong>
        }
        {note && (typeof note === "string" ? <small>{note}</small> : note)}
      </div>
      <div className={["policy-control", controlClassName].filter(Boolean).join(" ")}>{control}</div>
      {effective !== undefined &&
      <div className={["policy-effective-cell", effectiveCellClassName].filter(Boolean).join(" ")}>
          {effectiveHelp ?
        <FieldLabel className={["policy-effective-value", effectiveClassName].filter(Boolean).join(" ")} help={effectiveHelp}>
              {effective}
            </FieldLabel> :
        <span className={["policy-effective-value", effectiveClassName].filter(Boolean).join(" ")}>
              {effective}
            </span>
        }
        </div>
      }
      {allowControl}
    </div>);

}