import { cva } from "../lib/cva";
import { getMotionRecipeClassNames } from "../lib/motion";

export const dataTableRootVariants = cva("grid gap-4 text-[var(--color-foreground)]");

export const dataTableToolbarVariants = cva(
  "flex flex-wrap items-center justify-between gap-3"
);

export const dataTableContentVariants = cva(
  [
    "overflow-hidden rounded-[var(--ui-card-radius)] border border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)] shadow-[var(--ui-card-default-shadow)] [border-width:var(--ui-card-border-width)]",
    getMotionRecipeClassNames("transition", "ring")
  ],
  {
    variants: {
      loading: {
        false: "",
        true: "opacity-90"
      }
    },
    defaultVariants: {
      loading: false
    }
  }
);

export const dataTableTableVariants = cva("min-w-full border-collapse align-middle");

export const dataTableHeaderVariants = cva(
  "bg-[color-mix(in_oklch,var(--ui-card-subtle-bg)_74%,var(--ui-card-default-bg))]"
);

export const dataTableHeaderCellVariants = cva(
  [
    "px-4 text-sm font-medium uppercase tracking-[var(--tracking-caps)]",
    "text-[var(--color-muted-foreground)]"
  ],
  {
    variants: {
      align: {
        start: "text-left",
        center: "text-center",
        end: "text-right"
      },
      density: {
        comfortable: "py-3",
        compact: "py-2.5 text-xs"
      },
      sortable: {
        false: "",
        true: "select-none"
      }
    },
    defaultVariants: {
      align: "start",
      density: "comfortable",
      sortable: false
    }
  }
);

export const dataTableBodyVariants = cva("");

export const dataTableRowVariants = cva(
  [
    "border-t border-[color-mix(in_oklch,var(--ui-card-default-border)_88%,transparent)]",
    "transition-colors duration-200"
  ],
  {
    variants: {
      interactive: {
        false: "",
        true: "hover:bg-[color-mix(in_oklch,var(--ui-card-subtle-bg)_72%,var(--ui-card-default-bg))]"
      },
      selected: {
        false: "",
        true: "bg-[color-mix(in_oklch,var(--color-primary)_8%,var(--ui-card-default-bg))]"
      }
    },
    defaultVariants: {
      interactive: true,
      selected: false
    }
  }
);

export const dataTableCellVariants = cva(
  "px-4 text-[var(--color-card-foreground)]",
  {
    variants: {
      align: {
        start: "text-left",
        center: "text-center",
        end: "text-right"
      },
      density: {
        comfortable: "py-3 text-sm leading-6",
        compact: "py-2.5 text-[0.8125rem] leading-5"
      }
    },
    defaultVariants: {
      align: "start",
      density: "comfortable"
    }
  }
);

export const dataTableSearchContainerVariants = cva(
  "w-full max-w-[22rem] min-w-[14rem]"
);

export const dataTablePaginationVariants = cva(
  "flex flex-wrap items-center justify-between gap-3 px-4 py-3"
);

export const dataTableSelectionBarVariants = cva(
  [
    "flex flex-wrap items-center justify-between gap-3 rounded-[var(--ui-card-radius)]",
    "border border-[color-mix(in_oklch,var(--color-primary)_24%,var(--ui-card-default-border))] [border-width:var(--ui-card-border-width)]",
    "bg-[color-mix(in_oklch,var(--color-primary)_7%,var(--ui-card-default-bg))] px-4 py-3",
    "shadow-[var(--ui-card-subtle-shadow)]"
  ]
);

export const dataTableStatusVariants = cva(
  "grid min-h-52 place-items-center px-6 py-8"
);