import {
  Input,
  Inject,
  Output,
  NgZone,
  Renderer2,
  Component,
  Injectable,
  ElementRef,
  EventEmitter,
  ChangeDetectorRef,
} from '@angular/core';
import {
  XResourceIDs,
  XStandardType,
  XOneOrManyType,
  XColorIdentifier,
  XResourceIdentifier,
  XColorWithBrightness,
} from 'x-framework-core';
import {
  XBaseContainer,
  IXBaseContainer,
  XBaseContainerComponent,
} from './i-x-base.container';
import {
  XCardActionModel,
  XComponentCardContainer,
  IXComponentCardContainer,
} from '../x-card/x-card.typings';
import { map } from 'rxjs/operators';
import { Observable, forkJoin, Subject } from 'rxjs';
import { ViewportRuler } from '@angular/cdk/overlay';
import { XManagerService } from 'x-framework-services';
import { XIconIdentifier } from '../x-icon/x-icon.typings';
import { IXButtonContainer, XButtonType } from '../x-button/x-button.typings';
import { X_FRAMEWORK_COMPONENTS_CONFIG } from '../tokens/x-injectable-tokens';
import { XSlotNameIdentifier, XSlotName } from '../x-slotter/x-slotter.typings';
import { XFrameworkComponentsConfig } from '../config/x-framework-components.config';

//
export enum XNPRButtonType {
  Next = 'next',
  Prev = 'prev',
  Reset = 'reset',
}

//
export type XNPRButtonTypeIdentifier = XNPRButtonType | string;

//
//#region Next ...
export interface IXNextHost {
  canNext: XStandardType<boolean>;
  onNext: EventEmitter<string>;
}

export interface IXNextContainer extends IXBaseContainer {
  //
  //#region Next ...
  hasNext: XStandardType<boolean>;
  disableNext: XStandardType<boolean>;
  nextConfirmer: () => XStandardType<boolean>;
  nextPosition: XStandardType<XSlotNameIdentifier>;
  nextCssClass: XStandardType<XOneOrManyType<string>>;
  nextButton: XStandardType<Partial<IXButtonContainer>>;
  //#endregion
}

export const defaultNextButton: Partial<IXButtonContainer> = {
  title: XResourceIDs.next,
  type: XButtonType.Raised,
  color: XColorWithBrightness.Primary,
};

@Injectable({
  providedIn: 'root',
})
export abstract class XNextContainer
  extends XBaseContainer
  implements Readonly<IXNextContainer>
{
  //
  //#region Next ...
  readonly hasNext: XStandardType<boolean>;
  readonly disableNext: XStandardType<boolean>;
  readonly nextConfirmer: () => XStandardType<boolean>;
  readonly nextPosition: XStandardType<XSlotNameIdentifier> = XSlotName.START;
  readonly nextCssClass: XStandardType<XOneOrManyType<string>> =
    'ion-text-start';
  readonly nextButton: XStandardType<Partial<IXButtonContainer>> = {
    ...defaultNextButton,
  };
  //#endregion
}
//#endregion

//
//#region Prev ...
export interface IXPrevHost {
  canPrev: XStandardType<boolean>;
  onPrev: EventEmitter<string>;
}

export interface IXPrevContainer extends IXBaseContainer {
  //
  //#region Prev ...
  hasPrev: XStandardType<boolean>;
  disablePrev: XStandardType<boolean>;
  prevConfirmer: () => XStandardType<boolean>;
  prevPosition: XStandardType<XSlotNameIdentifier>;
  prevCssClass: XStandardType<XOneOrManyType<string>>;
  prevButton: XStandardType<Partial<IXButtonContainer>>;
  //#endregion
}

export const defaultPrevButton: Partial<IXButtonContainer> = {
  type: XButtonType.Raised,
  title: XResourceIDs.previous,
  color: XColorWithBrightness.Primary,
};

@Injectable({
  providedIn: 'root',
})
export abstract class XPrevContainer
  extends XBaseContainer
  implements Readonly<IXPrevContainer>
{
  //
  //#region Prev ...
  readonly hasPrev: XStandardType<boolean>;
  readonly disablePrev: XStandardType<boolean>;
  readonly prevConfirmer: () => XStandardType<boolean>;
  readonly prevPosition: XStandardType<XSlotNameIdentifier> = XSlotName.END;
  readonly prevCssClass: XStandardType<XOneOrManyType<string>> = 'ion-text-end';
  readonly prevButton: XStandardType<Partial<IXButtonContainer>> = {
    ...defaultPrevButton,
  };
  //#endregion
}
//#endregion

//
//#region Reset ...
export interface IXResetHost {
  canReset: XStandardType<boolean>;
  onReset: EventEmitter<string>;
}

export interface IXResetContainer extends IXBaseContainer {
  //
  //#region Reset ...
  hasReset: XStandardType<boolean>;
  disableReset: XStandardType<boolean>;
  resetConfirmer: () => XStandardType<boolean>;
  resetPosition: XStandardType<XSlotNameIdentifier>;
  resetCssClass: XStandardType<XOneOrManyType<string>>;
  resetButton: XStandardType<Partial<IXButtonContainer>>;
  //#endregion
}

