bfg-common 1.5.418 → 1.5.419

package/components/atoms/wizard/lib/utils/utils.ts

@@ -1,954 +1,954 @@
-import { ref, computed, Ref, ComputedRef } from 'vue'
-import { useDeepCopy } from '~/composables/deepCopy'
-import type {
-  UI_I_ErrorFields,
-  UI_I_Loader,
-  UI_I_ValidationReturn,
-  UI_I_WizardStep,
-  UI_I_WizardStepNavigation,
-  UI_I_WizardSchemeData,
-} from '~/components/atoms/wizard/lib/models/interfaces'
-import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
-
-export default class Wizard {
-  private _initialSteps: Ref<UI_I_WizardStep[]>
-  private _initialStepsScheme: Ref<(number | UI_I_WizardSchemeData)[][]>
-  private _steps: Ref<UI_I_WizardStep[]>
-  private _stepsScheme: Ref<(number | UI_I_WizardSchemeData)[][]>
-  private _selectedSchemeId: Ref<number>
-  private _wizardLoader: Ref<UI_I_Loader>
-  private _waitingStepId: Ref<number>
-  isDisabledNextButton: Ref<boolean>
-  selectedScheme: ComputedRef<(number | UI_I_WizardSchemeData)[]>
-  alertMessages: ComputedRef<string[][]>
-  stepsInSelectedScheme: ComputedRef<UI_I_WizardStep[]>
-  stepsInSelectedSchemeWithStatus: ComputedRef<UI_I_WizardStepNavigation[]>
-  isLastStepCom: ComputedRef<boolean>
-  isFirstStepCom: ComputedRef<boolean>
-  selectedStepCom: ComputedRef<UI_I_WizardStep>
-  selectedStepDataFromScheme: ComputedRef<undefined | UI_I_WizardSchemeData>
-
-  constructor(
-    steps: UI_I_WizardStep[],
-    stepsSchemeInitial: (number | UI_I_WizardSchemeData)[][]
-  ) {
-    this._steps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
-    this._initialSteps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
-    this._stepsScheme = ref<(number | UI_I_WizardSchemeData)[][]>(
-      useDeepCopy(stepsSchemeInitial)
-    )
-    this._initialStepsScheme = ref<(number | UI_I_WizardSchemeData)[][]>(
-      useDeepCopy(stepsSchemeInitial)
-    )
-    this._selectedSchemeId = ref<number>(0)
-    this._wizardLoader = ref<UI_I_Loader>({
-      status: false,
-      messages: [],
-    })
-    this._waitingStepId = ref<number>(-1)
-    this.isDisabledNextButton = ref<boolean>(false)
-    this.selectedScheme = computed<(number | UI_I_WizardSchemeData)[]>(
-      () => this._stepsScheme.value[this._selectedSchemeId.value]
-    )
-
-    this.alertMessages = computed<string[][]>(() =>
-      this._steps.value.map((step: UI_I_WizardStep) =>
-        Object.values(step.fields).reduce(
-          (result: string[], obj: UI_I_ErrorFields) =>
-            obj.alert ? [...result, obj.alert] : result,
-          []
-        )
-      )
-    )
-
-    this.stepsInSelectedScheme = computed<UI_I_WizardStep[]>(() =>
-      this._steps.value.reduce(
-        (stepsInScheme: UI_I_WizardStep[], step: UI_I_WizardStep) => {
-          const isStandardStepFromScheme = this.selectedScheme.value.includes(
-            step.id
-          )
-
-          if (isStandardStepFromScheme) {
-            return [...stepsInScheme, step]
-          }
-
-          const stepDataFromScheme = this.selectedScheme.value.find(
-            (scheme: number | UI_I_WizardSchemeData) =>
-              typeof scheme !== 'number' && scheme.stepId === step.id
-          )
-
-          if (!!stepDataFromScheme) {
-            return [
-              ...stepsInScheme,
-              {
-                ...step,
-                dataId: stepDataFromScheme.dataId,
-              },
-            ]
-          }
-
-          return stepsInScheme
-        },
-        []
-      )
-    )
-
-    this.selectedStepDataFromScheme = computed<
-      undefined | UI_I_WizardSchemeData
-    >(() =>
-      this.selectedScheme.value.find(
-        (scheme: number | UI_I_WizardSchemeData) =>
-          typeof scheme !== 'number' &&
-          scheme.stepId === this.selectedStepCom.value.id
-      )
-    )
-
-    this.stepsInSelectedSchemeWithStatus = computed<
-      UI_I_WizardStepNavigation[]
-    >(() =>
-      this.stepsInSelectedScheme.value.map((step: UI_I_WizardStep) => {
-        return {
-          ...step,
-          status: {
-            disabled: step.status === UI_E_WIZARD_STATUS.INACTIVE,
-            active:
-              step.status === UI_E_WIZARD_STATUS.SELECTED ||
-              step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED,
-            error:
-              step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED ||
-              step.status === UI_E_WIZARD_STATUS.INVALID,
-            complete:
-              step.status === UI_E_WIZARD_STATUS.COMPLETED ||
-              ((step.status === UI_E_WIZARD_STATUS.SELECTED ||
-                step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED ||
-                step.status === UI_E_WIZARD_STATUS.INVALID) &&
-                this.wasCompleted()),
-          },
-        }
-      })
-    )
-
-    this.isLastStepCom = computed<boolean>(() => {
-      const lastStepStatus =
-        this.stepsInSelectedScheme.value[
-          this.stepsInSelectedScheme.value.length - 1
-        ].status
-      return this.isSelected(lastStepStatus)
-    })
-
-    this.isFirstStepCom = computed<boolean>(() => {
-      const firstStepStatus = this.stepsInSelectedScheme.value[0].status
-      return this.isSelected(firstStepStatus)
-    })
-
-    this.selectedStepCom = computed<UI_I_WizardStep>(
-      () =>
-        this.stepsInSelectedScheme.value.find((step: UI_I_WizardStep) =>
-          this.isSelected(step.status)
-        ) || this.stepsInSelectedScheme.value[0]
-    )
-  }
-
-  get steps(): UI_I_WizardStep[] {
-    return this._steps.value
-  }
-
-  set steps(newSteps: UI_I_WizardStep[]) {
-    this._steps.value = newSteps
-  }
-
-  set stepsScheme(newStepsScheme: (number | UI_I_WizardSchemeData)[][]) {
-    this._stepsScheme.value = newStepsScheme
-  }
-
-  get stepsScheme(): (number | UI_I_WizardSchemeData)[][] {
-    return this._stepsScheme.value
-  }
-
-  set selectedSchemeId(newSelectedSchemeId: number) {
-    this._selectedSchemeId.value = newSelectedSchemeId
-  }
-
-  get selectedSchemeId(): number {
-    return this._selectedSchemeId.value
-  }
-
-  set waitingStepId(id: number) {
-    this._waitingStepId.value = id
-  }
-
-  get waitingStepId(): number {
-    return this._waitingStepId.value
-  }
-
-  get wizardLoader(): UI_I_Loader {
-    return this._wizardLoader.value
-  }
-
-  get nextAvailableStep(): number {
-    const currentStepIndex = this.selectedScheme.value.indexOf(
-      this.selectedStepId
-    )
-    return this.selectedScheme.value[currentStepIndex + 1]
-  }
-
-  get nextStepData(): UI_I_WizardStep[] {
-    const currentStepIndex: number = this.stepsInSelectedScheme.value.findIndex(
-      (st: UI_I_WizardStep) => this.isSelected(st.status)
-    )
-    const stepIndex: number = currentStepIndex + 1
-    const step: UI_I_WizardStep = this.stepsInSelectedScheme.value[stepIndex]
-
-    if (!step) return []
-
-    const index = this.stepsInSelectedScheme.value.findIndex(
-      (st: UI_I_WizardStep) => st.id === step.id
-    )
-
-    return this.stepsInSelectedScheme.value.map(
-      (st: UI_I_WizardStep, i: number) => {
-        if (!st.isValid && index === i)
-          return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
-
-        if (!st.isValid && index !== i)
-          return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
-
-        const indexInactive = this.stepsInSelectedScheme.value.findIndex(
-          (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
-        )
-
-        // If current step is not equal selected step, and it is not inactive or active, set it as completed
-        if (
-          index !== i &&
-          st.status !== UI_E_WIZARD_STATUS.INACTIVE &&
-          st.status !== UI_E_WIZARD_STATUS.ACTIVE
-        )
-          return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
-
-        if (index === i) {
-          return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
-        }
-
-        if (stepIndex !== indexInactive && indexInactive - 1 === i)
-          return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
-
-        return st
-      }
-    )
-  }
-
-  get previousStepData(): UI_I_WizardStep[] {
-    const currentStepIndex: number = this.stepsInSelectedScheme.value.findIndex(
-      (st: UI_I_WizardStep) => this.isSelected(st.status)
-    )
-    const stepIndex: number = currentStepIndex - 1
-    const step: UI_I_WizardStep = this.stepsInSelectedScheme.value[stepIndex]
-
-    const indexInactive = this.stepsInSelectedScheme.value.findIndex(
-      (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
-    )
-
-    if (!step) return []
-    const index = this.stepsInSelectedScheme.value.findIndex(
-      (st: UI_I_WizardStep) => st.title === step.title
-    )
-
-    return this.stepsInSelectedScheme.value.map(
-      (st: UI_I_WizardStep, i: number) => {
-        if (!st.isValid && index === i)
-          return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
-
-        if (index === i) return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
-
-        if (!st.isValid && index !== i)
-          return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
-
-        // If current step is before first inactive, and it is not to be selected or hasn't inactive index, and it is last step
-        if (
-          (indexInactive - 1 === i && index !== indexInactive - 1) ||
-          (indexInactive < 0 &&
-            this.stepsInSelectedScheme.value.length - 1 === i)
-        )
-          return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
-
-        if (index !== i && st.status !== UI_E_WIZARD_STATUS.INACTIVE)
-          return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
-
-        return st
-      }
-    )
-  }
-
-  setDisabledNextButton(newValue: boolean) {
-    this.isDisabledNextButton.value = newValue
-  }
-
-  selectedStepData(step: UI_I_WizardStepNavigation): UI_I_WizardStep[] {
-    const index = this.stepsInSelectedScheme.value.findIndex(
-      (st: UI_I_WizardStep) => st.id === step.id
-    )
-    const indexInactive = this.stepsInSelectedScheme.value.findIndex(
-      (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
-    )
-
-    return this.stepsInSelectedScheme.value.map(
-      (st: UI_I_WizardStep, i: number) => {
-        if (!st.isValid && index === i)
-          return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
-
-        if (index === i) return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
-
-        if (!st.isValid && index !== i)
-          return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
-
-        // If current step is before first inactive, and it is not to be selected or hasn't inactive index, and it is last step, but it is not to be selected, set it as active
-        if (
-          (indexInactive - 1 === i && index !== indexInactive - 1) ||
-          (indexInactive < 0 &&
-            this.stepsInSelectedScheme.value.length - 1 === i &&
-            index !== i)
-        )
-          return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
-
-        if (index !== i && st.status !== UI_E_WIZARD_STATUS.INACTIVE)
-          return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
-
-        return st
-      }
-    )
-  }
-
-  setLoader(status: boolean, messages?: string[]): void {
-    this._wizardLoader.value.status = status
-
-    if (!messages && !!this._wizardLoader.value?.messages?.length) {
-      this._wizardLoader.value.messages = []
-      return
-    }
-    if (!messages) return
-
-    messages.length > 0 && (this._wizardLoader.value.messages = messages)
-  }
-
-  changeScheme(schemeId: number): void {
-    this.selectedSchemeId = schemeId
-    this.resetAfterSelected()
-  }
-
-  goToFirstInvalidStep(): void {
-    const firstInvalidStep: UI_I_WizardStep | undefined = this.steps.find(
-      (step: UI_I_WizardStep) => this.isInvalid(step.status)
-    )
-
-    if (!firstInvalidStep) return
-
-    const firstInvalidStepId: number = firstInvalidStep.id
-
-    this.steps = this.steps.map((step: UI_I_WizardStep): UI_I_WizardStep => {
-      if (step.id === firstInvalidStepId) {
-        return { ...step, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
-      }
-      if (step.status === UI_E_WIZARD_STATUS.SELECTED) {
-        return { ...step, status: UI_E_WIZARD_STATUS.COMPLETED }
-      }
-
-      return step
-    })
-  }
-
-  goToFirstStoppageStep(stoppageStepId: number): void {
-    console.log('goToFirstStoppageStep', stoppageStepId)
-  }
-
-  hasMessage(stepId: number, field: string): boolean {
-    return (
-      !!this.steps[stepId].fields?.[field].field ||
-      !!this.steps[stepId].fields?.[field].alert
-    )
-  }
-
-  setValidationError(stepId: number, field: string, message: string): void {
-    const invalidStep: UI_I_WizardStep | undefined = this.steps.find(
-      (step: UI_I_WizardStep): boolean => step.id === stepId
-    )
-
-    if (!invalidStep) return
-
-    invalidStep.fields[field].field = message
-
-    if (message) {
-      invalidStep.isValid = false
-
-      if (this.isSelected(invalidStep.status)) {
-        invalidStep.status = UI_E_WIZARD_STATUS.INVALID_SELECTED
-        return
-      }
-
-      invalidStep.status = UI_E_WIZARD_STATUS.INVALID
-    } else {
-      invalidStep.isValid = true
-      if (this.isSelected(invalidStep.status)) {
-        invalidStep.status = UI_E_WIZARD_STATUS.SELECTED
-      } else {
-        invalidStep.status = UI_E_WIZARD_STATUS.COMPLETED
-      }
-    }
-  }
-
-  setAlertMessage(stepId: number, field: string, message: string): void {
-    this.steps[stepId].fields[field].alert = message
-  }
-
-  removeAlertMessage(
-    stepId: number,
-    field: string,
-    value?: UI_I_WizardStep[]
-  ): UI_I_WizardStep[] {
-    const invalidStep: UI_I_WizardStep = this.steps[stepId]
-
-    invalidStep.fields[field].alert = ''
-    if (!value) return this.steps
-
-    return value.map(
-      (step: UI_I_WizardStep): UI_I_WizardStep =>
-        step.id === invalidStep.id ? invalidStep : step
-    )
-  }
-
-  private removeValidationError(
-    stepId: number,
-    field: string,
-    nextStep: boolean,
-    value?: UI_I_WizardStep[]
-  ): UI_I_WizardStep[] {
-    const invalidStep: UI_I_WizardStep = this.steps[stepId]
-
-    if (!invalidStep) return this.steps
-
-    invalidStep.fields[field].field = ''
-
-    const messages: UI_I_ErrorFields[] = Object.values(
-      invalidStep.fields
-    ).filter((message: UI_I_ErrorFields): boolean => message.field !== '')
-
-    invalidStep.isValid = !messages.length
-
-    if (nextStep && invalidStep.isValid && this.isInvalid(invalidStep.status)) {
-      invalidStep.status = UI_E_WIZARD_STATUS.COMPLETED
-    }
-
-    if (
-      !nextStep &&
-      invalidStep.isValid &&
-      invalidStep.status === UI_E_WIZARD_STATUS.INVALID_SELECTED
-    ) {
-      invalidStep.status = UI_E_WIZARD_STATUS.SELECTED
-    }
-
-    if (nextStep) this.goToFirstInvalidStep()
-
-    if (!value) return this.steps
-
-    return value.map(
-      (step: UI_I_WizardStep): UI_I_WizardStep =>
-        step.id === invalidStep.id ? invalidStep : step
-    )
-  }
-
-  hideAlertMessagesByStepId(stepId: number): UI_I_WizardStep[] {
-    const modifiedStep: UI_I_WizardStep = this.steps[stepId]
-
-    for (const field in modifiedStep.fields) {
-      modifiedStep.fields[field].alert = ''
-    }
-
-    return (this.steps = this.steps.map((step: UI_I_WizardStep) =>
-      step.id === stepId ? modifiedStep : step
-    ))
-  }
-
-  changeStep(value: UI_I_WizardStep[]): void {
-    this.steps = this.steps.map(
-      (step: UI_I_WizardStep): UI_I_WizardStep => ({
-        ...step,
-        ...(value.find(
-          (stepFind: UI_I_WizardStep): boolean => stepFind.id === step.id
-        ) || step),
-      })
-    )
-  }
-
-  isSelected(status: UI_E_WIZARD_STATUS): boolean {
-    return (
-      status === UI_E_WIZARD_STATUS.SELECTED ||
-      status === UI_E_WIZARD_STATUS.INVALID_SELECTED
-    )
-  }
-
-  isInvalid(status: UI_E_WIZARD_STATUS): boolean {
-    return (
-      status === UI_E_WIZARD_STATUS.INVALID ||
-      status === UI_E_WIZARD_STATUS.INVALID_SELECTED
-    )
-  }
-
-  get selectedStepId(): number {
-    const selectedStep: UI_I_WizardStep | undefined = this.steps.find(
-      (step: UI_I_WizardStep) =>
-        step.status === UI_E_WIZARD_STATUS.SELECTED ||
-        step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED
-    )
-
-    return selectedStep !== undefined ? selectedStep.id : this.steps[0].id
-  }
-
-  get selectedStep(): UI_I_WizardStep {
-    return this.steps.find(
-      (step: UI_I_WizardStep) => step.id === this.selectedStepId
-    )
-  }
-
-  private async finalValidationFunc(
-    value: UI_I_WizardStep[],
-    currentStep: UI_I_WizardStep,
-    nextStep: UI_I_WizardStep,
-    finalValidationFunc: (
-      value: UI_I_WizardStep[],
-      currentStep: UI_I_WizardStep,
-      nextStep: UI_I_WizardStep
-    ) => Promise<UI_I_ValidationReturn>,
-    isOnlyFinalValidation = false
-  ) {
-    const finalValidation: UI_I_ValidationReturn = await finalValidationFunc(
-      value,
-      currentStep,
-      nextStep
-    )
-
-    if (
-      finalValidation.stepHasError ||
-      finalValidation.stepShouldStop?.ifFromAnyStep ||
-      finalValidation.stepShouldStop?.ifOnCurrentStep
-    ) {
-      finalValidation.stepShouldStop?.ifFromAnyStep &&
-        currentStep.id < finalValidation.stepShouldStop?.stoppageStepId &&
-        this.selectStepHard(finalValidation.stepShouldStop?.stoppageStepId)
-
-      finalValidation.stepShouldStop?.ifOnCurrentStep &&
-        this.selectStepHard(finalValidation.stepShouldStop?.stoppageStepId)
-
-      finalValidation.stepHasError && this.goToFirstInvalidStep()
-
-      return
-    } else {
-      currentStep.status = UI_E_WIZARD_STATUS.COMPLETED
-    }
-
-    this.changeStep(finalValidation.newValue)
-  }
-
-  addNewStepToSteps(): void {
-    const lastStepOfType = this.steps.findLast(
-      (step: UI_I_WizardStep) => step.type === this.selectedStep.type
-    )
-
-    if (!lastStepOfType) return
-
-    this.steps = this.steps.reduce(
-      (acc: UI_I_WizardStep[], step: UI_I_WizardStep) => {
-        if (step.id < lastStepOfType.id) acc.push(step)
-        if (step.id === lastStepOfType.id) {
-          acc.push(step)
-
-          const lastStepOfTypeTitleNumber =
-            +lastStepOfType.title.match(/\d+/)[0]
-
-          acc.push({
-            ...step,
-            status: UI_E_WIZARD_STATUS.INACTIVE,
-            id: step.id + 1,
-            title: lastStepOfType.title.replace(
-              lastStepOfTypeTitleNumber,
-              lastStepOfTypeTitleNumber + 1
-            ),
-          })
-        }
-        if (step.id > lastStepOfType.id) {
-          acc.push({
-            ...step,
-            id: step.id + 1,
-          })
-        }
-
-        return acc
-      },
-      []
-    )
-
-    this.stepsScheme = [
-      ...this.stepsScheme.slice(0, this.selectedSchemeId),
-      this.stepsScheme[this.selectedSchemeId].reduce(
-        (acc: number[], step: number) => {
-          if (step < lastStepOfType.id) acc.push(step)
-          if (step === lastStepOfType.id) {
-            acc.push(step)
-            acc.push(step + 1)
-          }
-          if (step > lastStepOfType.id) {
-            acc.push(step + 1)
-          }
-
-          return acc
-        },
-        []
-      ),
-      ...this.stepsScheme.slice(this.selectedSchemeId + 1),
-    ]
-  }
-
-  removeSelectedStepFromSteps(title = ''): void {
-    const removedType = this.steps.find(
-      (step) => step.id === this.selectedStepId
-    )?.type
-    this.selectStepHard(this.selectedStepId - 1)
-
-    let count = 0
-
-    this.steps = this.steps.reduce(
-      (acc: UI_I_WizardStep[], step: UI_I_WizardStep) => {
-        const currentTitle =
-          step?.type === removedType ? title + ' ' + ++count : step.title
-        if (step.id < this.selectedStepId + 1)
-          acc.push({
-            ...step,
-            title: currentTitle,
-          })
-
-        if (step.id > this.selectedStepId + 1) {
-          acc.push({
-            ...step,
-            id: step.id - 1,
-            title: currentTitle,
-          })
-        }
-
-        return acc
-      },
-      []
-    )
-    this.stepsScheme[this.selectedSchemeId].pop()
-
-    this.stepsScheme = [
-      ...this.stepsScheme.slice(0, this.selectedSchemeId),
-      this.stepsScheme[this.selectedSchemeId],
-      ...this.stepsScheme.slice(this.selectedSchemeId + 1),
-    ]
-  }
-
-  async changeSteps(
-    value: UI_I_WizardStep[],
-    validationFunc?: (
-      value: UI_I_WizardStep[],
-      currentStep: UI_I_WizardStep,
-      nextStep: UI_I_WizardStep
-    ) => Promise<UI_I_ValidationReturn>,
-    finalValidationFunc?: (
-      value: UI_I_WizardStep[],
-      currentStep: UI_I_WizardStep,
-      nextStep: UI_I_WizardStep
-    ) => Promise<UI_I_ValidationReturn>,
-    isOnlyFinalValidation = false
-  ): Promise<void> {
-    const currentStep: UI_I_WizardStep | undefined = this.steps.find(
-      (step: UI_I_WizardStep) => this.isSelected(step.status)
-    )
-
-    const nextStep: UI_I_WizardStep | undefined = value.find(
-      (step: UI_I_WizardStep) => this.isSelected(step.status)
-    )
-
-    if (!currentStep || !nextStep) return
-    if (currentStep.id > nextStep.id) return this.changeStep(value)
-
-    if (
-      isOnlyFinalValidation &&
-      (this.isLastStep() ||
-        nextStep.id ===
-          this.selectedScheme.value[this.selectedScheme.value.length - 1]) &&
-      finalValidationFunc
-    ) {
-      this.finalValidationFunc(
-        value,
-        currentStep,
-        nextStep,
-        finalValidationFunc,
-        isOnlyFinalValidation
-      )
-
-      return
-    }
-
-    if (validationFunc) {
-      const validation: UI_I_ValidationReturn = await validationFunc(
-        value,
-        currentStep,
-        nextStep
-      )
-
-      if (
-        validation.stepHasError ||
-        validation.stepShouldStop?.ifFromAnyStep ||
-        validation.stepShouldStop?.ifOnCurrentStep
-      ) {
-        validation.stepShouldStop?.ifFromAnyStep &&
-          currentStep.id < validation.stepShouldStop?.stoppageStepId &&
-          this.selectStepHard(validation.stepShouldStop?.stoppageStepId)
-
-        validation.stepShouldStop?.ifOnCurrentStep &&
-          this.selectStepHard(validation.stepShouldStop?.stoppageStepId)
-
-        validation.stepHasError && this.goToFirstInvalidStep()
-
-        return
-      } else if (
-        (this.isLastStep() ||
-          nextStep.id ===
-            this.selectedScheme.value[this.selectedScheme.value.length - 1]) &&
-        finalValidationFunc
-      ) {
-        this.finalValidationFunc(
-          validation.newValue,
-          currentStep,
-          nextStep,
-          finalValidationFunc,
-          isOnlyFinalValidation
-        )
-
-        return
-      } else {
-        currentStep.status = UI_E_WIZARD_STATUS.COMPLETED
-      }
-
-      this.changeStep(validation.newValue)
-
-      return
-    }
-
-    this.changeStep(value)
-  }
-
-  selectStepHard(stepId: number): void {
-    const newSteps = this.steps.map((st: UI_I_WizardStep) => {
-      if (st.id < stepId) return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
-
-      if (st.id === stepId)
-        return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
-
-      // TODO Было сделано на скорую руку
-      if (st.id > stepId && st.status === UI_E_WIZARD_STATUS.SELECTED)
-        return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
-
-      return st
-    })
-
-    this.changeStep(newSteps)
-  }
-
-  isValidateForStep(
-    step: number,
-    currentStepId: number,
-    nextStepId: number
-  ): boolean {
-    return (
-      nextStepId > step &&
-      currentStepId <= step &&
-      this.selectedScheme.value.includes(step)
-    )
-  }
-
-  setValidation(
-    stepId: number,
-    field: string,
-    message: {
-      fieldMessage?: string
-      alertMessage?: string
-    }
-  ): true {
-    message.fieldMessage &&
-      this.setValidationError(stepId, field, message.fieldMessage)
-    message.alertMessage &&
-      this.setAlertMessage(stepId, field, message.alertMessage)
-
-    return true
-  }
-
-  removeValidationLocal(stepId: number, field: string): void {
-    this.setValidationError(stepId, field, '')
-    this.setAlertMessage(stepId, field, '')
-  }
-
-  removeValidation(
-    stepId: number,
-    field: string,
-    value: UI_I_WizardStep[]
-  ): UI_I_WizardStep[] {
-    let newValue: UI_I_WizardStep[] = this.removeValidationError(
-      stepId,
-      field,
-      true,
-      value
-    )
-
-    newValue = this.removeAlertMessage(stepId, field, newValue)
-    return newValue
-  }
-
-  reset(): void {
-    this.steps = useDeepCopy(this._initialSteps.value)
-    this.stepsScheme = useDeepCopy(this._initialStepsScheme.value)
-    this.selectedSchemeId = 0
-  }
-
-  setEmptyErrorFields(fields: { [key: string]: UI_I_ErrorFields }): {
-    [key: string]: UI_I_ErrorFields
-  } {
-    const keys: string[] = Object.keys(fields)
-    const obj: { [key: string]: UI_I_ErrorFields } = {}
-
-    keys.forEach((key: string): void => {
-      obj[key] = {
-        alert: '',
-        field: '',
-      }
-    })
-
-    return obj
-  }
-
-  resetAfterSelected(): void {
-    this.steps = this.steps.map(
-      (step: UI_I_WizardStep): UI_I_WizardStep =>
-        step.id > this.selectedStepId
-          ? {
-              ...step,
-              status: UI_E_WIZARD_STATUS.INACTIVE,
-              isValid: true,
-              fields: this.setEmptyErrorFields(step.fields),
-            }
-          : step
-    )
-  }
-
-  activeStepId(): number {
-    const activeStep = this.steps.find(
-      (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.ACTIVE
-    )?.id
-
-    const invalidStep = this.steps.find(
-      (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.INVALID
-    )?.id
-
-    return activeStep || invalidStep || 0
-  }
-
-  wasCompleted(): boolean {
-    return this.activeStepId() > this.selectedStepId
-  }
-
-  isLastStep(): boolean {
-    return (
-      this.selectedScheme.value[this.selectedScheme.value.length - 2] ===
-      this.selectedStepId
-    )
-  }
-
-  isSelectedScheme(schemeId: number): boolean {
-    return schemeId === this.selectedSchemeId
-  }
-
-  getStepIdByFieldName(fieldName: string): number {
-    return this.steps.find((step) => step.fields[fieldName])?.id || -1
-  }
-
-  setDynamicValidationField(fieldName: string | string[]): void {
-    const fields: {
-      [key: string]: UI_I_ErrorFields
-    } = this.steps[this.selectedStepId].fields
-
-    if (typeof fieldName === 'string') {
-      fields[fieldName] = {
-        alert: '',
-        field: '',
-      }
-    } else {
-      fieldName.forEach((name: string) => {
-        fields[name] = {
-          alert: '',
-          field: '',
-        }
-      })
-    }
-
-    this.steps = this.steps.map((step: UI_I_WizardStep) =>
-      step.id === this.selectedStepId
-        ? {
-            ...step,
-            fields,
-          }
-        : step
-    )
-  }
-
-  removeDynamicValidationField(fieldName: string | string[]): void {
-    const newFields: {
-      [key: string]: UI_I_ErrorFields
-    } = this.steps[this.selectedStepId].fields
-
-    if (typeof fieldName === 'string') {
-      delete newFields[fieldName]
-    } else {
-      fieldName.forEach((name: string) => {
-        delete newFields[name]
-      })
-    }
-
-    this.steps = this.steps.map((step: UI_I_WizardStep) =>
-      step.id === this.selectedStepId
-        ? {
-            ...step,
-            fields: newFields,
-          }
-        : step
-    )
-  }
-
-  validateFieldLocal(
-    stepId: number,
-    field: string,
-    rule: boolean | boolean[],
-    fieldMessage: string | string[],
-    alertMessage: string | string[]
-  ): void {
-    if (typeof rule === 'boolean') {
-      if (rule) {
-        this.setValidation(stepId, field, {
-          fieldMessage: fieldMessage as string,
-          alertMessage: alertMessage as string,
-        })
-      } else if (this.hasMessage(stepId, field)) {
-        this.removeValidationLocal(stepId, field)
-      }
-    } else {
-      const ruleIndex = rule.indexOf(true)
-
-      if (ruleIndex !== -1) {
-        this.setValidation(stepId, field, {
-          fieldMessage: fieldMessage[ruleIndex],
-          alertMessage: alertMessage[ruleIndex],
-        })
-      } else if (this.hasMessage(stepId, field)) {
-        this.removeValidationLocal(stepId, field)
-      }
-    }
-  }
-}
+import { ref, computed, Ref, ComputedRef } from 'vue'
+import { useDeepCopy } from '~/composables/deepCopy'
+import type {
+  UI_I_ErrorFields,
+  UI_I_Loader,
+  UI_I_ValidationReturn,
+  UI_I_WizardStep,
+  UI_I_WizardStepNavigation,
+  UI_I_WizardSchemeData,
+} from '~/components/atoms/wizard/lib/models/interfaces'
+import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
+
+export default class Wizard {
+  private _initialSteps: Ref<UI_I_WizardStep[]>
+  private _initialStepsScheme: Ref<(number | UI_I_WizardSchemeData)[][]>
+  private _steps: Ref<UI_I_WizardStep[]>
+  private _stepsScheme: Ref<(number | UI_I_WizardSchemeData)[][]>
+  private _selectedSchemeId: Ref<number>
+  private _wizardLoader: Ref<UI_I_Loader>
+  private _waitingStepId: Ref<number>
+  isDisabledNextButton: Ref<boolean>
+  selectedScheme: ComputedRef<(number | UI_I_WizardSchemeData)[]>
+  alertMessages: ComputedRef<string[][]>
+  stepsInSelectedScheme: ComputedRef<UI_I_WizardStep[]>
+  stepsInSelectedSchemeWithStatus: ComputedRef<UI_I_WizardStepNavigation[]>
+  isLastStepCom: ComputedRef<boolean>
+  isFirstStepCom: ComputedRef<boolean>
+  selectedStepCom: ComputedRef<UI_I_WizardStep>
+  selectedStepDataFromScheme: ComputedRef<undefined | UI_I_WizardSchemeData>
+
+  constructor(
+    steps: UI_I_WizardStep[],
+    stepsSchemeInitial: (number | UI_I_WizardSchemeData)[][]
+  ) {
+    this._steps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
+    this._initialSteps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
+    this._stepsScheme = ref<(number | UI_I_WizardSchemeData)[][]>(
+      useDeepCopy(stepsSchemeInitial)
+    )
+    this._initialStepsScheme = ref<(number | UI_I_WizardSchemeData)[][]>(
+      useDeepCopy(stepsSchemeInitial)
+    )
+    this._selectedSchemeId = ref<number>(0)
+    this._wizardLoader = ref<UI_I_Loader>({
+      status: false,
+      messages: [],
+    })
+    this._waitingStepId = ref<number>(-1)
+    this.isDisabledNextButton = ref<boolean>(false)
+    this.selectedScheme = computed<(number | UI_I_WizardSchemeData)[]>(
+      () => this._stepsScheme.value[this._selectedSchemeId.value]
+    )
+
+    this.alertMessages = computed<string[][]>(() =>
+      this._steps.value.map((step: UI_I_WizardStep) =>
+        Object.values(step.fields).reduce(
+          (result: string[], obj: UI_I_ErrorFields) =>
+            obj.alert ? [...result, obj.alert] : result,
+          []
+        )
+      )
+    )
+
+    this.stepsInSelectedScheme = computed<UI_I_WizardStep[]>(() =>
+      this._steps.value.reduce(
+        (stepsInScheme: UI_I_WizardStep[], step: UI_I_WizardStep) => {
+          const isStandardStepFromScheme = this.selectedScheme.value.includes(
+            step.id
+          )
+
+          if (isStandardStepFromScheme) {
+            return [...stepsInScheme, step]
+          }
+
+          const stepDataFromScheme = this.selectedScheme.value.find(
+            (scheme: number | UI_I_WizardSchemeData) =>
+              typeof scheme !== 'number' && scheme.stepId === step.id
+          )
+
+          if (!!stepDataFromScheme) {
+            return [
+              ...stepsInScheme,
+              {
+                ...step,
+                dataId: stepDataFromScheme.dataId,
+              },
+            ]
+          }
+
+          return stepsInScheme
+        },
+        []
+      )
+    )
+
+    this.selectedStepDataFromScheme = computed<
+      undefined | UI_I_WizardSchemeData
+    >(() =>
+      this.selectedScheme.value.find(
+        (scheme: number | UI_I_WizardSchemeData) =>
+          typeof scheme !== 'number' &&
+          scheme.stepId === this.selectedStepCom.value.id
+      )
+    )
+
+    this.stepsInSelectedSchemeWithStatus = computed<
+      UI_I_WizardStepNavigation[]
+    >(() =>
+      this.stepsInSelectedScheme.value.map((step: UI_I_WizardStep) => {
+        return {
+          ...step,
+          status: {
+            disabled: step.status === UI_E_WIZARD_STATUS.INACTIVE,
+            active:
+              step.status === UI_E_WIZARD_STATUS.SELECTED ||
+              step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED,
+            error:
+              step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED ||
+              step.status === UI_E_WIZARD_STATUS.INVALID,
+            complete:
+              step.status === UI_E_WIZARD_STATUS.COMPLETED ||
+              ((step.status === UI_E_WIZARD_STATUS.SELECTED ||
+                step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED ||
+                step.status === UI_E_WIZARD_STATUS.INVALID) &&
+                this.wasCompleted()),
+          },
+        }
+      })
+    )
+
+    this.isLastStepCom = computed<boolean>(() => {
+      const lastStepStatus =
+        this.stepsInSelectedScheme.value[
+          this.stepsInSelectedScheme.value.length - 1
+        ].status
+      return this.isSelected(lastStepStatus)
+    })
+
+    this.isFirstStepCom = computed<boolean>(() => {
+      const firstStepStatus = this.stepsInSelectedScheme.value[0].status
+      return this.isSelected(firstStepStatus)
+    })
+
+    this.selectedStepCom = computed<UI_I_WizardStep>(
+      () =>
+        this.stepsInSelectedScheme.value.find((step: UI_I_WizardStep) =>
+          this.isSelected(step.status)
+        ) || this.stepsInSelectedScheme.value[0]
+    )
+  }
+
+  get steps(): UI_I_WizardStep[] {
+    return this._steps.value
+  }
+
+  set steps(newSteps: UI_I_WizardStep[]) {
+    this._steps.value = newSteps
+  }
+
+  set stepsScheme(newStepsScheme: (number | UI_I_WizardSchemeData)[][]) {
+    this._stepsScheme.value = newStepsScheme
+  }
+
+  get stepsScheme(): (number | UI_I_WizardSchemeData)[][] {
+    return this._stepsScheme.value
+  }
+
+  set selectedSchemeId(newSelectedSchemeId: number) {
+    this._selectedSchemeId.value = newSelectedSchemeId
+  }
+
+  get selectedSchemeId(): number {
+    return this._selectedSchemeId.value
+  }
+
+  set waitingStepId(id: number) {
+    this._waitingStepId.value = id
+  }
+
+  get waitingStepId(): number {
+    return this._waitingStepId.value
+  }
+
+  get wizardLoader(): UI_I_Loader {
+    return this._wizardLoader.value
+  }
+
+  get nextAvailableStep(): number {
+    const currentStepIndex = this.selectedScheme.value.indexOf(
+      this.selectedStepId
+    )
+    return this.selectedScheme.value[currentStepIndex + 1]
+  }
+
+  get nextStepData(): UI_I_WizardStep[] {
+    const currentStepIndex: number = this.stepsInSelectedScheme.value.findIndex(
+      (st: UI_I_WizardStep) => this.isSelected(st.status)
+    )
+    const stepIndex: number = currentStepIndex + 1
+    const step: UI_I_WizardStep = this.stepsInSelectedScheme.value[stepIndex]
+
+    if (!step) return []
+
+    const index = this.stepsInSelectedScheme.value.findIndex(
+      (st: UI_I_WizardStep) => st.id === step.id
+    )
+
+    return this.stepsInSelectedScheme.value.map(
+      (st: UI_I_WizardStep, i: number) => {
+        if (!st.isValid && index === i)
+          return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
+
+        if (!st.isValid && index !== i)
+          return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
+
+        const indexInactive = this.stepsInSelectedScheme.value.findIndex(
+          (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
+        )
+
+        // If current step is not equal selected step, and it is not inactive or active, set it as completed
+        if (
+          index !== i &&
+          st.status !== UI_E_WIZARD_STATUS.INACTIVE &&
+          st.status !== UI_E_WIZARD_STATUS.ACTIVE
+        )
+          return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+
+        if (index === i) {
+          return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
+        }
+
+        if (stepIndex !== indexInactive && indexInactive - 1 === i)
+          return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
+
+        return st
+      }
+    )
+  }
+
+  get previousStepData(): UI_I_WizardStep[] {
+    const currentStepIndex: number = this.stepsInSelectedScheme.value.findIndex(
+      (st: UI_I_WizardStep) => this.isSelected(st.status)
+    )
+    const stepIndex: number = currentStepIndex - 1
+    const step: UI_I_WizardStep = this.stepsInSelectedScheme.value[stepIndex]
+
+    const indexInactive = this.stepsInSelectedScheme.value.findIndex(
+      (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
+    )
+
+    if (!step) return []
+    const index = this.stepsInSelectedScheme.value.findIndex(
+      (st: UI_I_WizardStep) => st.title === step.title
+    )
+
+    return this.stepsInSelectedScheme.value.map(
+      (st: UI_I_WizardStep, i: number) => {
+        if (!st.isValid && index === i)
+          return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
+
+        if (index === i) return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
+
+        if (!st.isValid && index !== i)
+          return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
+
+        // If current step is before first inactive, and it is not to be selected or hasn't inactive index, and it is last step
+        if (
+          (indexInactive - 1 === i && index !== indexInactive - 1) ||
+          (indexInactive < 0 &&
+            this.stepsInSelectedScheme.value.length - 1 === i)
+        )
+          return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
+
+        if (index !== i && st.status !== UI_E_WIZARD_STATUS.INACTIVE)
+          return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+
+        return st
+      }
+    )
+  }
+
+  setDisabledNextButton(newValue: boolean) {
+    this.isDisabledNextButton.value = newValue
+  }
+
+  selectedStepData(step: UI_I_WizardStepNavigation): UI_I_WizardStep[] {
+    const index = this.stepsInSelectedScheme.value.findIndex(
+      (st: UI_I_WizardStep) => st.id === step.id
+    )
+    const indexInactive = this.stepsInSelectedScheme.value.findIndex(
+      (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
+    )
+
+    return this.stepsInSelectedScheme.value.map(
+      (st: UI_I_WizardStep, i: number) => {
+        if (!st.isValid && index === i)
+          return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
+
+        if (index === i) return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
+
+        if (!st.isValid && index !== i)
+          return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
+
+        // If current step is before first inactive, and it is not to be selected or hasn't inactive index, and it is last step, but it is not to be selected, set it as active
+        if (
+          (indexInactive - 1 === i && index !== indexInactive - 1) ||
+          (indexInactive < 0 &&
+            this.stepsInSelectedScheme.value.length - 1 === i &&
+            index !== i)
+        )
+          return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
+
+        if (index !== i && st.status !== UI_E_WIZARD_STATUS.INACTIVE)
+          return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+
+        return st
+      }
+    )
+  }
+
+  setLoader(status: boolean, messages?: string[]): void {
+    this._wizardLoader.value.status = status
+
+    if (!messages && !!this._wizardLoader.value?.messages?.length) {
+      this._wizardLoader.value.messages = []
+      return
+    }
+    if (!messages) return
+
+    messages.length > 0 && (this._wizardLoader.value.messages = messages)
+  }
+
+  changeScheme(schemeId: number): void {
+    this.selectedSchemeId = schemeId
+    this.resetAfterSelected()
+  }
+
+  goToFirstInvalidStep(): void {
+    const firstInvalidStep: UI_I_WizardStep | undefined = this.steps.find(
+      (step: UI_I_WizardStep) => this.isInvalid(step.status)
+    )
+
+    if (!firstInvalidStep) return
+
+    const firstInvalidStepId: number = firstInvalidStep.id
+
+    this.steps = this.steps.map((step: UI_I_WizardStep): UI_I_WizardStep => {
+      if (step.id === firstInvalidStepId) {
+        return { ...step, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
+      }
+      if (step.status === UI_E_WIZARD_STATUS.SELECTED) {
+        return { ...step, status: UI_E_WIZARD_STATUS.COMPLETED }
+      }
+
+      return step
+    })
+  }
+
+  goToFirstStoppageStep(stoppageStepId: number): void {
+    console.log('goToFirstStoppageStep', stoppageStepId)
+  }
+
+  hasMessage(stepId: number, field: string): boolean {
+    return (
+      !!this.steps[stepId].fields?.[field].field ||
+      !!this.steps[stepId].fields?.[field].alert
+    )
+  }
+
+  setValidationError(stepId: number, field: string, message: string): void {
+    const invalidStep: UI_I_WizardStep | undefined = this.steps.find(
+      (step: UI_I_WizardStep): boolean => step.id === stepId
+    )
+
+    if (!invalidStep) return
+
+    invalidStep.fields[field].field = message
+
+    if (message) {
+      invalidStep.isValid = false
+
+      if (this.isSelected(invalidStep.status)) {
+        invalidStep.status = UI_E_WIZARD_STATUS.INVALID_SELECTED
+        return
+      }
+
+      invalidStep.status = UI_E_WIZARD_STATUS.INVALID
+    } else {
+      invalidStep.isValid = true
+      if (this.isSelected(invalidStep.status)) {
+        invalidStep.status = UI_E_WIZARD_STATUS.SELECTED
+      } else {
+        invalidStep.status = UI_E_WIZARD_STATUS.COMPLETED
+      }
+    }
+  }
+
+  setAlertMessage(stepId: number, field: string, message: string): void {
+    this.steps[stepId].fields[field].alert = message
+  }
+
+  removeAlertMessage(
+    stepId: number,
+    field: string,
+    value?: UI_I_WizardStep[]
+  ): UI_I_WizardStep[] {
+    const invalidStep: UI_I_WizardStep = this.steps[stepId]
+
+    invalidStep.fields[field].alert = ''
+    if (!value) return this.steps
+
+    return value.map(
+      (step: UI_I_WizardStep): UI_I_WizardStep =>
+        step.id === invalidStep.id ? invalidStep : step
+    )
+  }
+
+  private removeValidationError(
+    stepId: number,
+    field: string,
+    nextStep: boolean,
+    value?: UI_I_WizardStep[]
+  ): UI_I_WizardStep[] {
+    const invalidStep: UI_I_WizardStep = this.steps[stepId]
+
+    if (!invalidStep) return this.steps
+
+    invalidStep.fields[field].field = ''
+
+    const messages: UI_I_ErrorFields[] = Object.values(
+      invalidStep.fields
+    ).filter((message: UI_I_ErrorFields): boolean => message.field !== '')
+
+    invalidStep.isValid = !messages.length
+
+    if (nextStep && invalidStep.isValid && this.isInvalid(invalidStep.status)) {
+      invalidStep.status = UI_E_WIZARD_STATUS.COMPLETED
+    }
+
+    if (
+      !nextStep &&
+      invalidStep.isValid &&
+      invalidStep.status === UI_E_WIZARD_STATUS.INVALID_SELECTED
+    ) {
+      invalidStep.status = UI_E_WIZARD_STATUS.SELECTED
+    }
+
+    if (nextStep) this.goToFirstInvalidStep()
+
+    if (!value) return this.steps
+
+    return value.map(
+      (step: UI_I_WizardStep): UI_I_WizardStep =>
+        step.id === invalidStep.id ? invalidStep : step
+    )
+  }
+
+  hideAlertMessagesByStepId(stepId: number): UI_I_WizardStep[] {
+    const modifiedStep: UI_I_WizardStep = this.steps[stepId]
+
+    for (const field in modifiedStep.fields) {
+      modifiedStep.fields[field].alert = ''
+    }
+
+    return (this.steps = this.steps.map((step: UI_I_WizardStep) =>
+      step.id === stepId ? modifiedStep : step
+    ))
+  }
+
+  changeStep(value: UI_I_WizardStep[]): void {
+    this.steps = this.steps.map(
+      (step: UI_I_WizardStep): UI_I_WizardStep => ({
+        ...step,
+        ...(value.find(
+          (stepFind: UI_I_WizardStep): boolean => stepFind.id === step.id
+        ) || step),
+      })
+    )
+  }
+
+  isSelected(status: UI_E_WIZARD_STATUS): boolean {
+    return (
+      status === UI_E_WIZARD_STATUS.SELECTED ||
+      status === UI_E_WIZARD_STATUS.INVALID_SELECTED
+    )
+  }
+
+  isInvalid(status: UI_E_WIZARD_STATUS): boolean {
+    return (
+      status === UI_E_WIZARD_STATUS.INVALID ||
+      status === UI_E_WIZARD_STATUS.INVALID_SELECTED
+    )
+  }
+
+  get selectedStepId(): number {
+    const selectedStep: UI_I_WizardStep | undefined = this.steps.find(
+      (step: UI_I_WizardStep) =>
+        step.status === UI_E_WIZARD_STATUS.SELECTED ||
+        step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED
+    )
+
+    return selectedStep !== undefined ? selectedStep.id : this.steps[0].id
+  }
+
+  get selectedStep(): UI_I_WizardStep {
+    return this.steps.find(
+      (step: UI_I_WizardStep) => step.id === this.selectedStepId
+    )
+  }
+
+  private async finalValidationFunc(
+    value: UI_I_WizardStep[],
+    currentStep: UI_I_WizardStep,
+    nextStep: UI_I_WizardStep,
+    finalValidationFunc: (
+      value: UI_I_WizardStep[],
+      currentStep: UI_I_WizardStep,
+      nextStep: UI_I_WizardStep
+    ) => Promise<UI_I_ValidationReturn>,
+    isOnlyFinalValidation = false
+  ) {
+    const finalValidation: UI_I_ValidationReturn = await finalValidationFunc(
+      value,
+      currentStep,
+      nextStep
+    )
+
+    if (
+      finalValidation.stepHasError ||
+      finalValidation.stepShouldStop?.ifFromAnyStep ||
+      finalValidation.stepShouldStop?.ifOnCurrentStep
+    ) {
+      finalValidation.stepShouldStop?.ifFromAnyStep &&
+        currentStep.id < finalValidation.stepShouldStop?.stoppageStepId &&
+        this.selectStepHard(finalValidation.stepShouldStop?.stoppageStepId)
+
+      finalValidation.stepShouldStop?.ifOnCurrentStep &&
+        this.selectStepHard(finalValidation.stepShouldStop?.stoppageStepId)
+
+      finalValidation.stepHasError && this.goToFirstInvalidStep()
+
+      return
+    } else {
+      currentStep.status = UI_E_WIZARD_STATUS.COMPLETED
+    }
+
+    this.changeStep(finalValidation.newValue)
+  }
+
+  addNewStepToSteps(): void {
+    const lastStepOfType = this.steps.findLast(
+      (step: UI_I_WizardStep) => step.type === this.selectedStep.type
+    )
+
+    if (!lastStepOfType) return
+
+    this.steps = this.steps.reduce(
+      (acc: UI_I_WizardStep[], step: UI_I_WizardStep) => {
+        if (step.id < lastStepOfType.id) acc.push(step)
+        if (step.id === lastStepOfType.id) {
+          acc.push(step)
+
+          const lastStepOfTypeTitleNumber =
+            +lastStepOfType.title.match(/\d+/)[0]
+
+          acc.push({
+            ...step,
+            status: UI_E_WIZARD_STATUS.INACTIVE,
+            id: step.id + 1,
+            title: lastStepOfType.title.replace(
+              lastStepOfTypeTitleNumber,
+              lastStepOfTypeTitleNumber + 1
+            ),
+          })
+        }
+        if (step.id > lastStepOfType.id) {
+          acc.push({
+            ...step,
+            id: step.id + 1,
+          })
+        }
+
+        return acc
+      },
+      []
+    )
+
+    this.stepsScheme = [
+      ...this.stepsScheme.slice(0, this.selectedSchemeId),
+      this.stepsScheme[this.selectedSchemeId].reduce(
+        (acc: number[], step: number) => {
+          if (step < lastStepOfType.id) acc.push(step)
+          if (step === lastStepOfType.id) {
+            acc.push(step)
+            acc.push(step + 1)
+          }
+          if (step > lastStepOfType.id) {
+            acc.push(step + 1)
+          }
+
+          return acc
+        },
+        []
+      ),
+      ...this.stepsScheme.slice(this.selectedSchemeId + 1),
+    ]
+  }
+
+  removeSelectedStepFromSteps(title = ''): void {
+    const removedType = this.steps.find(
+      (step) => step.id === this.selectedStepId
+    )?.type
+    this.selectStepHard(this.selectedStepId - 1)
+
+    let count = 0
+
+    this.steps = this.steps.reduce(
+      (acc: UI_I_WizardStep[], step: UI_I_WizardStep) => {
+        const currentTitle =
+          step?.type === removedType ? title + ' ' + ++count : step.title
+        if (step.id < this.selectedStepId + 1)
+          acc.push({
+            ...step,
+            title: currentTitle,
+          })
+
+        if (step.id > this.selectedStepId + 1) {
+          acc.push({
+            ...step,
+            id: step.id - 1,
+            title: currentTitle,
+          })
+        }
+
+        return acc
+      },
+      []
+    )
+    this.stepsScheme[this.selectedSchemeId].pop()
+
+    this.stepsScheme = [
+      ...this.stepsScheme.slice(0, this.selectedSchemeId),
+      this.stepsScheme[this.selectedSchemeId],
+      ...this.stepsScheme.slice(this.selectedSchemeId + 1),
+    ]
+  }
+
+  async changeSteps(
+    value: UI_I_WizardStep[],
+    validationFunc?: (
+      value: UI_I_WizardStep[],
+      currentStep: UI_I_WizardStep,
+      nextStep: UI_I_WizardStep
+    ) => Promise<UI_I_ValidationReturn>,
+    finalValidationFunc?: (
+      value: UI_I_WizardStep[],
+      currentStep: UI_I_WizardStep,
+      nextStep: UI_I_WizardStep
+    ) => Promise<UI_I_ValidationReturn>,
+    isOnlyFinalValidation = false
+  ): Promise<void> {
+    const currentStep: UI_I_WizardStep | undefined = this.steps.find(
+      (step: UI_I_WizardStep) => this.isSelected(step.status)
+    )
+
+    const nextStep: UI_I_WizardStep | undefined = value.find(
+      (step: UI_I_WizardStep) => this.isSelected(step.status)
+    )
+
+    if (!currentStep || !nextStep) return
+    if (currentStep.id > nextStep.id) return this.changeStep(value)
+
+    if (
+      isOnlyFinalValidation &&
+      (this.isLastStep() ||
+        nextStep.id ===
+          this.selectedScheme.value[this.selectedScheme.value.length - 1]) &&
+      finalValidationFunc
+    ) {
+      this.finalValidationFunc(
+        value,
+        currentStep,
+        nextStep,
+        finalValidationFunc,
+        isOnlyFinalValidation
+      )
+
+      return
+    }
+
+    if (validationFunc) {
+      const validation: UI_I_ValidationReturn = await validationFunc(
+        value,
+        currentStep,
+        nextStep
+      )
+
+      if (
+        validation.stepHasError ||
+        validation.stepShouldStop?.ifFromAnyStep ||
+        validation.stepShouldStop?.ifOnCurrentStep
+      ) {
+        validation.stepShouldStop?.ifFromAnyStep &&
+          currentStep.id < validation.stepShouldStop?.stoppageStepId &&
+          this.selectStepHard(validation.stepShouldStop?.stoppageStepId)
+
+        validation.stepShouldStop?.ifOnCurrentStep &&
+          this.selectStepHard(validation.stepShouldStop?.stoppageStepId)
+
+        validation.stepHasError && this.goToFirstInvalidStep()
+
+        return
+      } else if (
+        (this.isLastStep() ||
+          nextStep.id ===
+            this.selectedScheme.value[this.selectedScheme.value.length - 1]) &&
+        finalValidationFunc
+      ) {
+        this.finalValidationFunc(
+          validation.newValue,
+          currentStep,
+          nextStep,
+          finalValidationFunc,
+          isOnlyFinalValidation
+        )
+
+        return
+      } else {
+        currentStep.status = UI_E_WIZARD_STATUS.COMPLETED
+      }
+
+      this.changeStep(validation.newValue)
+
+      return
+    }
+
+    this.changeStep(value)
+  }
+
+  selectStepHard(stepId: number): void {
+    const newSteps = this.steps.map((st: UI_I_WizardStep) => {
+      if (st.id < stepId) return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+
+      if (st.id === stepId)
+        return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
+
+      // TODO Было сделано на скорую руку
+      if (st.id > stepId && st.status === UI_E_WIZARD_STATUS.SELECTED)
+        return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+
+      return st
+    })
+
+    this.changeStep(newSteps)
+  }
+
+  isValidateForStep(
+    step: number,
+    currentStepId: number,
+    nextStepId: number
+  ): boolean {
+    return (
+      nextStepId > step &&
+      currentStepId <= step &&
+      this.selectedScheme.value.includes(step)
+    )
+  }
+
+  setValidation(
+    stepId: number,
+    field: string,
+    message: {
+      fieldMessage?: string
+      alertMessage?: string
+    }
+  ): true {
+    message.fieldMessage &&
+      this.setValidationError(stepId, field, message.fieldMessage)
+    message.alertMessage &&
+      this.setAlertMessage(stepId, field, message.alertMessage)
+
+    return true
+  }
+
+  removeValidationLocal(stepId: number, field: string): void {
+    this.setValidationError(stepId, field, '')
+    this.setAlertMessage(stepId, field, '')
+  }
+
+  removeValidation(
+    stepId: number,
+    field: string,
+    value: UI_I_WizardStep[]
+  ): UI_I_WizardStep[] {
+    let newValue: UI_I_WizardStep[] = this.removeValidationError(
+      stepId,
+      field,
+      true,
+      value
+    )
+
+    newValue = this.removeAlertMessage(stepId, field, newValue)
+    return newValue
+  }
+
+  reset(): void {
+    this.steps = useDeepCopy(this._initialSteps.value)
+    this.stepsScheme = useDeepCopy(this._initialStepsScheme.value)
+    this.selectedSchemeId = 0
+  }
+
+  setEmptyErrorFields(fields: { [key: string]: UI_I_ErrorFields }): {
+    [key: string]: UI_I_ErrorFields
+  } {
+    const keys: string[] = Object.keys(fields)
+    const obj: { [key: string]: UI_I_ErrorFields } = {}
+
+    keys.forEach((key: string): void => {
+      obj[key] = {
+        alert: '',
+        field: '',
+      }
+    })
+
+    return obj
+  }
+
+  resetAfterSelected(): void {
+    this.steps = this.steps.map(
+      (step: UI_I_WizardStep): UI_I_WizardStep =>
+        step.id > this.selectedStepId
+          ? {
+              ...step,
+              status: UI_E_WIZARD_STATUS.INACTIVE,
+              isValid: true,
+              fields: this.setEmptyErrorFields(step.fields),
+            }
+          : step
+    )
+  }
+
+  activeStepId(): number {
+    const activeStep = this.steps.find(
+      (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.ACTIVE
+    )?.id
+
+    const invalidStep = this.steps.find(
+      (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.INVALID
+    )?.id
+
+    return activeStep || invalidStep || 0
+  }
+
+  wasCompleted(): boolean {
+    return this.activeStepId() > this.selectedStepId
+  }
+
+  isLastStep(): boolean {
+    return (
+      this.selectedScheme.value[this.selectedScheme.value.length - 2] ===
+      this.selectedStepId
+    )
+  }
+
+  isSelectedScheme(schemeId: number): boolean {
+    return schemeId === this.selectedSchemeId
+  }
+
+  getStepIdByFieldName(fieldName: string): number {
+    return this.steps.find((step) => step.fields[fieldName])?.id || -1
+  }
+
+  setDynamicValidationField(fieldName: string | string[]): void {
+    const fields: {
+      [key: string]: UI_I_ErrorFields
+    } = this.steps[this.selectedStepId].fields
+
+    if (typeof fieldName === 'string') {
+      fields[fieldName] = {
+        alert: '',
+        field: '',
+      }
+    } else {
+      fieldName.forEach((name: string) => {
+        fields[name] = {
+          alert: '',
+          field: '',
+        }
+      })
+    }
+
+    this.steps = this.steps.map((step: UI_I_WizardStep) =>
+      step.id === this.selectedStepId
+        ? {
+            ...step,
+            fields,
+          }
+        : step
+    )
+  }
+
+  removeDynamicValidationField(fieldName: string | string[]): void {
+    const newFields: {
+      [key: string]: UI_I_ErrorFields
+    } = this.steps[this.selectedStepId].fields
+
+    if (typeof fieldName === 'string') {
+      delete newFields[fieldName]
+    } else {
+      fieldName.forEach((name: string) => {
+        delete newFields[name]
+      })
+    }
+
+    this.steps = this.steps.map((step: UI_I_WizardStep) =>
+      step.id === this.selectedStepId
+        ? {
+            ...step,
+            fields: newFields,
+          }
+        : step
+    )
+  }
+
+  validateFieldLocal(
+    stepId: number,
+    field: string,
+    rule: boolean | boolean[],
+    fieldMessage: string | string[],
+    alertMessage: string | string[]
+  ): void {
+    if (typeof rule === 'boolean') {
+      if (rule) {
+        this.setValidation(stepId, field, {
+          fieldMessage: fieldMessage as string,
+          alertMessage: alertMessage as string,
+        })
+      } else if (this.hasMessage(stepId, field)) {
+        this.removeValidationLocal(stepId, field)
+      }
+    } else {
+      const ruleIndex = rule.indexOf(true)
+
+      if (ruleIndex !== -1) {
+        this.setValidation(stepId, field, {
+          fieldMessage: fieldMessage[ruleIndex],
+          alertMessage: alertMessage[ruleIndex],
+        })
+      } else if (this.hasMessage(stepId, field)) {
+        this.removeValidationLocal(stepId, field)
+      }
+    }
+  }
+}