import {
  createStyleMixin,
  draggableMixin,
  createProxy,
  proxyInputMixin,
  componentNameValidationMixin,
} from '../../mixins';
import { compose } from '../../helpers';
import { getComponentName } from '../../helpers/componentHelpers';
import {
  resetInputContainer,
  resetInputCursor,
  resetInputLabelPosition,
  resetInputField,
  resetInputPlaceholder,
  useHostExternalPadding,
} from '../../helpers/themeHelpers/resetHelpers';

export const componentName = getComponentName('text-area');

const {
  host,
  label,
  placeholder,
  inputField,
  textArea,
  requiredIndicator,
  helperText,
  errorMessage,
} = {
  host: { selector: () => ':host' },
  label: { selector: '::part(label)' },
  placeholder: { selector: 'textarea:placeholder-shown' },
  inputField: { selector: '::part(input-field)' },
  textArea: { selector: '> textarea' },
  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
  helperText: { selector: '::part(helper-text)' },
  errorMessage: { selector: '::part(error-message)' },
};

export const TextAreaClass = compose(
  createStyleMixin({
    mappings: {
      hostWidth: { ...host, property: 'width' },
      hostMinWidth: { ...host, property: 'min-width' },
      hostDirection: { ...host, property: 'direction' },
      fontSize: [host, textArea],
      fontFamily: [label, inputField, helperText, errorMessage],
      labelTextColor: [
        { ...label, property: 'color' },
        { ...label, property: '-webkit-text-fill-color' },
        { ...requiredIndicator, property: 'color' },
      ],
      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
      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' },
      inputBackgroundColor: { ...inputField, property: 'background-color' },
      inputValueTextColor: { ...textArea, property: 'color' },
      inputPlaceholderTextColor: { ...placeholder, property: 'color' },
      inputBorderWidth: { ...inputField, property: 'border-width' },
      inputBorderStyle: { ...inputField, property: 'border-style' },
      inputBorderColor: { ...inputField, property: 'border-color' },
      inputBorderRadius: { ...inputField, property: 'border-radius' },
      inputOutlineStyle: { ...inputField, property: 'outline-Style' },
      inputOutlineColor: { ...inputField, property: 'outline-color' },
      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
      inputOutlineWidth: { ...inputField, property: 'outline-width' },
      inputResizeType: { ...textArea, property: 'resize' },
      inputMinHeight: { ...textArea, property: 'min-height' },
      inputTextAlign: { ...textArea, property: 'text-align' },
    },
  }),
  draggableMixin,
  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
  componentNameValidationMixin
)(
  createProxy({
    slots: [],
    wrappedEleName: 'vaadin-text-area',
    style: () => `
			:host {
				display: inline-block;
				max-width: 100%;
        box-sizing: border-box;
			}
			textarea {
				height: 100%;
			}
      ${resetInputLabelPosition('vaadin-text-area')}
			${useHostExternalPadding(TextAreaClass.cssVarList)}
			${resetInputContainer('vaadin-text-area')}
			${resetInputField('vaadin-text-area')}
			${resetInputPlaceholder('vaadin-text-area', 'textarea')}
			${resetInputCursor('vaadin-text-area')}
		`,
    excludeAttrsSync: ['tabindex', 'style'],
    componentName,
  })
);