export const defaultResetButton: Partial<IXButtonContainer> = {
  type: XButtonType.Raised,
  title: XResourceIDs.reset,
  color: XColorWithBrightness.Warning,
};

@Injectable({
  providedIn: 'root',
})
export abstract class XResetContainer
  extends XBaseContainer
  implements Readonly<IXResetContainer>
{
  //
  //#region Reset ...
  readonly hasReset: XStandardType<boolean>;
  readonly disableReset: XStandardType<boolean>;
  readonly resetConfirmer: () => XStandardType<boolean>;
  readonly resetPosition: XStandardType<XSlotNameIdentifier> = XSlotName.CENTER;
  readonly resetCssClass: XStandardType<XOneOrManyType<string>> =
    'ion-text-center';
  readonly resetButton: XStandardType<Partial<IXButtonContainer>> = {
    ...defaultResetButton,
  };
  //#endregion
}
//#endregion

//
//#region Combined ...
//
//#region Host ...
//
type XCompleteHostInterface = IXNextHost & IXPrevHost & IXResetHost;
// tslint:disable-next-line:no-empty-interface
export interface IXNextPrevResetHostContainer extends XCompleteHostInterface {}

@Injectable({
  providedIn: 'root',
})
export class XNextPrevResetHostContainer
  extends XBaseContainer
  implements Readonly<IXNextPrevResetHostContainer>
{
  //
  //#region Props ...
  //
  //#region Next ...
  readonly canNext: XStandardType<boolean> = true;
  readonly onNext: EventEmitter<string> = new EventEmitter<string>();
  //#endregion

  //
  //#region Prev ...
  readonly canPrev: XStandardType<boolean> = true;
  readonly onPrev: EventEmitter<string> = new EventEmitter<string>();
  //#endregion

  //
  //#region Reset ...
  readonly canReset: XStandardType<boolean> = true;
  readonly onReset: EventEmitter<string> = new EventEmitter<string>();
  //#endregion
  //#endregion
}

@Injectable()
@Component({
  template: ``,
})
export abstract class XNextPrevResetHostContainerComponent
  extends XBaseContainerComponent
  implements IXNextPrevResetHostContainer
{
  //
  //#region Props ...
  //
  //#region Next ...
  @Input()
  canNext: XStandardType<boolean> = this.propertyProvider.canNext;

  @Output()
  onNext: EventEmitter<string> = new EventEmitter();
  //#endregion

  //
  //#region Prev ...
  @Input()
  canPrev: XStandardType<boolean> = this.propertyProvider.canPrev;

  @Output()
  onPrev: EventEmitter<string> = new EventEmitter();
  //#endregion

  //
  //#region Reset ...
  @Input()
  canReset: XStandardType<boolean> = this.propertyProvider.canReset;

  @Output()
  onReset: EventEmitter<string> = new EventEmitter();
  //#endregion
  //#endregion

  //
  //#region Constructor ...
  public constructor(
    @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
    public config: XFrameworkComponentsConfig,
    public managerService: XManagerService,
    public element: ElementRef,
    public renderer: Renderer2,
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
    protected propertyProvider: XNextPrevResetHostContainer,
  ) {
    super(
      config,
      managerService,
      element,
      renderer,
      ruler,
      zone,
      changeDetector,
    );
  }
  //#endregion

  //
  //#region Abstract ...
  public extractProps(
    container?: IXNextPrevResetHostContainer,
  ): Observable<IXNextPrevResetHostContainer> {
    return forkJoin({
      //
      canNext: this.getValue(container ? container.canNext : this.canNext),
      canPrev: this.getValue(container ? container.canPrev : this.canPrev),
      canReset: this.getValue(container ? container.canReset : this.canReset),
    }).pipe(
      map((data) => {
        return {
          //
          ...data,

          //
          onNext: this.onNext,
          onPrev: this.onPrev,
          onReset: this.onReset,
        };
      }),
    );
  }
  //#endregion
}
//#endregion

//
//#region XCardHost
//
type TXCardEmptyContainer = IXComponentCardContainer &
  IXNextPrevResetHostContainer;
export interface IXCardNextPrevResetHostContainer extends TXCardEmptyContainer {}

