import { createTheme, createThemeContract } from '@vanilla-extract/css';
import { calc } from '@vanilla-extract/css-utils';
import { recipe } from '@vanilla-extract/recipes';

import { vars } from '../css';

const menuVars = vars.components.menu;

export const localMenuVars = createThemeContract({
  base: {
    paddingX: null,
    paddingY: null,
    fontSize: null,
    width: null,
  },
  item: {
    paddingX: null,
    paddingY: null,
  },
  subBase: {
    paddingLeft: null,
  },
  subItem: {
    paddingX: null,
  },
});

export const baseTheme = createTheme(localMenuVars, {
  base: {
    paddingX: menuVars.space.basePaddingX,
    paddingY: menuVars.space.basePaddingY,
    fontSize: menuVars.fontSizes.base,
    width: menuVars.sizes.baseWidth,
  },
  item: {
    paddingX: menuVars.space.itemPaddingX,
    paddingY: menuVars.space.itemPaddingY,
  },
  subBase: {
    paddingLeft: menuVars.space.subBasePaddingLeft,
  },
  subItem: {
    paddingX: menuVars.space.subItemPaddingX,
  },
});

export const baseCompactTheme = createTheme(localMenuVars, {
  base: {
    paddingX: menuVars.space.compactBasePaddingX,
    paddingY: menuVars.space.compactBasePaddingY,
    fontSize: menuVars.fontSizes.compact,
    width: menuVars.sizes.compactBaseWidth,
  },
  item: {
    paddingX: menuVars.space.compactItemPaddingX,
    paddingY: menuVars.space.compactItemPaddingY,
  },
  subBase: {
    paddingLeft: menuVars.space.compactBasePaddingX,
  },
  subItem: {
    paddingX: menuVars.space.compactItemPaddingX,
  },
});

export const menu = recipe({
  base: [
    baseTheme,
    {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'stretch',
      width: localMenuVars.base.width,
      padding: `${localMenuVars.base.paddingY} ${localMenuVars.base.paddingX}`,

      backgroundColor: vars.colors.base,
      color: vars.colors['base-text-strong'],

      border: `${menuVars.borderWidths.base} solid currentColor`,
      outline: 'none',
      listStyle: 'none',

      fontSize: localMenuVars.base.fontSize,

      selectors: {
        '& &': {
          width: '100%',
          border: 'none',
          paddingLeft: localMenuVars.subBase.paddingLeft,
          paddingTop: 0,
          paddingRight: 0,
          paddingBottom: 0,
          fontSize: calc.multiply(localMenuVars.base.fontSize, 0.875),

          vars: {
            [localMenuVars.item.paddingX]: localMenuVars.subItem.paddingX,
          },
        },
      },
    },
  ],

  variants: {
    compact: {
      true: baseCompactTheme,
    },
  },
});