import { WithVariants } from 'react-vary';
import MyComp1 from './variants/1';
import MyComp2 from './variants/2';

// The Component that receives the variants will be considered default (variant 0)
class MyComp extends React.Component {
  render() {
    const { props } = this;
    return <div>Variant: {this.props.variant}</div>
  }
}
MyComp.variants = {
  1: MyComp1,
  2: MyComp2
}

const MyCompWithVariants = WithVariants(MyComp);

// However you determine variants is up to you
// Just pass the known variant number down through the parent HOC to render the variant Child
class App extends React.Component {
  render() {
    return (
      <div>
        {/* Variant 0 is our default Component defined above */}
        <MyCompWithVariants variant={0} />
        <MyCompWithVariants variant={1} />
        <MyCompWithVariants variant={2} />

        {/* It also supports render props for dynamic tests */}
        <MyCompWithVariants variant={3} render={({ displayName, variant }) => {
            return <div>DisplayName: {displayName} Variant: {variant}</div>;
        }} />
      </div>
    );
  }
}

/**
 * @param {...Object} state - Any changes to state will be passed through
 * @param {...Object} props - The original user-defined Props will be passed through
 * @param {Number} props.variant - The assigned variant number
 * @param {Object} props.variants - Reference to all known variants
 * @param {Boolean} props.isDefault - True if the variant is variant 0
 * @param {Boolean} props.isRenderProp - True if the variant is a render prop
 * @param {Boolean} props.isStaticVariant - True if the variant is a static variant
 * @param {Number} props.staticVariantCount - Total Count of all running static variants
 * @param {Number} props.variantRenderCount - Total number of times the variant has rendered
 */

import { WithRenderProps } from 'react-vary';

class MyStatefulComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    }

    this.interval = this.startTimer();
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  startTimer() {
    // update state.date every second and re-render
    return setInterval(() => {
      this.setState({
        date: new Date();
      });
    }, 1000);
  }

  render() {
    const { date } = this.state;
    return <div>Original Render Date: {date}</div>
  }
}

const MyStatefulComponentWithRenderProps = WithRenderProps(MyStatefulComponent);

class App extends React.Component {
  render() {
    return (
      <div>
        {/* Variant 0 is our default Component defined above */}
        <MyStatefulComponentWithRenderProps variant={0} />

        {/*
          Here we get all the state updates but with a custom render override.
          All without touching our original component!
        */}
        <MyStatefulComponentWithRenderProps
          variant={1}
          render={({ props, state }) => <div>Date Override: {state.date}</div>}
        />
      </div>
    );
  }
}

/**
 * @param {...Object} state - Current state that will change based on the behaviour of the default variant
 * @param {...Object} props - The original user-defined Props will be passed through
 * @param {Number} props.variant - The assigned variant number
 * @param {Number} props.variantCount - Total Count of all running  variants
 * @param {Boolean} props.isDefault - True if the variant is variant 0
 * @param {Boolean} props.isRenderProp - True if the variant is a render prop
 * @param {Number} props.totalRenderCount - Total number of times all variants have rendered
 */