import textFieldMappings from '@descope-ui/descope-text-field/mappings';
import {
  createStyleMixin,
  draggableMixin,
  createProxy,
  proxyInputMixin,
  componentNameValidationMixin,
} from '../../mixins';
import { compose } from '../../helpers';
import { getComponentName } from '../../helpers/componentHelpers';
import {
  inputFloatingLabelStyle,
  resetInputLabelPosition,
  resetInputOverrides,
  useHostExternalPadding,
} from '../../helpers/themeHelpers/resetHelpers';

export const componentName = getComponentName('number-field');

export const NumberFieldClass = compose(
  createStyleMixin({
    mappings: textFieldMappings,
  }),
  draggableMixin,
  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
  componentNameValidationMixin
)(
  createProxy({
    slots: ['', 'prefix', 'suffix'],
    wrappedEleName: 'vaadin-number-field',
    style: () => `
			:host {
				display: inline-block;
				max-width: 100%;
				padding: calc(var(${NumberFieldClass.cssVarList.inputOutlineWidth}) + var(${
          NumberFieldClass.cssVarList.inputOutlineOffset
        }));
			}
      ${resetInputLabelPosition('vaadin-number-field')}
			${useHostExternalPadding(NumberFieldClass.cssVarList)}
			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
      ${inputFloatingLabelStyle()}

      vaadin-number-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
        opacity: 0;
      }
      vaadin-number-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
        opacity: 0;
      }
		`,
    excludeAttrsSync: ['tabindex', 'style'],
    componentName,
  })
);