//
@Injectable({
  providedIn: 'root',
})
export class XCardNextPrevResetHostContainer
  extends XBaseContainer
  implements IXCardNextPrevResetHostContainer
{
  //
  //#region Props ...
  //
  //#region XComponentCard ...
  readonly isInPage: XStandardType<boolean> =
    this.cardPropertyProvider.isInPage;
  readonly wrapWithCard: XStandardType<boolean> =
    this.cardPropertyProvider.wrapWithCard;
  readonly cardShowFooter: XStandardType<boolean> =
    this.cardPropertyProvider.cardShowFooter;
  readonly cardShowActions: XStandardType<boolean> =
    this.cardPropertyProvider.cardShowActions;
  readonly cardColor: XStandardType<XColorIdentifier> =
    this.cardPropertyProvider.cardColor;
  readonly cardForegroundColor: XStandardType<boolean> =
    this.cardPropertyProvider.cardForegroundColor;
  readonly cardTitle: XStandardType<XResourceIdentifier> =
    this.cardPropertyProvider.cardTitle;
  readonly cardActionProvider: Subject<XCardActionModel> =
    this.cardPropertyProvider.cardActionProvider;
  readonly cardSubTitle: XStandardType<XResourceIdentifier> =
    this.cardPropertyProvider.cardSubTitle;
  readonly cardCssClass: XStandardType<XOneOrManyType<string>> =
    this.cardPropertyProvider.cardCssClass;
  readonly cardShowFullScreenButton: XStandardType<boolean> =
    this.cardPropertyProvider.cardShowFullScreenButton;
  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
    this.cardPropertyProvider.cardEnterFullScreenButtonIcon;
  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
    this.cardPropertyProvider.cardEnterFullScreenButtonColor;
  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
    this.cardPropertyProvider.cardExitFullScreenButtonIcon;
  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
    this.cardPropertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
  //#region XNextPrevResetHost ...
  //
  //#region Next ...
  readonly canNext: XStandardType<boolean> =
    this.nextPrevResetHostPropertyProvider.canNext;
  readonly onNext: EventEmitter<string> =
    this.nextPrevResetHostPropertyProvider.onNext;
  //#endregion

  //
  //#region Prev ...
  readonly canPrev: XStandardType<boolean> =
    this.nextPrevResetHostPropertyProvider.canPrev;
  readonly onPrev: EventEmitter<string> =
    this.nextPrevResetHostPropertyProvider.onPrev;
  //#endregion

  //
  //#region Reset ...
  readonly canReset: XStandardType<boolean> =
    this.nextPrevResetHostPropertyProvider.canReset;
  readonly onReset: EventEmitter<string> =
    this.nextPrevResetHostPropertyProvider.onReset;
  //#endregion
  //#endregion
  //#endregion

  //
  //#region Constructor ...
  constructor(
    protected cardPropertyProvider: XComponentCardContainer,
    protected nextPrevResetHostPropertyProvider: XNextPrevResetHostContainer,
  ) {
    super();
  }
  //#endregion
}

//
@Injectable()
@Component({
  template: ``,
})
export class XCardNextPrevResetHostContainerComponent
  extends XBaseContainerComponent
  implements IXCardNextPrevResetHostContainer
{
  //
  //#region Props ...
  //
  //#region XComponentCard ...
  @Input()
  isInPage: XStandardType<boolean> = this.propertyProvider.isInPage;

  @Input()
  wrapWithCard: XStandardType<boolean> = this.propertyProvider.wrapWithCard;

  @Input()
  cardShowFooter: XStandardType<boolean> = this.propertyProvider.cardShowFooter;

  @Input()
  cardShowActions: XStandardType<boolean> =
    this.propertyProvider.cardShowActions;

  @Input()
  cardColor: XStandardType<XColorIdentifier> = this.propertyProvider.cardColor;

  @Input()
  cardForegroundColor: XStandardType<boolean> =
    this.propertyProvider.cardForegroundColor;

  @Input()
  cardTitle: XStandardType<XResourceIdentifier> =
    this.propertyProvider.cardTitle;

  @Input()
  cardActionProvider: Subject<XCardActionModel> =
    this.propertyProvider.cardActionProvider;

  @Input()
  cardSubTitle: XStandardType<XResourceIdentifier> =
    this.propertyProvider.cardSubTitle;

  @Input()
  cardCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.cardCssClass;

  @Input()
  cardShowFullScreenButton: XStandardType<boolean> =
    this.propertyProvider.cardShowFullScreenButton;

  @Input()
  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
    this.propertyProvider.cardEnterFullScreenButtonIcon;

  @Input()
  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
    this.propertyProvider.cardEnterFullScreenButtonColor;

  @Input()
  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
    this.propertyProvider.cardExitFullScreenButtonIcon;

  @Input()
  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
    this.propertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
  //#region XNextPrevResetHost ...
  //
  //#region Next ...
  @Input()
  canNext: XStandardType<boolean> = this.propertyProvider.canNext;

  @Output()
  onNext: EventEmitter<string> = new EventEmitter();
  //#endregion

  //
  //#region Prev ...
  @Input()
  canPrev: XStandardType<boolean> = this.propertyProvider.canPrev;

  @Output()
  onPrev: EventEmitter<string> = new EventEmitter();
  //#endregion

  //
  //#region Reset ...
  @Input()
  canReset: XStandardType<boolean> = this.propertyProvider.canReset;

  @Output()
  onReset: EventEmitter<string> = new EventEmitter();
  //#endregion
  //#endregion
  //#endregion

  //
  //#region Constructor ...
  constructor(
    @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
    public config: XFrameworkComponentsConfig,
    public managerService: XManagerService,
    public element: ElementRef,
    public renderer: Renderer2,
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
    protected propertyProvider: XCardNextPrevResetHostContainer,
  ) {
    super(
      config,
      managerService,
      element,
      renderer,
      ruler,
      zone,
      changeDetector,
    );
  }
  //#endregion

  //
  //#region Abstract ...
  public extractProps(
    container?: IXCardNextPrevResetHostContainer,
  ): Observable<IXCardNextPrevResetHostContainer> {
    return forkJoin({
      //
      //#region XComponentCard ...
      cardCssClass: this.getArrayValue(
        container ? container.cardCssClass : this.cardCssClass,
      ),
      isInPage: this.getValue(container ? container.isInPage : this.isInPage),
      wrapWithCard: this.getValue(
        container ? container.wrapWithCard : this.wrapWithCard,
      ),
      cardShowFooter: this.getValue(
        container ? container.cardShowFooter : this.cardShowFooter,
      ),
      cardShowActions: this.getValue(
        container ? container.cardShowActions : this.cardShowActions,
      ),
      cardColor: this.getValue(
        container ? container.cardColor : this.cardColor,
      ),
      cardForegroundColor: this.getValue(
        container ? container.cardForegroundColor : this.cardForegroundColor,
      ),
      cardTitle: this.getValue(
        container ? container.cardTitle : this.cardTitle,
      ),
      cardSubTitle: this.getValue(
        container ? container.cardSubTitle : this.cardSubTitle,
      ),
      cardShowFullScreenButton: this.getValue(
        container
          ? container.cardShowFullScreenButton
          : this.cardShowFullScreenButton,
      ),
      cardEnterFullScreenButtonIcon: this.getValue(
        container
          ? container.cardEnterFullScreenButtonIcon
          : this.cardEnterFullScreenButtonIcon,
      ),
      cardEnterFullScreenButtonColor: this.getValue(
        container
          ? container.cardEnterFullScreenButtonColor
          : this.cardEnterFullScreenButtonColor,
      ),
      cardExitFullScreenButtonIcon: this.getValue(
        container
          ? container.cardExitFullScreenButtonIcon
          : this.cardExitFullScreenButtonIcon,
      ),
      cardExitFullScreenButtonColor: this.getValue(
        container
          ? container.cardExitFullScreenButtonColor
          : this.cardExitFullScreenButtonColor,
      ),
      //#endregion

      //
      //#region XNextPrevResetHost ...
      //
      canNext: this.getValue(container ? container.canNext : this.canNext),
      canPrev: this.getValue(container ? container.canPrev : this.canPrev),
      canReset: this.getValue(container ? container.canReset : this.canReset),
      //#endregion
    }).pipe(
      map((data) => {
        return {
          //
          ...data,

          //
          cardActionProvider: container
            ? container.cardActionProvider
            : this.cardActionProvider,

          //
          onNext: this.onNext,
          onPrev: this.onPrev,
          onReset: this.onReset,
        };
      }),
    );
  }
  //#endregion
}
//#endregion

