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

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

export const inputContainer = recipe({
  base: {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'space-between',

    padding: `0 ${vars.components.inputContainer.space['padding-x']}`,
    paddingTop: vars.components.inputContainer.space['padding-y'],
    borderBottom: '2px solid currentColor',

    fontSize: vars.components.inputContainer.fontSizes.base,
    fontWeight: vars.components.inputContainer.fontWeights.base,

    transition: 'all 0.2s',

    ':hover': {
      backgroundColor: vars.components.inputContainer.colors.hover,
    },
  },

  variants: {
    focused: {
      true: {
        borderColor: vars.components.inputContainer.colors.border,
        borderBottomStyle: 'dashed',

        ':hover': {
          backgroundColor: 'transparent',
        },
      },
    },

    disabled: {
      true: {
        opacity: 0.5,
        cursor: 'not-allowed',

        ':hover': {
          backgroundColor: 'transparent',
        },
      },
    },

    full: {
      true: {
        width: '100%',
      },
    },
  },
});

export type InputContainerVariants = NonNullable<
  RecipeVariants<typeof inputContainer>
>;

export const inputAddon = recipe({
  base: {
    display: 'inline-flex',
    padding: `0 ${vars.space[2]}`,
  },

  variants: {
    position: {
      start: {
        marginLeft: calc.negate(
          vars.components.inputContainer.space['padding-x'],
        ),
      },
      end: {
        marginRight: calc.negate(
          vars.components.inputContainer.space['padding-x'],
        ),
      },
    },

    pointerEvents: {
      none: {
        pointerEvents: 'none',
      },
      auto: {
        pointerEvents: 'auto',
      },
    },
  },
});

export type InputAddonVariants = NonNullable<RecipeVariants<typeof inputAddon>>;