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

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

export const labelVars = {
  additionalTranslateX: createVar('label-additional-translate-x'),
  additionalTranslateY: createVar('label-additional-translate-y'),
};

export const labelScaleFactor = 14 / 12;

/** Manually calculated height of InputContainer content. */
const defaultInputContainerHeight = '10.5px';

export const label = recipe({
  base: {
    vars: {
      [labelVars.additionalTranslateX]:
        vars.components.inputContainer.space['padding-x'],
      [labelVars.additionalTranslateY]: defaultInputContainerHeight,
    },

    display: 'inline-block',
    maxWidth: calc.divide('100%', labelScaleFactor),

    transform: `scale(${labelScaleFactor}) translate(
      calc(${labelVars.additionalTranslateX} / ${labelScaleFactor}),
      calc(
        (${vars.components.inputContainer.space['padding-y']} + 50% + ${labelVars.additionalTranslateY}) / ${labelScaleFactor}
      )
    )`,
    transformOrigin: 'left top',
    pointerEvents: 'none',
  },

  variants: {
    shrinked: {
      true: {
        transform: 'scale(1) translate(0, 0)',
      },
    },
    animated: {
      true: {
        transition: 'transform 0.2s cubic-bezier(0, 0, 0.2, 1)',
      },
    },
  },
});