import { EnrichedTextClass } from '@descope-ui/descope-enriched-text/class';
import { getComponentName } from '../../../helpers/componentHelpers';
import { compose } from '../../../helpers';
import {
  createStyleMixin,
  proxyInputMixin,
  draggableMixin,
  componentNameValidationMixin,
  createProxy,
} from '../../../mixins';
import { booleanFieldMixin } from '../booleanFieldMixin';
import commonStyles from '../commonStyles';
import { useHostExternalPadding } from '../../../helpers/themeHelpers/resetHelpers';

export const componentName = getComponentName('switch-toggle');

const {
  host,
  component,
  checkboxElement: track,
  checkboxSurface: knob,
  checkboxLabel,
  requiredIndicator,
  helperText,
  errorMessage,
} = {
  host: { selector: () => ':host' },
  requiredIndicator: {
    selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::part(content)::after',
  },
  component: { selector: 'vaadin-checkbox' },
  checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
  checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
  checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
  helperText: { selector: '::part(helper-text)' },
  errorMessage: { selector: '::part(error-message)' },
};

export const SwitchToggleClass = compose(
  createStyleMixin({
    mappings: {
      hostWidth: { ...host, property: 'width' },
      hostDirection: { ...host, property: 'direction' },

      fontSize: [component, checkboxLabel, checkboxLabel],
      fontFamily: [checkboxLabel, helperText, errorMessage],

      labelTextColor: [
        { ...checkboxLabel, property: 'color' },
        { ...checkboxLabel, property: '-webkit-text-fill-color' },
      ],
      labelSpacing: { ...checkboxLabel, property: 'padding-inline-start' },
      labelLineHeight: { ...checkboxLabel, property: 'line-height' },
      labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
      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' },

      trackBorderWidth: { ...track, property: 'border-width' },
      trackBorderStyle: { ...track, property: 'border-style' },
      trackBorderColor: { ...track, property: 'border-color' },
      trackBackgroundColor: { ...track, property: 'background-color' },
      trackBorderRadius: { ...track, property: 'border-radius' },
      trackWidth: [{ ...track, property: 'width' }],
      trackHeight: [
        { ...knob, property: 'font-size' },
        { ...track, property: 'height' },
      ],

      knobSize: [
        { ...knob, property: 'width' },
        { ...knob, property: 'height' },
      ],
      knobTextColor: { ...knob, property: 'color' },
      knobRadius: { ...knob, property: 'border-radius' },
      knobTransitionDuration: { ...knob, property: 'transition' },
      knobColor: { ...knob, property: 'background-color' },
      knobTopOffset: { ...knob, property: 'top' },
      knobLeftOffset: { ...knob, property: 'left' },

      inputOutlineWidth: { ...track, property: 'outline-width' },
      inputOutlineOffset: { ...track, property: 'outline-offset' },
      inputOutlineColor: { ...track, property: 'outline-color' },
      inputOutlineStyle: { ...track, property: 'outline-style' },
    },
  }),
  draggableMixin,
  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
  componentNameValidationMixin,
  booleanFieldMixin
)(
  createProxy({
    slots: [],
    wrappedEleName: 'vaadin-text-field',
    style: () => `
			${commonStyles(SwitchToggleClass.cssVarList)}
			${useHostExternalPadding(SwitchToggleClass.cssVarList)}

      :host {
				display: inline-flex;
				max-width: 100%;
      }

      :host ::part(error-message) {
        direction: ltr;
      }

      vaadin-text-field {
        width: 100%;
      }

      vaadin-text-field::part(input-field)::after {
        content: none;
      }

      descope-boolean-field-internal {
				padding: 0;
        width: 100%;
      }

      vaadin-text-field::part(input-field) {
        cursor: pointer;
      }

      vaadin-checkbox {
        cursor: pointer;
      }

      vaadin-checkbox [slot="label"]:not(:empty) {
        cursor: pointer;
			}

      vaadin-checkbox::part(checkbox) {
        margin: 0;
			}

      vaadin-checkbox::part(checkbox)::before {
        content: '';
			}

      vaadin-checkbox[active]::part(checkbox) {
				transform: none;
			}

      vaadin-checkbox::part(checkbox)::after {
				position: absolute;
				opacity: 1;
				content: '';
			}
		`,
    excludeAttrsSync: ['label', 'tabindex', 'style'],
    componentName,
  })
);
