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('checkbox');

const {
  host,
  component,
  checkboxElement,
  checkboxSurface,
  checkboxLabel,
  requiredIndicator,
  checkboxContainer,
  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 CheckboxClass = compose(
  createStyleMixin({
    mappings: {
      hostWidth: { ...host, property: 'width' },
      hostDirection: { ...host, property: 'direction' },

      fontSize: [host, checkboxElement, checkboxLabel],
      fontFamily: [checkboxLabel, helperText, errorMessage],

      labelTextColor: { ...checkboxLabel, property: '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' },

      inputValueTextColor: { ...checkboxSurface, property: 'color' },
      inputBackgroundColor: { ...checkboxElement, property: 'background-color' },

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

      inputOutlineWidth: { ...checkboxElement, property: 'outline-width' },
      inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
      inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
      inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
      inputAlign: { ...checkboxElement, property: 'align-self' },

      inputContainerPadding: { ...component, property: 'padding' },
      inputContainerBackgroundColor: { ...component, property: 'background-color' },
      inputContainerBorderRadius: { ...component, property: 'border-radius' },
      inputContainerBorderWidth: { ...component, property: 'border-width' },
      inputContainerBorderColor: { ...component, property: 'border-color' },
      inputContainerBorderStyle: { ...component, property: 'border-style' },
      inputContainerOutlineWidth: { ...component, property: 'outline-width' },
      inputContainerOutlineOffset: { ...component, property: 'outline-offset' },
      inputContainerOutlineColor: { ...component, property: 'outline-color' },
      inputContainerOutlineStyle: { ...component, property: 'outline-style' },

      inputSize: [
        { ...checkboxElement, property: 'width' },
        { ...checkboxElement, property: 'height' },
        { ...checkboxSurface, property: 'font-size' },
        { ...component, property: 'font-size' },
      ],
    },
  }),
  draggableMixin,
  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
  componentNameValidationMixin,
  booleanFieldMixin
)(
  createProxy({
    slots: [],
    wrappedEleName: 'vaadin-text-field',
    style: () => `
			${commonStyles(CheckboxClass.cssVarList)}
      ${useHostExternalPadding(CheckboxClass.cssVarList)}

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

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

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

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

      :host([full-width]) vaadin-checkbox {
        flex-grow: 1;
      }

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

      vaadin-checkbox::part(checkbox)::after {
        top: 0;
        left: 0;
        -webkit-text-fill-color: initial;
      }

       vaadin-checkbox label {
        -webkit-text-fill-color: initial;
      }

      vaadin-text-field::part(input-field)::after {
        content: none;
      }
    `,
    excludeAttrsSync: ['label', 'tabindex', 'style'],
    componentName,
  })
);
