import { createThemeContract, fallbackVar, style } from "@vanilla-extract/css";
import { appkit } from "../layers.css.ts";

export const listViewTheme = createThemeContract({
  headingFont: null,
  headingSize: null,
  summaryFont: null,
  summarySize: null,
  blockSpace: null,
  inlineSpace: null,
});

export const item = {
  container: style({
    "@layer": {
      [appkit]: {
        display: "flex",
        gap: fallbackVar(listViewTheme.inlineSpace, "1rem"),
      },
    },
  }),

  content: style({
    "@layer": {
      [appkit]: {
        flexGrow: 1,
      },
    },
  }),

  heading: style({
    "@layer": {
      [appkit]: {
        fontFamily: listViewTheme.headingFont,
        fontSize: fallbackVar(listViewTheme.headingSize, "1.25rem"),
        lineHeight: "1lh",
      },
    },
  }),

  summary: style({
    "@layer": {
      [appkit]: {
        fontFamily: listViewTheme.summaryFont,
        fontSize: fallbackVar(listViewTheme.summarySize, "1rem"),
        marginBlockStart: "0.5em",
        lineHeight: 1.25,

        ":empty": {
          display: "none",
        },
      },
    },
  }),
};

const listContainerHook = style({});

export const list = {
  container: style([
    listContainerHook,
    {
      "@layer": {
        [appkit]: {
          display: "flex",
          flexDirection: "column",
          gap: fallbackVar(listViewTheme.blockSpace, "1.5rem"),

          ":empty": {
            display: "none",
          },
        },
      },
    },
  ]),

  empty: style({
    "@layer": {
      [appkit]: {
        display: "none",

        selectors: {
          [`${listContainerHook}:empty + &`]: {
            display: "initial",
          },
        },
      },
    },
  }),
};