import React from 'react';
import { useLoadableVariation } from '../hooks';

export interface ExperimentProps {
  experimentKey: number;
  children?: React.ReactNode;
}

function Experiment({ experimentKey, children }: ExperimentProps) {
  const loadableResult = useLoadableVariation(experimentKey);

  if (!loadableResult.loaded) {
    return null;
  }

  const variation = loadableResult.result;

  if (!!children && typeof children === 'function') {
    return children(variation);
  }

  let match;
  React.Children.forEach(children, (it) => {
    if (!React.isValidElement(it)) {
      return;
    }
    if (it.props.variation) {
      if (variation === it.props.variation) {
        match = it;
      }
    } else if (it.props.default) {
      match = it;
    }
  });
  return match ? React.cloneElement(match, { variation }) : null;
}

export const HackleExperiment = Experiment;