const {
  host,
  label,
  placeholder,
  requiredIndicator,
  inputField,
  input,
  inputMask,
  helperText,
  errorMessage,
  disabledPlaceholder,
  inputDisabled,
  inputIcon,
  externalInput,
  externalInputDisabled,
  externalPlaceholder,
  externalDisabledPlaceholder,
} = {
  host: { selector: () => ':host' },
  label: { selector: '::part(label)' },
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
  placeholder: [
    { selector: '> input:placeholder-shown' },
    { selector: () => ':host::slotted(input:placeholder-shown)' },
  ],
  disabledPlaceholder: { selector: '> input:disabled::placeholder' },
  inputField: { selector: '::part(input-field)' },
  input: { selector: 'input' },
  inputMask: { selector: '::part(input-field)::before' },
  inputDisabled: { selector: 'input:disabled' },
  helperText: { selector: '::part(helper-text)' },
  errorMessage: { selector: '::part(error-message)' },
  inputIcon: { selector: 'vaadin-icon' },
  externalInput: { selector: () => '::slotted(input)' },
  externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
  externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
  externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
};

export default {
  // we apply font-size also on the host so we can set its width with em
  fontSize: [{}, host],
  fontFamily: [label, inputField, helperText, errorMessage],

  labelFontSize: { ...label, property: 'font-size' },
  labelFontWeight: { ...label, property: 'font-weight' },

  inputValueFontWeight: [
    { ...input, property: 'font-weight' },
    { ...externalInput, property: 'font-weight' },
  ],
  inputPlaceholderFontWeight: [
    { selector: () => ':host input:placeholder-shown', property: 'font-weight' },
    { ...externalPlaceholder, property: 'font-weight' },
  ],
  helperTextFontWeight: { ...helperText, property: 'font-weight' },
  errorMessageFontWeight: { ...errorMessage, property: 'font-weight' },

  labelTextColor: [
    { ...label, property: 'color' },
    { ...requiredIndicator, property: 'color' },
    { ...label, property: '-webkit-text-fill-color' },
    { ...requiredIndicator, property: '-webkit-text-fill-color' },
  ],

  hostWidth: { ...host, property: 'width' },
  hostMinWidth: { ...host, property: 'min-width' },
  hostDirection: { ...host, property: 'direction' },
  inputDirection: { ...input, property: 'direction' },

  inputBackgroundColor: [
    { ...inputField, property: 'background-color' },
    { ...inputMask, property: 'background-color' },
  ],

  errorMessageTextColor: { ...errorMessage, property: 'color' },
  errorMessageIcon: { ...errorMessage, property: 'background-image' },
  errorMessageIconSize: { ...errorMessage, property: 'background-size' },
  errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
  errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
  errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
  errorMessageFontSize: { ...errorMessage, property: 'font-size' },

  helperTextColor: { ...helperText, property: '-webkit-text-fill-color' },

  inputValueTextColor: [
    { ...inputField, property: 'color' },
    { ...inputDisabled, property: '-webkit-text-fill-color' },
    { ...externalInputDisabled, property: '-webkit-text-fill-color' },
  ],
  inputCaretTextColor: [
    { ...input, property: 'caret-color' },
    { ...externalInput, property: 'caret-color' },
  ],

  labelRequiredIndicator: { ...requiredIndicator, property: 'content' },

  inputBorderColor: { ...inputField, property: 'border-color' },
  inputBorderWidth: { ...inputField, property: 'border-width' },
  inputBorderStyle: { ...inputField, property: 'border-style' },
  inputBorderRadius: { ...inputField, property: 'border-radius' },

  inputHeight: { ...inputField, property: 'height' },
  inputHorizontalPadding: [
    { ...input, property: 'padding-left' },
    { ...input, property: 'padding-right' },
    { ...externalInput, property: 'padding-left' },
    { ...externalInput, property: 'padding-right' },
  ],

  inputOutlineColor: { ...inputField, property: 'outline-color' },
  inputOutlineStyle: { ...inputField, property: 'outline-style' },
  inputOutlineWidth: { ...inputField, property: 'outline-width' },
  inputOutlineOffset: { ...inputField, property: 'outline-offset' },

  textAlign: {},

  inputTextAlign: [
    { ...input, property: 'text-align' },
    { ...externalInput, property: 'text-align' },
  ],

  inputPlaceholderColor: [
    { selector: () => ':host input:placeholder-shown', property: 'color' },
    { ...externalPlaceholder, property: 'color' },
    { ...placeholder, property: 'color' },
    { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
    { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
  ],

  labelPosition: { ...label, property: 'position' },
  labelTopPosition: { ...label, property: 'top' },
  labelHorizontalPosition: [
    { ...label, property: 'left' },
    { ...label, property: 'right' },
  ],
  inputTransformY: { ...label, property: 'transform' },
  inputTransition: { ...label, property: 'transition' },
  marginInlineStart: { ...label, property: 'margin-inline-start' },
  placeholderOpacity: [
    { selector: '> input:placeholder-shown', property: 'opacity' },
    { ...externalPlaceholder, property: 'opacity' },
  ],
  inputVerticalAlignment: [
    { ...inputField, property: 'align-items' },
    { ...externalInput, property: 'align-items' },
  ],
  valueInputHeight: [
    { ...input, property: 'height' },
    { ...externalInput, property: 'height' },
  ],
  valueInputMarginBottom: [
    { ...input, property: 'margin-bottom' },
    { ...externalInput, property: 'margin-bottom' },
  ],

  inputIconOffset: [
    { ...inputIcon, property: 'margin-right' },
    { ...inputIcon, property: 'margin-left' },
  ],
  inputIconSize: { ...inputIcon, property: 'font-size' },
  inputIconColor: { ...inputIcon, property: 'color' },
  inputTextSecurity: [
    { ...input, property: '-webkit-text-security' },
    { ...input, property: 'text-security' },
    { ...externalInput, property: '-webkit-text-security' },
    { ...externalInput, property: 'text-security' },
  ],
};
