import * as React from 'react';
import { computed, makeObservable } from 'mobx';
import { observer, inject } from 'mobx-react';
import { StepTitle, ServicePacks } from '@nova-hf/ui';
import Router from 'next/router';

type IChoosePlanProps = {
  color: string;
  returnLink: string;
  onNext: () => void;
  change?: any;
  authentication?: any;
};

class ChoosePlan extends React.Component<IChoosePlanProps> {
  constructor(props: IChoosePlanProps) {
    super(props);

    makeObservable(this, {
      category: computed,
    });
  }

  componentDidMount() {
    const { returnLink } = this.props;

    if (!this.category || !this.category.list) {
      Router.push(returnLink).then(() => window.scrollTo(0, 0));
    }
  }

  onSelect = (item: any) => {
    const { change, onNext } = this.props;
    const { packToChange, autoRefillToChange } = change;

    if (autoRefillToChange) {
      change.selectedRefill = item;
    } else if (packToChange) {
      switch (packToChange.info.contentType) {
        case 'servicepack':
          change.selectedServicepack = item;
          break;
        case 'refill':
          change.selectedRefill = item;
          break;
        case 'rateplan':
          change.selectedRateplan = item;
          break;
      }
    }

    change.checkEffectTime = true;
    onNext();
  };

  get category() {
    const { change } = this.props;
    const {
      packToChange,
      autoRefillToChange,
      selectedServicepack,
      selectedRefill,
      selectedRateplan,
      servicepackType,
      selectedRateplanCategory,
      selectedRefillCategory,
    } = change;

    if (autoRefillToChange) {
      return {
        selected: selectedRefill,
        name: selectedRefillCategory.name,
        description: selectedRefillCategory.description,
        list: selectedRefillCategory.refills,
      };
    }

    if (!packToChange) return;

    switch (packToChange.info.contentType) {
      case 'servicepack':
        return (
          servicepackType && {
            selected: selectedServicepack,
            name: servicepackType.name,
            description: servicepackType.description,
            list: servicepackType.servicepacks,
          }
        );
      case 'refill':
        return (
          selectedRefillCategory && {
            selected: selectedRefill,
            name: selectedRefillCategory.name,
            description: selectedRefillCategory.description,
            list: selectedRefillCategory.refills,
          }
        );
      case 'rateplan':
        return (
          selectedRateplanCategory && {
            selected: selectedRateplan,
            name: selectedRateplanCategory.name,
            description: selectedRateplanCategory.description,
            list: selectedRateplanCategory.rateplans,
          }
        );
      default:
        return null;
    }
  }

  render() {
    const {
      color,
      authentication: { isStaff },
    } = this.props;

    if (!this.category || !this.category.list) return null;

    const { list, name, description } = this.category;
    const filteredList = isStaff ? list : list?.filter((r: any) => !r.isVip);

    return (
      <>
        <StepTitle title={name} subtitle={description} color={color} />

        <ServicePacks
          color={color}
          list={filteredList}
          selected={this.category.selected}
          onSelect={this.onSelect}
          big
        />
      </>
    );
  }
}

export default inject('change', 'authentication')(observer(ChoosePlan));