//
//#region Interface ...
//
type TXNextPrevResetContainer = IXNextContainer &
  IXPrevContainer &
  IXResetContainer;
// tslint:disable-next-line:no-empty-interface
export interface IXNextPrevResetContainer
  extends IXBaseContainer, TXNextPrevResetContainer {}

@Injectable({
  providedIn: 'root',
})
export class XNextPrevResetContainer
  extends XBaseContainer
  implements Readonly<IXNextPrevResetContainer>
{
  //
  //#region Props ...
  //
  //#region Next ...
  hasNext: XStandardType<boolean> = this.nextPropertyProvider.hasNext;
  disableNext: XStandardType<boolean> = this.nextPropertyProvider.disableNext;
  nextConfirmer: () => XStandardType<boolean> =
    this.nextPropertyProvider.nextConfirmer;
  nextPosition: XStandardType<XSlotNameIdentifier> =
    this.nextPropertyProvider.nextPosition;
  nextCssClass: XStandardType<XOneOrManyType<string>> =
    this.nextPropertyProvider.nextCssClass;
  nextButton: XStandardType<Partial<IXButtonContainer>> =
    this.nextPropertyProvider.nextButton;
  //#endregion

  //
  //#region Prev ...
  hasPrev: XStandardType<boolean> = this.prevPropertyProvider.hasPrev;
  disablePrev: XStandardType<boolean> = this.prevPropertyProvider.disablePrev;
  prevConfirmer: () => XStandardType<boolean> =
    this.prevPropertyProvider.prevConfirmer;
  prevPosition: XStandardType<XSlotNameIdentifier> =
    this.prevPropertyProvider.prevPosition;
  prevCssClass: XStandardType<XOneOrManyType<string>> =
    this.prevPropertyProvider.prevCssClass;
  prevButton: XStandardType<Partial<IXButtonContainer>> =
    this.prevPropertyProvider.prevButton;
  //#endregion

  //
  //#region Reset ...
  hasReset: XStandardType<boolean> = this.resetpropertyProvider.hasReset;
  disableReset: XStandardType<boolean> =
    this.resetpropertyProvider.disableReset;
  resetConfirmer: () => XStandardType<boolean> =
    this.resetpropertyProvider.resetConfirmer;
  resetPosition: XStandardType<XSlotNameIdentifier> =
    this.resetpropertyProvider.resetPosition;
  resetCssClass: XStandardType<XOneOrManyType<string>> =
    this.resetpropertyProvider.resetCssClass;
  resetButton: XStandardType<Partial<IXButtonContainer>> =
    this.resetpropertyProvider.resetButton;
  //#endregion
  //#endregion

  //
  //#region Constructor ...
  constructor(
    protected prevPropertyProvider: XPrevContainer,
    protected nextPropertyProvider: XNextContainer,
    protected resetpropertyProvider: XResetContainer,
  ) {
    super();
  }
  //#endregion
}

