import { createVar, globalStyle, style } from '@vanilla-extract/css';
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';

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

export const overlay = style({
  position: 'fixed',
  inset: 0,
  zIndex: vars.zIndices.modal,

  display: 'grid',
  placeItems: 'center',
  overflowY: 'auto',
  padding: `${vars.space[8]} ${vars.space[4]}`,

  backgroundColor: vars.colors.overlay,
});

export const dialogPaddingX = createVar();

export const content = recipe({
  base: {
    vars: {
      [dialogPaddingX]: vars.space[12],
    },

    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    maxWidth: vars.components.dialog.sizes.md,
    maxHeight: '100%',

    borderRadius: 4,
    backgroundColor: vars.colors.base,

    '@media': {
      [breakpoints.sm]: {
        vars: {
          [dialogPaddingX]: vars.space[6],
        },
      },
    },
  },

  variants: {
    isScrollable: {
      true: {
        overflowY: 'auto',
      },
    },
    modal: {
      true: {
        boxShadow: '1px 1px 18px 4px rgba(0, 0, 0, 0.1)',

        ':focus': {
          outline: 'none',
        },
      },
      false: {
        outline: `1px solid ${vars.colors.secondary}`,
      },
    },
    maxWidth: {
      sm: {
        maxWidth: vars.components.dialog.sizes.sm,
      },
      md: {
        maxWidth: vars.components.dialog.sizes.md,
      },
    },
  },
});

export type ContentVariants = NonNullable<RecipeVariants<typeof content>>;

export const title = style({
  padding: `${vars.space[9]} ${dialogPaddingX}`,
  borderTopLeftRadius: 'inherit',
  borderTopRightRadius: 'inherit',

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

  fontSize: vars.fontSizes['xl'],
  fontWeight: vars.fontWeights['bold'],

  '@media': {
    [breakpoints.sm]: {
      paddingTop: vars.space[5],
      paddingBottom: vars.space[5],

      fontSize: vars.fontSizes['md'],
    },
  },
});

export const body = style({
  display: 'flex',
  flexDirection: 'column',
  padding: `0 ${dialogPaddingX}`,
  paddingTop: vars.space[10],
  paddingBottom: vars.space[15],
  borderRadius: 'inherit',
  overflowY: 'auto',

  '@media': {
    [breakpoints.sm]: {
      paddingTop: vars.space[5],
      paddingBottom: vars.space[10],
    },
  },
});

globalStyle(`${body} > *:not(:last-child)`, {
  marginBottom: vars.space[10],
});