/* eslint-disable @typescript-eslint/no-unsafe-argument */
import React from 'react';
import { ContainerDeprecated, Progress } from '@nova-hf/ui';
import Wrapper from 'components/app-layout/Wrapper';
import { reaction } from 'mobx';
import { inject, observer } from 'mobx-react';
import Router from 'next/router';

interface IStepProps {
  children: React.ReactNode;
  checkout?: any;
  color: string;
  titleSteps: string[];
  returnLink: string;
  totalSteps: number;
  checkoutLink: string;
  subscriptionId: string;
  doNotUseStepChange?: boolean;
}

class Step extends React.Component {
  stepReaction: any;

  el: any;

  UNSAFE_componentWillReceiveProps(props: IStepProps) {
    const { checkout } = props;
    const { query } = Router;

    // Update the step according to the current url
    checkout.step = query ? parseInt(query.step, 10) : 1;
  }

  componentWillUnmount() {
    const { checkout } = this.props;

    if (this.stepReaction) {
      this.stepReaction();
      this.stepReaction = null;
    }
    // Clear the checkout
    checkout.reset();
  }

  componentDidMount() {
    const { checkout, subscriptionId, doNotUseStepChange } = this.props;
    const { query, pathname } = Router;
    const currentStep = query?.step;
    const pack = query?.pack;
    const ssn = query?.ssn;

    if (currentStep !== '1') {
      checkout.step = 1;
      if (query) {
        Router.replace({
          pathname,
          query: {
            step: '1',
            subscriptionId,
            pack,
            ssn,
          },
        });
      }
    }
    // Update path on step change
    if (!doNotUseStepChange) {
      this.stepReaction = reaction(
        () => checkout.step,
        (step) => {
          Router.replace({
            pathname,
            query: {
              step,
              subscriptionId,
              pack,
              ssn,
            },
          });
        },
      );
    }
  }

  changeStep = (step: number) => {
    const { checkout } = this.props;

    if (step) checkout.manuallySetStep(step);
    else checkout.next();
  };

  onClose = () => {
    const { returnLink } = this.props;

    Router.push(returnLink);
  };

  render() {
    const { color, children, returnLink, totalSteps, titleSteps, checkout, subscriptionId } =
      this.props;

    return (
      <Wrapper header="none" noFooter>
        <Progress
          length={totalSteps}
          steps={titleSteps}
          current={checkout.step}
          color={color}
          highestStep={checkout.highestStep}
          changeStep={this.changeStep}
          onClose={this.onClose}
        />
        <ContainerDeprecated spacing underBar>
          {React.Children.map(children, (c: any, i: number) => {
            if (i + 1 !== checkout.step) {
              return null;
            }

            return React.cloneElement(c, {
              onNext: this.changeStep,
              color,
              returnLink,
              subscriptionId,
            });
          })}
        </ContainerDeprecated>
      </Wrapper>
    );
  }
}

export default inject('checkout')(observer(Step));