@Injectable()
@Component({
  template: ``,
})
export abstract class XNextPrevResetContainerComponent
  extends XBaseContainerComponent
  implements IXNextPrevResetContainer
{
  //
  //#region Props ...
  //
  //#region Next ...
  @Input()
  hasNext: XStandardType<boolean> = this.propertyProvider.hasNext;

  @Input()
  disableNext: XStandardType<boolean> = this.propertyProvider.disableNext;

  @Input()
  nextConfirmer: () => XStandardType<boolean> =
    this.propertyProvider.nextConfirmer;

  @Input()
  nextPosition: XStandardType<XSlotNameIdentifier> =
    this.propertyProvider.nextPosition;

  @Input()
  nextCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.nextCssClass;

  @Input()
  nextButton: XStandardType<Partial<IXButtonContainer>> =
    this.propertyProvider.nextButton;
  //#endregion

  //
  //#region Prev ...
  @Input()
  hasPrev: XStandardType<boolean> = this.propertyProvider.hasPrev;

  @Input()
  disablePrev: XStandardType<boolean> = this.propertyProvider.disablePrev;

  @Input()
  prevConfirmer: () => XStandardType<boolean> =
    this.propertyProvider.prevConfirmer;

  @Input()
  prevPosition: XStandardType<XSlotNameIdentifier> =
    this.propertyProvider.prevPosition;

  @Input()
  prevCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.prevCssClass;

  @Input()
  prevButton: XStandardType<Partial<IXButtonContainer>> =
    this.propertyProvider.prevButton;
  //#endregion

  //
  //#region Reset ...
  @Input()
  hasReset: XStandardType<boolean> = this.propertyProvider.hasReset;

  @Input()
  disableReset: XStandardType<boolean> = this.propertyProvider.disableReset;

  @Input()
  resetConfirmer: () => XStandardType<boolean> =
    this.propertyProvider.resetConfirmer;

  @Input()
  resetPosition: XStandardType<XSlotNameIdentifier> =
    this.propertyProvider.resetPosition;

  @Input()
  resetCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.resetCssClass;

  @Input()
  resetButton: XStandardType<Partial<IXButtonContainer>> =
    this.propertyProvider.resetButton;
  //#endregion
  //#endregion

  //
  //#region Constructor ...
  public constructor(
    @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
    public config: XFrameworkComponentsConfig,
    public managerService: XManagerService,
    public element: ElementRef,
    public renderer: Renderer2,
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
    protected propertyProvider: XNextPrevResetContainer,
  ) {
    super(
      config,
      managerService,
      element,
      renderer,
      ruler,
      zone,
      changeDetector,
    );
  }
  //#endregion

  //
  //#region Abstract ...
  public extractProps(
    container?: IXNextPrevResetContainer,
  ): Observable<IXNextPrevResetContainer> {
    return forkJoin({
      //
      hasNext: this.getValue(container ? container.hasNext : this.hasNext),
      disableNext: this.getValue(
        container ? container.disableNext : this.disableNext,
      ),
      nextConfirmer: this.getValue(
        container ? container.nextConfirmer : this.nextConfirmer,
      ),
      nextPosition: this.getValue(
        container ? container.nextPosition : this.nextPosition,
      ),
      nextCssClass: this.getValue(
        container ? container.nextCssClass : this.nextCssClass,
      ),
      nextButton: this.getValue(
        container ? container.nextButton : this.nextButton,
      ),
      hasPrev: this.getValue(container ? container.hasPrev : this.hasPrev),
      disablePrev: this.getValue(
        container ? container.disablePrev : this.disablePrev,
      ),
      prevConfirmer: this.getValue(
        container ? container.prevConfirmer : this.prevConfirmer,
      ),
      prevPosition: this.getValue(
        container ? container.prevPosition : this.prevPosition,
      ),
      prevCssClass: this.getValue(
        container ? container.prevCssClass : this.prevCssClass,
      ),
      prevButton: this.getValue(
        container ? container.prevButton : this.prevButton,
      ),
      hasReset: this.getValue(container ? container.hasReset : this.hasReset),
      disableReset: this.getValue(
        container ? container.disableReset : this.disableReset,
      ),
      resetConfirmer: this.getValue(
        container ? container.resetConfirmer : this.resetConfirmer,
      ),
      resetPosition: this.getValue(
        container ? container.resetPosition : this.resetPosition,
      ),
      resetCssClass: this.getValue(
        container ? container.resetCssClass : this.resetCssClass,
      ),
      resetButton: this.getValue(
        container ? container.resetButton : this.resetButton,
      ),
    }).pipe(
      map((data) => {
        return {
          //
          ...data,

          //
        };
      }),
    );
  }
  //#endregion
}
//#endregion

//
//#region IXNextPrevResetAndHostContainer ...
type TXNextPrevResetAndHostContainer = IXNextPrevResetContainer &
  IXCardNextPrevResetHostContainer;
export interface IXNextPrevResetAndHostContainer
  extends IXBaseContainer, TXNextPrevResetAndHostContainer {}

