import { LitElement } from '@lion/core';
import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
import { getFormControlMembers } from '@lion/form-core/test-helpers';
import sinon from 'sinon';
import {
  MaxLength,
  MinLength,
  Required,
  ResultValidator,
  Unparseable,
  ValidateMixin,
  Validator,
} from '../index.js';
import {
  AlwaysInvalid,
  AlwaysValid,
  AsyncAlwaysInvalid,
  AsyncAlwaysValid,
} from '../test-helpers/index.js';
import '../define.js';

/**
 * @typedef {import('../').LionField} LionField
 */

/**
 * @param {{tagString?: string | null, lightDom?: string}} [customConfig]
 */
export function runValidateMixinSuite(customConfig) {
  const cfg = {
    tagString: null,
    ...customConfig,
  };

  const lightDom = cfg.lightDom || '';

  class ValidateElement extends ValidateMixin(LitElement) {
    connectedCallback() {
      super.connectedCallback();
      const inputNode = document.createElement('input');
      inputNode.slot = 'input';
      this.appendChild(inputNode);
    }
  }

  const tagString = cfg.tagString || defineCE(ValidateElement);
  const tag = unsafeStatic(tagString);

  describe('ValidateMixin', () => {
    /**
     *   Terminology
     *
     * - *validatable-field*
     *   The element ('this') the ValidateMixin is applied on.
     *
     * - *input-node*
     *   The 'this._inputNode' property (usually a getter) that returns/contains a reference to an
     *   interaction element that receives focus, displays the input value, interaction states are
     *   derived from, aria properties are put on and setCustomValidity (if applicable) is called on.
     *   Can be input, textarea, my-custom-slider etc.
     *
     * - *feedback-node*
     *   The 'this._feedbackNode' property (usually a getter) that returns/contains a reference to
     *   the output container for validation feedback. Messages will be written to this element
     *   based on user defined or default validity feedback visibility conditions.
     *
     * - *show-{type}-feedback-condition*
     *   The 'this.hasErrorVisible value that stores whether the
     *   feedback for the particular validation type should be shown to the end user.
     */

    describe('Validation initiation', () => {
      it('throws and console.errors if adding not Validator instances to the validators array', async () => {
        // we throw and console error as constructor throw are not visible to the end user
        const stub = sinon.stub(console, 'error');
        const el = /** @type {ValidateElement} */ (await fixture(html`<${tag}></${tag}>`));
        const errorMessage =
          'Validators array only accepts class instances of Validator. Type "array" found. This may be caused by having multiple installations of @lion/form-core.';
        expect(() => {
          // @ts-expect-error putting the wrong value on purpose
          el.validators = [[new Required()]];
        }).to.throw(errorMessage);
        expect(stub.args[0][0]).to.equal(errorMessage);

        const errorMessage2 =
          'Validators array only accepts class instances of Validator. Type "string" found. This may be caused by having multiple installations of @lion/form-core.';
        expect(() => {
          // @ts-expect-error because we purposely put a wrong type
          el.validators = ['required'];
        }).to.throw(errorMessage2);
        expect(stub.args[1][0]).to.equal(errorMessage2);

        stub.restore();
      });

      it('throws and console error if adding a not supported Validator type', async () => {
        // we throw and console error to improve DX
        const stub = sinon.stub(console, 'error');
        const errorMessage = `This component does not support the validator type "major error" used in "MajorValidator". You may change your validators type or add it to the components "static get validationTypes() {}".`;
        class MajorValidator extends Validator {
          constructor() {
            super();
            this.type = 'major error';
          }

          static get validatorName() {
            return 'MajorValidator';
          }
        }
        const el = /** @type {ValidateElement} */ (await fixture(html`<${tag}></${tag}>`));
        expect(() => {
          el.validators = [new MajorValidator()];
        }).to.throw(errorMessage);
        expect(stub.args[0][0]).to.equal(errorMessage);

        stub.restore();
      });

      it('validates on initialization (once form field has bootstrapped/initialized)', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .validators=${[new Required()]}
          >${lightDom}</${tag}>
        `)
        );
        expect(el.hasFeedbackFor).to.deep.equal(['error']);
      });

      it('revalidates when ".modelValue" changes', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .validators=${[new AlwaysValid()]}
            .modelValue=${'myValue'}
          >${lightDom}</${tag}>
        `)
        );

        const validateSpy = sinon.spy(el, 'validate');
        el.modelValue = 'x';
        expect(validateSpy.callCount).to.equal(1);
      });

      it('revalidates when child ".modelValue" changes', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            ._repropagationRole="${'fieldset'}"
            .validators=${[new AlwaysValid()]}
            .modelValue=${'myValue'}
          ><lion-field id="child"><input slot="input"></lion-field></${tag}>
        `)
        );
        const validateSpy = sinon.spy(el, 'validate');
        /** @type {LionField} */ (el.querySelector('#child')).modelValue = 'test';
        await el.updateComplete;
        expect(validateSpy.callCount).to.equal(1);
      });

      it('revalidates when ".validators" changes', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .validators=${[new AlwaysValid()]}
            .modelValue=${'myValue'}
          >${lightDom}</${tag}>
        `)
        );

        const validateSpy = sinon.spy(el, 'validate');
        el.validators = [new MinLength(3)];
        expect(validateSpy.callCount).to.equal(1);
      });

      it('clears current results when ".modelValue" changes', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .validators=${[new AlwaysValid()]}
            .modelValue=${'myValue'}
          >${lightDom}</${tag}>
        `)
        );

        // @ts-ignore [allow-private] in test
        const clearSpy = sinon.spy(el, '__clearValidationResults');
        const validateSpy = sinon.spy(el, 'validate');
        el.modelValue = 'x';
        expect(clearSpy.callCount).to.equal(1);
        expect(validateSpy.args[0][0]).to.eql({
          clearCurrentResult: true,
        });
      });

      /**
       * Inside "Validator integration" we test reinitiation on Validator param change
       */
    });

    describe('Validation process: internal flow', () => {
      it('firstly checks for empty values', async () => {
        const alwaysValid = new AlwaysValid();
        const alwaysValidExecuteSpy = sinon.spy(alwaysValid, 'execute');
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag} .validators=${[alwaysValid]}>${lightDom}</${tag}>
        `)
        );
        // @ts-ignore [allow-private] in test
        const isEmptySpy = sinon.spy(el, '__isEmpty');
        const validateSpy = sinon.spy(el, 'validate');
        el.modelValue = '';
        expect(validateSpy.callCount).to.equal(1);
        expect(alwaysValidExecuteSpy.callCount).to.equal(0);
        expect(isEmptySpy.callCount).to.equal(1);

        el.modelValue = 'nonEmpty';
        expect(validateSpy.callCount).to.equal(2);
        expect(alwaysValidExecuteSpy.callCount).to.equal(1);
        expect(isEmptySpy.callCount).to.equal(2);
      });

      it('secondly checks for synchronous Validators: creates RegularValidationResult', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag} .validators=${[new AlwaysValid()]}>${lightDom}</${tag}>
        `)
        );
        // @ts-ignore [allow-private] in test
        const isEmptySpy = sinon.spy(el, '__isEmpty');
        // @ts-ignore [allow-private] in test
        const syncSpy = sinon.spy(el, '__executeSyncValidators');
        el.modelValue = 'nonEmpty';
        expect(isEmptySpy.calledBefore(syncSpy)).to.be.true;
      });

      it('thirdly schedules asynchronous Validators: creates RegularValidationResult', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag} .validators=${[new AlwaysValid(), new AsyncAlwaysValid()]}>
            ${lightDom}
          </${tag}>
        `)
        );
        // @ts-ignore [allow-private] in test
        const syncSpy = sinon.spy(el, '__executeSyncValidators');
        // @ts-ignore [allow-private] in test
        const asyncSpy = sinon.spy(el, '__executeAsyncValidators');
        el.modelValue = 'nonEmpty';
        expect(syncSpy.calledBefore(asyncSpy)).to.be.true;
      });

      it('finally checks for ResultValidators: creates TotalValidationResult', async () => {
        class MyResult extends ResultValidator {
          static get validatorName() {
            return 'ResultValidator';
          }
        }

        let el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .validators=${[new AlwaysValid(), new MyResult()]}>
            ${lightDom}
          </${tag}>
        `)
        );

        // @ts-ignore [allow-private] in test
        const syncSpy = sinon.spy(el, '__executeSyncValidators');
        // @ts-ignore [allow-private] in test
        const resultSpy2 = sinon.spy(el, '__executeResultValidators');

        el.modelValue = 'nonEmpty';
        expect(syncSpy.calledBefore(resultSpy2)).to.be.true;

        el = await fixture(html`
          <${tag}
            .validators=${[new AsyncAlwaysValid(), new MyResult()]}>
            ${lightDom}
          </${tag}>
        `);

        // @ts-ignore [allow-private] in test
        const asyncSpy = sinon.spy(el, '__executeAsyncValidators');
        // @ts-ignore [allow-private] in test
        const resultSpy = sinon.spy(el, '__executeResultValidators');

        el.modelValue = 'nonEmpty';
        expect(resultSpy.callCount).to.equal(1);
        expect(asyncSpy.callCount).to.equal(1);
        await el.validateComplete;
        expect(resultSpy.callCount).to.equal(2);
      });

      describe('Finalization', () => {
        it('fires private "validate-performed" event on every cycle', async () => {
          const el = /** @type {ValidateElement} */ (
            await fixture(html`
            <${tag} .validators=${[new AlwaysValid(), new AsyncAlwaysInvalid()]}>
              ${lightDom}
            </${tag}>
          `)
          );
          const cbSpy = sinon.spy();
          el.addEventListener('validate-performed', cbSpy);
          el.modelValue = 'nonEmpty';
          expect(cbSpy.callCount).to.equal(1);
        });

        it('resolves ".validateComplete" Promise', async () => {
          const el = /** @type {ValidateElement} */ (
            await fixture(html`
            <${tag} .validators=${[new AsyncAlwaysInvalid()]}>
              ${lightDom}
            </${tag}>
          `)
          );
          el.modelValue = 'nonEmpty';
          // @ts-ignore [allow-private] in test
          const validateResolveSpy = sinon.spy(el, '__validateCompleteResolve');
          await el.validateComplete;
          expect(validateResolveSpy.callCount).to.equal(1);
        });
      });
    });

    describe('Validator Integration', () => {
      class IsCat extends Validator {
        /**
         * @param  {...any} args
         */
        constructor(...args) {
          super(...args);
          /**
           *
           * @param {string} modelValue
           * @param {{number: number}} [param]
           */
          this.execute = (modelValue, param) => {
            const validateString = param && param.number ? `cat${param.number}` : 'cat';
            const showError = modelValue !== validateString;
            return showError;
          };
        }

        static get validatorName() {
          return 'IsCat';
        }
      }

      class OtherValidator extends Validator {
        /**
         * @param  {...any} args
         */
        constructor(...args) {
          super(...args);
          this.execute = () => true;
        }

        static get validatorName() {
          return 'otherValidator';
        }
      }

      it('Validators will be called with ".modelValue" as first argument', async () => {
        const otherValidator = new OtherValidator();
        const otherValidatorSpy = sinon.spy(otherValidator, 'execute');
        await fixture(html`
          <${tag}
            .validators=${[new Required(), otherValidator]}
            .modelValue=${'model'}
          >${lightDom}</${tag}>
        `);
        // @ts-expect-error weird sinon type error..
        expect(otherValidatorSpy.calledWith('model')).to.be.true;
      });

      it('Validators will be called with viewValue as first argument when modelValue is unparseable', async () => {
        const otherValidator = new OtherValidator();
        const otherValidatorSpy = sinon.spy(otherValidator, 'execute');
        await fixture(html`
          <${tag}
            .validators=${[new Required(), otherValidator]}
            .modelValue=${new Unparseable('view')}
          >${lightDom}</${tag}>
        `);
        // @ts-expect-error weird sinon type error..
        expect(otherValidatorSpy.calledWith('view')).to.be.true;
      });

      it('Validators will be called with param as a second argument', async () => {
        const param = { number: 5 };
        const validator = new IsCat(param);
        const executeSpy = sinon.spy(validator, 'execute');
        await fixture(html`
          <${tag}
            .validators=${[validator]}
            .modelValue=${'cat'}
          >${lightDom}</${tag}>
        `);
        expect(executeSpy.args[0][1]).to.equal(param);
      });

      it('Validators will be called with a config that has { node } as a third argument', async () => {
        const validator = new IsCat();
        const executeSpy = sinon.spy(validator, 'execute');
        const el = await fixture(html`
          <${tag}
            .validators=${[validator]}
            .modelValue=${'cat'}
          >${lightDom}</${tag}>
        `);
        // @ts-expect-error another sinon type problem
        expect(executeSpy.args[0][2].node).to.equal(el);
      });

      it('Validators will not be called on empty values', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag} .validators=${[new IsCat()]}>${lightDom}</${tag}>
        `)
        );

        el.modelValue = 'cat';
        expect(el.validationStates.error.IsCat).to.be.undefined;
        el.modelValue = 'dog';
        expect(el.validationStates.error.IsCat).to.be.true;
        el.modelValue = '';
        expect(el.validationStates.error.IsCat).to.be.undefined;
      });

      it('Validators get retriggered on parameter change', async () => {
        const isCatValidator = new IsCat('Felix');
        const catSpy = sinon.spy(isCatValidator, 'execute');
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .validators=${[isCatValidator]}
            .modelValue=${'cat'}
          >${lightDom}</${tag}>
        `)
        );
        el.modelValue = 'cat';
        expect(catSpy.callCount).to.equal(1);
        isCatValidator.param = 'Garfield';
        expect(catSpy.callCount).to.equal(2);
      });
    });

    describe('Async Validator Integration', () => {
      /** @type {Promise<any>} */
      let asyncVPromise;
      /** @type {function} */
      let asyncVResolve;

      beforeEach(() => {
        asyncVPromise = new Promise(resolve => {
          asyncVResolve = resolve;
        });
      });

      class IsAsyncCat extends Validator {
        static get validatorName() {
          return 'delayed-cat';
        }

        static get async() {
          return true;
        }

        /**
         * @desc the function that determines the validator. It returns true when
         * the Validator is "active", meaning its message should be shown.
         * @param {string} modelValue
         */
        async execute(modelValue) {
          await asyncVPromise;
          const hasError = modelValue !== 'cat';
          return hasError;
        }
      }

      // default execution trigger is keyup (think of password availability backend)
      // can configure execution trigger (blur, etc?)
      it('handles "execute" functions returning promises', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .modelValue=${'dog'}
            .validators=${[new IsAsyncCat()]}>
          ${lightDom}
          </${tag}>
        `)
        );

        const validator = el.validators[0];
        expect(validator instanceof Validator).to.be.true;
        expect(el.hasFeedbackFor).to.deep.equal([]);
        asyncVResolve();
        await aTimeout(0);
        expect(el.hasFeedbackFor).to.deep.equal(['error']);
      });

      it('sets ".isPending/[is-pending]" when validation is in progress', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag} .modelValue=${'dog'}>${lightDom}</${tag}>
        `)
        );
        expect(el.isPending).to.be.false;
        expect(el.hasAttribute('is-pending')).to.be.false;

        el.validators = [new IsAsyncCat()];
        expect(el.isPending).to.be.true;
        await aTimeout(0);
        expect(el.hasAttribute('is-pending')).to.be.true;

        asyncVResolve();
        await aTimeout(0);
        expect(el.isPending).to.be.false;
        expect(el.hasAttribute('is-pending')).to.be.false;
      });

      // TODO: 'mock' these methods without actually waiting for debounce?
      it.skip('debounces async validation for performance', async () => {
        const asyncV = new IsAsyncCat();
        const asyncVExecuteSpy = sinon.spy(asyncV, 'execute');

        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag} .modelValue=${'dog'}>
            ${lightDom}
          </${tag}>
        `)
        );
        // debounce started
        el.validators = [asyncV];
        expect(asyncVExecuteSpy.called).to.equal(0);
        // TODO: consider wrapping debounce in instance/ctor function to make spying possible
        // await debounceFinish
        expect(asyncVExecuteSpy.called).to.equal(1);

        // New validation cycle. Now change modelValue inbetween, so validation is retriggered.
        asyncVExecuteSpy.resetHistory();
        el.modelValue = 'dogger';
        expect(asyncVExecuteSpy.called).to.equal(0);
        el.modelValue = 'doggerer';
        // await original debounce period...
        expect(asyncVExecuteSpy.called).to.equal(0);
        // await original debounce again without changing mv inbetween...
        expect(asyncVExecuteSpy.called).to.equal(1);
      });

      // TODO: nice to have...
      it.skip('developer can configure debounce on FormControl instance', async () => {});

      it.skip('cancels and reschedules async validation on ".modelValue" change', async () => {
        const asyncV = new IsAsyncCat();
        const asyncVAbortSpy = sinon.spy(asyncV, 'abortExecution');

        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag} .modelValue=${'dog'}>
            ${lightDom}
          </${tag}>
        `)
        );
        // debounce started
        el.validators = [asyncV];
        expect(asyncVAbortSpy.called).to.equal(0);
        el.modelValue = 'dogger';
        // await original debounce period...
        expect(asyncVAbortSpy.called).to.equal(1);
      });

      // TODO: nice to have
      it.skip('developer can configure condition for asynchronous validation', async () => {
        const asyncV = new IsAsyncCat();
        const asyncVExecuteSpy = sinon.spy(asyncV, 'execute');

        const el = /** @type {ValidateElement & { isFocused: boolean }} */ (
          await fixture(html`
          <${tag}
            .isFocused=${true}
            .modelValue=${'dog'}
            .validators=${[asyncV]}
            .asyncValidateOn=${
              /** @param {{ formControl: { isFocused: boolean } }} opts */ ({ formControl }) =>
                !formControl.isFocused
            }
            >
          ${lightDom}
          </${tag}>
        `)
        );

        expect(asyncVExecuteSpy.called).to.equal(0);
        el.isFocused = false;
        el.validate();
        expect(asyncVExecuteSpy.called).to.equal(1);
      });
    });

    describe('ResultValidator Integration', () => {
      const MySuccessResultValidator = class extends ResultValidator {
        /**
         * @param  {...any} args
         */
        constructor(...args) {
          super(...args);
          this.type = 'success';
        }

        /**
         *
         * @param {Object} context
         * @param {Validator[]} context.regularValidationResult
         * @param {Validator[]} context.prevShownValidationResult
         * @returns {boolean}
         */
        // eslint-disable-next-line class-methods-use-this
        executeOnResults({ regularValidationResult, prevShownValidationResult }) {
          const errorOrWarning = /** @param {Validator} v */ v =>
            v.type === 'error' || v.type === 'warning';
          const hasErrorOrWarning = !!regularValidationResult.filter(errorOrWarning).length;
          const hasShownErrorOrWarning = !!prevShownValidationResult.filter(errorOrWarning).length;
          return !hasErrorOrWarning && hasShownErrorOrWarning;
        }
      };

      const withSuccessTagString = defineCE(
        class extends ValidateMixin(LitElement) {
          static get validationTypes() {
            return [...super.validationTypes, 'success'];
          }
        },
      );
      const withSuccessTag = unsafeStatic(withSuccessTagString);

      it('calls ResultValidators after regular validators', async () => {
        const resultValidator = new MySuccessResultValidator();
        const resultValidateSpy = sinon.spy(resultValidator, 'executeOnResults');

        // After regular sync Validators
        const validator = new MinLength(3);
        const validateSpy = sinon.spy(validator, 'execute');
        await fixture(html`
          <${withSuccessTag}
            .validators=${[resultValidator, validator]}
            .modelValue=${'myValue'}
          >${lightDom}</${withSuccessTag}>
        `);
        expect(validateSpy.calledBefore(resultValidateSpy)).to.be.true;

        // Also after regular async Validators
        const validatorAsync = new AsyncAlwaysInvalid();
        const validateAsyncSpy = sinon.spy(validatorAsync, 'execute');
        await fixture(html`
        <${withSuccessTag}
          .validators=${[resultValidator, validatorAsync]}
          .modelValue=${'myValue'}
        >${lightDom}</${withSuccessTag}>
      `);
        expect(validateAsyncSpy.calledBefore(resultValidateSpy)).to.be.true;
      });

      it(`provides "regular" ValidationResult and previous FinalValidationResult as input to
        "executeOnResults" function`, async () => {
        const resultValidator = new MySuccessResultValidator();
        const resultValidateSpy = sinon.spy(resultValidator, 'executeOnResults');

        const el = /** @type {ValidateElement} */ (
          await fixture(html`
            <${withSuccessTag}
              .validators=${[new MinLength(3), resultValidator]}
              .modelValue=${'myValue'}
            >${lightDom}</${withSuccessTag}>
          `)
        );
        // @ts-ignore [allow-private] in test
        const prevValidationResult = el.__prevValidationResult;
        // @ts-ignore [allow-private] in test
        const prevShownValidationResult = el.__prevShownValidationResult;
        const regularValidationResult = [
          // @ts-ignore [allow-private] in test
          ...el.__syncValidationResult,
          // @ts-ignore [allow-private] in test
          ...el.__asyncValidationResult,
        ];

        expect(resultValidateSpy.args[0][0]).to.eql({
          regularValidationResult,
          prevValidationResult,
          prevShownValidationResult,
        });
      });

      it('adds ResultValidator outcome as highest prio result to the FinalValidationResult', async () => {
        class AlwaysInvalidResult extends ResultValidator {
          // eslint-disable-next-line class-methods-use-this
          executeOnResults() {
            const hasError = true;
            return hasError;
          }
        }

        const validator = new AlwaysInvalid();
        const resultV = new AlwaysInvalidResult();

        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .validators=${[validator, resultV]}
            .modelValue=${'myValue'}
          >${lightDom}</${tag}>
        `)
        );

        // @ts-ignore [allow-private] in test
        const totalValidationResult = el.__validationResult;
        expect(totalValidationResult).to.eql([resultV, validator]);
      });
    });

    describe('Required Validator integration', () => {
      it('will result in erroneous state when form control is empty', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .validators=${[new Required()]}
            .modelValue=${''}
          >${lightDom}</${tag}>
        `)
        );
        expect(el.validationStates.error.Required).to.be.true;
        expect(el.hasFeedbackFor).to.deep.equal(['error']);

        el.modelValue = 'foo';
        expect(el.validationStates.error.Required).to.be.undefined;
        expect(el.hasFeedbackFor).to.deep.equal([]);
      });

      it('calls private ".__isEmpty" by default', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .validators=${[new Required()]}
            .modelValue=${''}
          >${lightDom}</${tag}>
        `)
        );
        const validator = /** @type {Validator} */ (el.validators.find(v => v instanceof Required));
        const executeSpy = sinon.spy(validator, 'execute');
        // @ts-ignore [allow-private] in test
        const privateIsEmptySpy = sinon.spy(el, '__isEmpty');
        el.modelValue = null;
        expect(executeSpy.callCount).to.equal(0);
        expect(privateIsEmptySpy.callCount).to.equal(1);
      });

      it('calls "._isEmpty" when provided (useful for different modelValues)', async () => {
        class _isEmptyValidate extends ValidateMixin(LitElement) {
          _isEmpty() {
            return this.modelValue.model === '';
          }
        }
        const customRequiredTagString = defineCE(_isEmptyValidate);
        const customRequiredTag = unsafeStatic(customRequiredTagString);

        const el = /** @type {_isEmptyValidate} */ (
          await fixture(html`
          <${customRequiredTag}
            .validators=${[new Required()]}
            .modelValue=${{ model: 'foo' }}
          >${lightDom}</${customRequiredTag}>
        `)
        );

        const providedIsEmptySpy = sinon.spy(el, '_isEmpty');
        el.modelValue = { model: '' };
        expect(providedIsEmptySpy.callCount).to.equal(1);
        expect(el.validationStates.error.Required).to.be.true;
      });

      it('prevents other Validators from being called when input is empty', async () => {
        const alwaysInvalid = new AlwaysInvalid();
        const alwaysInvalidSpy = sinon.spy(alwaysInvalid, 'execute');
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .validators=${[new Required(), alwaysInvalid]}
            .modelValue=${''}
          >${lightDom}</${tag}>
        `)
        );
        expect(alwaysInvalidSpy.callCount).to.equal(0); // __isRequired returned false (invalid)
        el.modelValue = 'foo';
        expect(alwaysInvalidSpy.callCount).to.equal(1); // __isRequired returned true (valid)
      });

      it('adds [aria-required="true"] to "._inputNode"', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .validators=${[new Required()]}
            .modelValue=${''}
          >${lightDom}</${tag}>
        `)
        );
        const { _inputNode } = getFormControlMembers(el);

        expect(_inputNode?.getAttribute('aria-required')).to.equal('true');
        el.validators = [];
        expect(_inputNode?.getAttribute('aria-required')).to.be.null;
      });
    });

    describe('Default (preconfigured) Validators', () => {
      const preconfTagString = defineCE(
        class extends ValidateMixin(LitElement) {
          constructor() {
            super();
            this.defaultValidators = [new AlwaysInvalid()];
          }
        },
      );
      const preconfTag = unsafeStatic(preconfTagString);

      it('can be stored for custom inputs', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
        <${preconfTag}
          .validators=${[new MinLength(3)]}
          .modelValue=${'12'}
        ></${preconfTag}>`)
        );

        expect(el.validationStates.error.AlwaysInvalid).to.be.true;
        expect(el.validationStates.error.MinLength).to.be.true;
      });

      it('can be altered by App Developers', async () => {
        const altPreconfTagString = defineCE(
          class extends ValidateMixin(LitElement) {
            constructor() {
              super();
              this.defaultValidators = [new MinLength(3)];
            }
          },
        );
        const altPreconfTag = unsafeStatic(altPreconfTagString);

        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${altPreconfTag}
            .modelValue=${'12'}
          ></${altPreconfTag}>`)
        );

        expect(el.validationStates.error.MinLength).to.be.true;
        el.defaultValidators[0].param = 2;
        expect(el.validationStates.error.MinLength).to.be.undefined;
      });

      it('can be requested via "._allValidators" getter', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
        <${preconfTag}
          .validators=${[new MinLength(3)]}
        ></${preconfTag}>`)
        );
        const { _allValidators } = getFormControlMembers(el);

        expect(el.validators.length).to.equal(1);
        expect(el.defaultValidators.length).to.equal(1);
        expect(_allValidators.length).to.equal(2);

        expect(_allValidators[0] instanceof MinLength).to.be.true;
        expect(_allValidators[1] instanceof AlwaysInvalid).to.be.true;

        el.validators = [new MaxLength(5)];
        const { _allValidators: _allValidatorsMl } = getFormControlMembers(el);

        expect(_allValidatorsMl[0] instanceof MaxLength).to.be.true;
        expect(_allValidatorsMl[1] instanceof AlwaysInvalid).to.be.true;
      });
    });

    describe('State storage and reflection', () => {
      it('stores validity of individual Validators in ".validationStates.error[validator.validatorName]"', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .modelValue=${'a'}
            .validators=${[new MinLength(3), new AlwaysInvalid()]}
          >${lightDom}</${tag}>`)
        );

        expect(el.validationStates.error.MinLength).to.be.true;
        expect(el.validationStates.error.AlwaysInvalid).to.be.true;

        el.modelValue = 'abc';
        expect(el.validationStates.error.MinLength).to.equal(undefined);
        expect(el.validationStates.error.AlwaysInvalid).to.be.true;
      });

      it('removes "non active" states whenever modelValue becomes undefined', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .validators=${[new MinLength(3)]}
          >${lightDom}</${tag}>
        `)
        );
        el.modelValue = 'a';
        expect(el.hasFeedbackFor).to.deep.equal(['error']);
        expect(el.validationStates.error).to.not.eql({});

        el.modelValue = undefined;
        expect(el.hasFeedbackFor).to.deep.equal([]);
        expect(el.validationStates.error).to.eql({});
      });

      it('clears current validation results when validators array updated', async () => {
        const validators = [new Required()];
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .validators=${validators}
          >${lightDom}</${tag}>
        `)
        );
        expect(el.hasFeedbackFor).to.deep.equal(['error']);
        expect(el.validationStates.error).to.eql({ Required: true });

        el.validators = [];
        expect(el.hasFeedbackFor).to.not.deep.equal(['error']);
        expect(el.validationStates.error).to.eql({});

        el.validators = [new Required()];
        expect(el.hasFeedbackFor).to.deep.equal(['error']);
        expect(el.validationStates.error).to.not.eql({});
      });

      it('can be configured to change visibility conditions per type', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
          .validators="${[new Required({}, { type: 'error' })]}"
          .feedbackCondition="${(
            /** @type {string} */ type,
            /** @type {object} */ meta,
            /** @type {(type: string) => any} */ defaultCondition,
          ) => {
            if (type === 'error') {
              return true;
            }
            return defaultCondition(type);
          }}"
          >${lightDom}</${tag}>
        `)
        );

        expect(el.showsFeedbackFor).to.eql(['error']);
      });

      describe('Events', () => {
        it('fires "showsFeedbackForChanged" event async after feedbackData got synced to feedbackElement', async () => {
          const spy = sinon.spy();
          const el = /** @type {ValidateElement} */ (
            await fixture(html`
            <${tag}
              .submitted=${true}
              .validators=${[new MinLength(7)]}
              @showsFeedbackForChanged=${spy}
            >${lightDom}</${tag}>
          `)
          );
          el.modelValue = 'a';
          await el.updateComplete;
          expect(spy).to.have.callCount(1);

          el.modelValue = 'abc';
          await el.updateComplete;
          expect(spy).to.have.callCount(1);

          el.modelValue = 'abcdefg';
          await el.updateComplete;
          expect(spy).to.have.callCount(2);
        });

        it('fires "showsFeedbackFor{type}Changed" event async when type visibility changed', async () => {
          const spy = sinon.spy();
          const el = /** @type {ValidateElement} */ (
            await fixture(html`
            <${tag}
              .submitted=${true}
              .validators=${[new MinLength(7)]}
              @showsFeedbackForErrorChanged=${spy}
            >${lightDom}</${tag}>
          `)
          );
          el.modelValue = 'a';
          await el.updateComplete;
          expect(spy).to.have.callCount(1);

          el.modelValue = 'abc';
          await el.updateComplete;
          expect(spy).to.have.callCount(1);

          el.modelValue = 'abcdefg';
          await el.updateComplete;
          expect(spy).to.have.callCount(2);
        });

        it('fires "{type}StateChanged" event async when type validity changed', async () => {
          const spy = sinon.spy();
          const el = /** @type {ValidateElement} */ (
            await fixture(html`
            <${tag}
              .submitted=${true}
              .validators=${[new MinLength(7)]}
              @errorStateChanged=${spy}
            >${lightDom}</${tag}>
          `)
          );
          expect(spy).to.have.callCount(0);

          el.modelValue = 'a';
          await el.updateComplete;
          expect(spy).to.have.callCount(1);

          el.modelValue = 'abc';
          await el.updateComplete;
          expect(spy).to.have.callCount(1);

          el.modelValue = 'abcdefg';
          await el.updateComplete;
          expect(spy).to.have.callCount(2);
        });
      });
    });

    describe('Accessibility', () => {
      it.skip('calls "._inputNode.setCustomValidity(errorMessage)"', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${tag}
            .modelValue=${'123'}
            .validators=${[new MinLength(3, { message: 'foo' })]}>
            <input slot="input">
          </${tag}>`)
        );
        const { _inputNode } = getFormControlMembers(el);

        if (_inputNode) {
          // @ts-expect-error
          const spy = sinon.spy(el._inputNode, 'setCustomValidity');
          el.modelValue = '';
          expect(spy.callCount).to.equal(1);
          // @ts-expect-error needs to be rewritten to new API
          expect(el.validationMessage).to.be('foo');
          el.modelValue = '123';
          expect(spy.callCount).to.equal(2);
          // @ts-expect-error needs to be rewritten to new API
          expect(el.validationMessage).to.be('');
        }
      });

      // TODO: check with open a11y issues and find best solution here
      it.skip(`removes validity message from DOM instead of toggling "display:none", to trigger Jaws
          and VoiceOver [to-be-implemented]`, async () => {});
    });

    describe('Extensibility: Custom Validator types', () => {
      const customTypeTagString = defineCE(
        class extends ValidateMixin(LitElement) {
          static get validationTypes() {
            return [...super.validationTypes, 'x', 'y'];
          }
        },
      );
      const customTypeTag = unsafeStatic(customTypeTagString);

      it('supports additional validationTypes in .hasFeedbackFor', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${customTypeTag}
            .validators=${[
              new MinLength(2, { type: 'x' }),
              new MinLength(3, { type: 'error' }),
              new MinLength(4, { type: 'y' }),
            ]}
            .modelValue=${'1234'}
          >${lightDom}</${customTypeTag}>
        `)
        );
        expect(el.hasFeedbackFor).to.deep.equal([]);

        el.modelValue = '123'; // triggers y
        expect(el.hasFeedbackFor).to.deep.equal(['y']);

        el.modelValue = '12'; // triggers error and y
        expect(el.hasFeedbackFor).to.deep.equal(['error', 'y']);

        el.modelValue = '1'; // triggers x, error and y
        expect(el.hasFeedbackFor).to.deep.equal(['x', 'error', 'y']);
      });

      it('supports additional validationTypes in .validationStates', async () => {
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${customTypeTag}
            .validators=${[
              new MinLength(2, { type: 'x' }),
              new MinLength(3, { type: 'error' }),
              new MinLength(4, { type: 'y' }),
            ]}
            .modelValue=${'1234'}
          >${lightDom}</${customTypeTag}>
        `)
        );
        expect(el.validationStates).to.eql({
          x: {},
          error: {},
          y: {},
        });

        el.modelValue = '123'; // triggers y
        expect(el.validationStates).to.eql({
          x: {},
          error: {},
          y: { MinLength: true },
        });

        el.modelValue = '12'; // triggers error and y
        expect(el.validationStates).to.eql({
          x: {},
          error: { MinLength: true },
          y: { MinLength: true },
        });

        el.modelValue = '1'; // triggers x, error and y
        expect(el.validationStates).to.eql({
          x: { MinLength: true },
          error: { MinLength: true },
          y: { MinLength: true },
        });
      });

      it('orders feedback based on provided "validationTypes"', async () => {
        // we set submitted to always show error message in the test
        const el = /** @type {ValidateElement} */ (
          await fixture(html`
          <${customTypeTag}
            .submitted=${true}
            ._visibleMessagesAmount=${Infinity}
            .validators=${[
              new MinLength(2, { type: 'x' }),
              new MinLength(3, { type: 'error' }),
              new MinLength(4, { type: 'y' }),
            ]}
            .modelValue=${'1'}
          >${lightDom}</${customTypeTag}>
        `)
        );
        const { _feedbackNode } = getFormControlMembers(el);

        await el.feedbackComplete;

        const feedbackNode =
          /** @type {import('../src/validate/LionValidationFeedback').LionValidationFeedback} */
          (_feedbackNode);
        const resultOrder = feedbackNode.feedbackData?.map(v => v.type);
        expect(resultOrder).to.deep.equal(['error', 'x', 'y']);

        el.modelValue = '12';
        await el.updateComplete;
        await el.feedbackComplete;
        const resultOrder2 = feedbackNode.feedbackData?.map(v => v.type);
        expect(resultOrder2).to.deep.equal(['error', 'y']);
      });

      /**
       * Out of scope:
       * - automatic reflection of attrs (we would need to add to constructor.properties). See
       * 'Subclassers' for an example on how to do this
       */
    });

    describe('Subclassers', () => {
      describe('Adding new Validator types', () => {
        it('can add helpers for validation types', async () => {
          class ValidateHasX extends ValidateMixin(LitElement) {
            static get validationTypes() {
              return [...super.validationTypes, 'x'];
            }

            get hasX() {
              return this.hasFeedbackFor.includes('x');
            }

            get hasXVisible() {
              return this.showsFeedbackFor.includes('x');
            }
          }
          const elTagString = defineCE(ValidateHasX);
          const elTag = unsafeStatic(elTagString);

          // we set submitted to always show errors
          const el = /** @type {ValidateHasX} */ (
            await fixture(html`
            <${elTag}
              .submitted=${true}
              .validators=${[new MinLength(2, { type: 'x' })]}
              .modelValue=${'1'}
            >${lightDom}</${elTag}>
          `)
          );
          await el.feedbackComplete;
          expect(el.hasX).to.be.true;
          expect(el.hasXVisible).to.be.true;

          el.modelValue = '12';
          expect(el.hasX).to.be.false;
          await el.updateComplete;
          await el.feedbackComplete;
          expect(el.hasXVisible).to.be.false;
        });

        it('can fire custom events if needed', async () => {
          /**
           *
           * @param {string[]} array1
           * @param {string[]} array2
           */
          function arrayDiff(array1 = [], array2 = []) {
            return array1
              .filter(x => !array2.includes(x))
              .concat(array2.filter(x => !array1.includes(x)));
          }
          const elTagString = defineCE(
            class extends ValidateMixin(LitElement) {
              static get validationTypes() {
                return [...super.validationTypes, 'x'];
              }

              /**
               * @param {string} name
               * @param {?} oldValue
               */
              updateSync(name, oldValue) {
                super.updateSync(name, oldValue);
                if (name === 'hasFeedbackFor') {
                  const diff = arrayDiff(this.hasFeedbackFor, oldValue);
                  if (diff.length > 0 && diff.includes('x')) {
                    this.dispatchEvent(new Event(`hasFeedbackForXChanged`, { bubbles: true }));
                  }
                }
              }
            },
          );
          const elTag = unsafeStatic(elTagString);

          const spy = sinon.spy();
          // we set prefilled to always show errors
          const el = /** @type {ValidateElement} */ (
            await fixture(html`
            <${elTag}
              .prefilled=${true}
              @hasFeedbackForXChanged=${spy}
              .validators=${[new MinLength(2, { type: 'x' })]}
              .modelValue=${'1'}
            >${lightDom}</${elTag}>
          `)
          );
          expect(spy).to.have.callCount(1);
          el.modelValue = '1';
          expect(spy).to.have.callCount(1);
          el.modelValue = '12';
          expect(spy).to.have.callCount(2);
          el.modelValue = '123';
          expect(spy).to.have.callCount(2);
          el.modelValue = '1';
          expect(spy).to.have.callCount(3);
        });
      });

      describe('Changing feedback visibility conditions', () => {
        // TODO: add this test on FormControl layer
        it('reconsiders feedback visibility when interaction states changed', async () => {
          const elTagString = defineCE(
            class extends ValidateMixin(LitElement) {
              /** @type {any} */
              static get properties() {
                return {
                  modelValue: String,
                  dirty: Boolean,
                  touched: Boolean,
                  prefilled: Boolean,
                  submitted: Boolean,
                };
              }

              _showFeedbackConditionFor() {
                return true;
              }
            },
          );
          const elTag = unsafeStatic(elTagString);
          const el = /** @type {ValidateElement} */ (
            await fixture(html`
            <${elTag}
              .validators=${[new AlwaysInvalid()]}
              .modelValue=${'myValue'}
            >${lightDom}</${elTag}>
          `)
          );

          // @ts-ignore [allow-protected] in test
          const spy = sinon.spy(el, '_updateShouldShowFeedbackFor');
          let counter = 0;
          // for ... of is already allowed we should update eslint...
          // eslint-disable-next-line no-restricted-syntax
          for (const state of ['dirty', 'touched', 'prefilled', 'submitted']) {
            counter += 1;
            el[state] = false;
            // eslint-disable-next-line no-await-in-loop
            await el.updateComplete;
            expect(spy.callCount).to.equal(counter);
            counter += 1;
            el[state] = true;
            // eslint-disable-next-line no-await-in-loop
            await el.updateComplete;
            expect(spy.callCount).to.equal(counter);
          }
        });

        it('filters feedback visibility according interaction states', async () => {
          const elTagString = defineCE(
            class extends ValidateMixin(LitElement) {
              static get validationTypes() {
                return ['error', 'info'];
              }

              /** @type {any} */
              static get properties() {
                return {
                  modelValue: { type: String },
                };
              }

              // @ts-ignore
              _showFeedbackConditionFor(type) {
                switch (type) {
                  case 'error':
                    // @ts-ignore
                    return ['A', 'B'].includes(this.modelValue);
                  default:
                    // @ts-ignore
                    return ['B', 'C'].includes(this.modelValue);
                }
              }
            },
          );
          const elTag = unsafeStatic(elTagString);
          const el = /** @type {ValidateElement} */ (
            await fixture(html`
            <${elTag}
              .validators=${[
                new AlwaysInvalid({}, { type: 'error' }),
                new AlwaysInvalid({}, { type: 'info' }),
              ]}
            >${lightDom}</${elTag}>
          `)
          );

          for (const [modelValue, expected] of [
            ['A', ['error']],
            ['B', ['error']],
            ['C', ['info']],
            ['D', []],
          ]) {
            el.modelValue = modelValue;
            // eslint-disable-next-line no-await-in-loop
            await el.updateComplete;
            // eslint-disable-next-line no-await-in-loop
            await el.feedbackComplete;

            // @ts-ignore
            const resultOrder = el._feedbackNode.feedbackData.map(v => v.type);
            expect(resultOrder).to.deep.equal(expected);
          }
        });
      });

      describe('Changing feedback messages globally', () => {
        // Please see tests of Validation Feedback
      });
    });
  });
}