@Injectable({
  providedIn: 'root',
})
export class XNextPrevResetAndHostContainer
  extends XBaseContainer
  implements Readonly<IXNextPrevResetAndHostContainer>
{
  //
  //#region Props ...
  //
  //#region Inteface ...
  //
  //#region Next ...
  hasNext: XStandardType<boolean> = this.nextPrevResetPropertyProvider.hasNext;
  disableNext: XStandardType<boolean> =
    this.nextPrevResetPropertyProvider.disableNext;
  nextConfirmer: () => XStandardType<boolean> =
    this.nextPrevResetPropertyProvider.nextConfirmer;
  nextPosition: XStandardType<XSlotNameIdentifier> =
    this.nextPrevResetPropertyProvider.nextPosition;
  nextCssClass: XStandardType<XOneOrManyType<string>> =
    this.nextPrevResetPropertyProvider.nextCssClass;
  nextButton: XStandardType<Partial<IXButtonContainer>> =
    this.nextPrevResetPropertyProvider.nextButton;
  //#endregion

  //
  //#region Prev ...
  hasPrev: XStandardType<boolean> = this.nextPrevResetPropertyProvider.hasPrev;
  disablePrev: XStandardType<boolean> =
    this.nextPrevResetPropertyProvider.disablePrev;
  prevConfirmer: () => XStandardType<boolean> =
    this.nextPrevResetPropertyProvider.prevConfirmer;
  prevPosition: XStandardType<XSlotNameIdentifier> =
    this.nextPrevResetPropertyProvider.prevPosition;
  prevCssClass: XStandardType<XOneOrManyType<string>> =
    this.nextPrevResetPropertyProvider.prevCssClass;
  prevButton: XStandardType<Partial<IXButtonContainer>> =
    this.nextPrevResetPropertyProvider.prevButton;
  //#endregion

  //
  //#region Reset ...
  hasReset: XStandardType<boolean> =
    this.nextPrevResetPropertyProvider.hasReset;
  disableReset: XStandardType<boolean> =
    this.nextPrevResetPropertyProvider.disableReset;
  resetConfirmer: () => XStandardType<boolean> =
    this.nextPrevResetPropertyProvider.resetConfirmer;
  resetPosition: XStandardType<XSlotNameIdentifier> =
    this.nextPrevResetPropertyProvider.resetPosition;
  resetCssClass: XStandardType<XOneOrManyType<string>> =
    this.nextPrevResetPropertyProvider.resetCssClass;
  resetButton: XStandardType<Partial<IXButtonContainer>> =
    this.nextPrevResetPropertyProvider.resetButton;
  //#endregion
  //#endregion

  //
  //#region Host ...
  //
  //#region Next ...
  readonly canNext: XStandardType<boolean> =
    this.cardNextPrevResetPropertyProvider.canNext;
  readonly onNext: EventEmitter<string> =
    this.cardNextPrevResetPropertyProvider.onNext;
  //#endregion

  //
  //#region Prev ...
  readonly canPrev: XStandardType<boolean> =
    this.cardNextPrevResetPropertyProvider.canPrev;
  readonly onPrev: EventEmitter<string> =
    this.cardNextPrevResetPropertyProvider.onPrev;
  //#endregion

  //
  //#region Reset ...
  readonly canReset: XStandardType<boolean> =
    this.cardNextPrevResetPropertyProvider.canReset;
  readonly onReset: EventEmitter<string> =
    this.cardNextPrevResetPropertyProvider.onReset;
  //#endregion
  //#endregion

  //
  //#region XComponentCard ...
  readonly isInPage: XStandardType<boolean> =
    this.cardNextPrevResetPropertyProvider.isInPage;
  readonly wrapWithCard: XStandardType<boolean> =
    this.cardNextPrevResetPropertyProvider.wrapWithCard;
  readonly cardShowFooter: XStandardType<boolean> =
    this.cardNextPrevResetPropertyProvider.cardShowFooter;
  readonly cardShowActions: XStandardType<boolean> =
    this.cardNextPrevResetPropertyProvider.cardShowActions;
  readonly cardColor: XStandardType<XColorIdentifier> =
    this.cardNextPrevResetPropertyProvider.cardColor;
  readonly cardForegroundColor: XStandardType<boolean> =
    this.cardNextPrevResetPropertyProvider.cardForegroundColor;
  readonly cardTitle: XStandardType<XResourceIdentifier> =
    this.cardNextPrevResetPropertyProvider.cardTitle;
  readonly cardActionProvider: Subject<XCardActionModel> =
    this.cardNextPrevResetPropertyProvider.cardActionProvider;
  readonly cardSubTitle: XStandardType<XResourceIdentifier> =
    this.cardNextPrevResetPropertyProvider.cardSubTitle;
  readonly cardCssClass: XStandardType<XOneOrManyType<string>> =
    this.cardNextPrevResetPropertyProvider.cardCssClass;
  readonly cardShowFullScreenButton: XStandardType<boolean> =
    this.cardNextPrevResetPropertyProvider.cardShowFullScreenButton;
  readonly cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
    this.cardNextPrevResetPropertyProvider.cardEnterFullScreenButtonIcon;
  readonly cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
    this.cardNextPrevResetPropertyProvider.cardEnterFullScreenButtonColor;
  readonly cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
    this.cardNextPrevResetPropertyProvider.cardExitFullScreenButtonIcon;
  readonly cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
    this.cardNextPrevResetPropertyProvider.cardExitFullScreenButtonColor;
  //#endregion
  //#endregion

  //
  //#region Constructor ...
  constructor(
    protected nextPrevResetPropertyProvider: XNextPrevResetContainer,
    protected cardNextPrevResetPropertyProvider: XCardNextPrevResetHostContainer,
  ) {
    super();
  }
  //#endregion
}

@Injectable()
@Component({
  template: ``,
})
export class XNextPrevResetAndHostContainerComponent
  extends XBaseContainerComponent
  implements IXNextPrevResetAndHostContainer
{
  //
  //#region Props ...
  //
  //#region XComponentCard ...
  @Input()
  isInPage: XStandardType<boolean> = this.propertyProvider.isInPage;

  @Input()
  wrapWithCard: XStandardType<boolean> = this.propertyProvider.wrapWithCard;

  @Input()
  cardShowFooter: XStandardType<boolean> = this.propertyProvider.cardShowFooter;

  @Input()
  cardShowActions: XStandardType<boolean> =
    this.propertyProvider.cardShowActions;

  @Input()
  cardColor: XStandardType<XColorIdentifier> = this.propertyProvider.cardColor;

  @Input()
  cardForegroundColor: XStandardType<boolean> =
    this.propertyProvider.cardForegroundColor;

  @Input()
  cardTitle: XStandardType<XResourceIdentifier> =
    this.propertyProvider.cardTitle;

  @Input()
  cardActionProvider: Subject<XCardActionModel> =
    this.propertyProvider.cardActionProvider;

  @Input()
  cardSubTitle: XStandardType<XResourceIdentifier> =
    this.propertyProvider.cardSubTitle;

  @Input()
  cardCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.cardCssClass;

  @Input()
  cardShowFullScreenButton: XStandardType<boolean> =
    this.propertyProvider.cardShowFullScreenButton;

  @Input()
  cardEnterFullScreenButtonIcon: XStandardType<XIconIdentifier> =
    this.propertyProvider.cardEnterFullScreenButtonIcon;

  @Input()
  cardEnterFullScreenButtonColor: XStandardType<XColorIdentifier> =
    this.propertyProvider.cardEnterFullScreenButtonColor;

  @Input()
  cardExitFullScreenButtonIcon: XStandardType<XIconIdentifier> =
    this.propertyProvider.cardExitFullScreenButtonIcon;

  @Input()
  cardExitFullScreenButtonColor: XStandardType<XColorIdentifier> =
    this.propertyProvider.cardExitFullScreenButtonColor;
  //#endregion

  //
  //#region XNextPrevResetHost ...
  //
  //#region Next ...
  @Input()
  canNext: XStandardType<boolean> = this.propertyProvider.canNext;

  @Output()
  onNext: EventEmitter<string> = new EventEmitter();
  //#endregion

  //
  //#region Prev ...
  @Input()
  canPrev: XStandardType<boolean> = this.propertyProvider.canPrev;

  @Output()
  onPrev: EventEmitter<string> = new EventEmitter();
  //#endregion

  //
  //#region Reset ...
  @Input()
  canReset: XStandardType<boolean> = this.propertyProvider.canReset;

  @Output()
  onReset: EventEmitter<string> = new EventEmitter();
  //#endregion
  //#endregion

  //
  //#region Props ...
  //
  //#region Next ...
  @Input()
  hasNext: XStandardType<boolean> = this.propertyProvider.hasNext;

  @Input()
  disableNext: XStandardType<boolean> = this.propertyProvider.disableNext;

  @Input()
  nextConfirmer: () => XStandardType<boolean> =
    this.propertyProvider.nextConfirmer;

  @Input()
  nextPosition: XStandardType<XSlotNameIdentifier> =
    this.propertyProvider.nextPosition;

  @Input()
  nextCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.nextCssClass;

  @Input()
  nextButton: XStandardType<Partial<IXButtonContainer>> =
    this.propertyProvider.nextButton;
  //#endregion

  //
  //#region Prev ...
  @Input()
  hasPrev: XStandardType<boolean> = this.propertyProvider.hasPrev;

  @Input()
  disablePrev: XStandardType<boolean> = this.propertyProvider.disablePrev;

  @Input()
  prevConfirmer: () => XStandardType<boolean> =
    this.propertyProvider.prevConfirmer;

  @Input()
  prevPosition: XStandardType<XSlotNameIdentifier> =
    this.propertyProvider.prevPosition;

  @Input()
  prevCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.prevCssClass;

  @Input()
  prevButton: XStandardType<Partial<IXButtonContainer>> =
    this.propertyProvider.prevButton;
  //#endregion

  //
  //#region Reset ...
  @Input()
  hasReset: XStandardType<boolean> = this.propertyProvider.hasReset;

  @Input()
  disableReset: XStandardType<boolean> = this.propertyProvider.disableReset;

  @Input()
  resetConfirmer: () => XStandardType<boolean> =
    this.propertyProvider.resetConfirmer;

  @Input()
  resetPosition: XStandardType<XSlotNameIdentifier> =
    this.propertyProvider.resetPosition;

  @Input()
  resetCssClass: XStandardType<XOneOrManyType<string>> =
    this.propertyProvider.resetCssClass;

  @Input()
  resetButton: XStandardType<Partial<IXButtonContainer>> =
    this.propertyProvider.resetButton;
  //#endregion
  //#endregion
  //#endregion

  //
  //#region Constructor ...
  constructor(
    @Inject(X_FRAMEWORK_COMPONENTS_CONFIG)
    public config: XFrameworkComponentsConfig,
    public managerService: XManagerService,
    public element: ElementRef,
    public renderer: Renderer2,
    public ruler: ViewportRuler,
    public zone: NgZone,
    public changeDetector: ChangeDetectorRef,
    protected propertyProvider: XNextPrevResetAndHostContainer,
  ) {
    super(
      config,
      managerService,
      element,
      renderer,
      ruler,
      zone,
      changeDetector,
    );
  }
  //#endregion

  //
  //#region Abstract ...
  public extractProps(
    container?: IXNextPrevResetAndHostContainer,
  ): Observable<IXNextPrevResetAndHostContainer> {
    return forkJoin({
      //
      //#region XComponentCard ...
      cardCssClass: this.getArrayValue(
        container ? container.cardCssClass : this.cardCssClass,
      ),
      isInPage: this.getValue(container ? container.isInPage : this.isInPage),
      wrapWithCard: this.getValue(
        container ? container.wrapWithCard : this.wrapWithCard,
      ),
      cardShowFooter: this.getValue(
        container ? container.cardShowFooter : this.cardShowFooter,
      ),
      cardShowActions: this.getValue(
        container ? container.cardShowActions : this.cardShowActions,
      ),
      cardColor: this.getValue(
        container ? container.cardColor : this.cardColor,
      ),
      cardForegroundColor: this.getValue(
        container ? container.cardForegroundColor : this.cardForegroundColor,
      ),
      cardTitle: this.getValue(
        container ? container.cardTitle : this.cardTitle,
      ),
      cardSubTitle: this.getValue(
        container ? container.cardSubTitle : this.cardSubTitle,
      ),
      cardShowFullScreenButton: this.getValue(
        container
          ? container.cardShowFullScreenButton
          : this.cardShowFullScreenButton,
      ),
      cardEnterFullScreenButtonIcon: this.getValue(
        container
          ? container.cardEnterFullScreenButtonIcon
          : this.cardEnterFullScreenButtonIcon,
      ),
      cardEnterFullScreenButtonColor: this.getValue(
        container
          ? container.cardEnterFullScreenButtonColor
          : this.cardEnterFullScreenButtonColor,
      ),
      cardExitFullScreenButtonIcon: this.getValue(
        container
          ? container.cardExitFullScreenButtonIcon
          : this.cardExitFullScreenButtonIcon,
      ),
      cardExitFullScreenButtonColor: this.getValue(
        container
          ? container.cardExitFullScreenButtonColor
          : this.cardExitFullScreenButtonColor,
      ),
      //#endregion

      //
      //#region XNextPrevResetHost ...
      //
      canNext: this.getValue(container ? container.canNext : this.canNext),
      canPrev: this.getValue(container ? container.canPrev : this.canPrev),
      canReset: this.getValue(container ? container.canReset : this.canReset),
      //#endregion

      //
      //#region Interface ...
      //
      hasNext: this.getValue(container ? container.hasNext : this.hasNext),
      disableNext: this.getValue(
        container ? container.disableNext : this.disableNext,
      ),
      nextConfirmer: this.getValue(
        container ? container.nextConfirmer : this.nextConfirmer,
      ),
      nextPosition: this.getValue(
        container ? container.nextPosition : this.nextPosition,
      ),
      nextCssClass: this.getValue(
        container ? container.nextCssClass : this.nextCssClass,
      ),
      nextButton: this.getValue(
        container ? container.nextButton : this.nextButton,
      ),
      hasPrev: this.getValue(container ? container.hasPrev : this.hasPrev),
      disablePrev: this.getValue(
        container ? container.disablePrev : this.disablePrev,
      ),
      prevConfirmer: this.getValue(
        container ? container.prevConfirmer : this.prevConfirmer,
      ),
      prevPosition: this.getValue(
        container ? container.prevPosition : this.prevPosition,
      ),
      prevCssClass: this.getValue(
        container ? container.prevCssClass : this.prevCssClass,
      ),
      prevButton: this.getValue(
        container ? container.prevButton : this.prevButton,
      ),
      hasReset: this.getValue(container ? container.hasReset : this.hasReset),
      disableReset: this.getValue(
        container ? container.disableReset : this.disableReset,
      ),
      resetConfirmer: this.getValue(
        container ? container.resetConfirmer : this.resetConfirmer,
      ),
      resetPosition: this.getValue(
        container ? container.resetPosition : this.resetPosition,
      ),
      resetCssClass: this.getValue(
        container ? container.resetCssClass : this.resetCssClass,
      ),
      resetButton: this.getValue(
        container ? container.resetButton : this.resetButton,
      ),
      //#endregion
    }).pipe(
      map((data) => {
        return {
          //
          ...data,

          //
          cardActionProvider: container
            ? container.cardActionProvider
            : this.cardActionProvider,

          //
          onNext: this.onNext,
          onPrev: this.onPrev,
          onReset: this.onReset,
        };
      }),
    );
  }
  //#endregion
}
//#endregion
//#endregion