export default (from: Color | string, to: Color | string) => {
  const fromColorType = getColorType(from);
  const toColorType = getColorType(to);

  invariant(!!fromColorType, notAnimatable(from));
  invariant(!!toColorType, notAnimatable(to));
  invariant(
    fromColorType.transform === toColorType.transform,
    'Both colors must be hex/RGBA, OR both must be HSLA.'
  );

  const fromColor = fromColorType.parse(from);
  const toColor = toColorType.parse(to);
  const blended = { ...fromColor };

  // Only use the linear blending function for rgba and hex
  const mixFunc = fromColorType === hsla ? mix : mixLinearColor;

  return (v: number) => {
    for (const key in blended) {
      if (key !== 'alpha') {
        blended[key] = mixFunc(fromColor[key], toColor[key], v);
      }
    }

    blended.alpha = mix(fromColor.alpha, toColor.alpha, v);

    return fromColorType.transform(blended);
  };
};

const getAction = (
  v: Value,
  { type = 'tween', ease: definedEase, ...def }: TransitionDefinition,
  { from, to, velocity }: TransitionProps
) => {
  invariant(
    animationLookup[type] !== undefined,
    `Invalid transition type '${type}'. Valid transition types are: tween, spring, decay, physics and keyframes.`
  );

  let ease: Exclude<
    typeof definedEase,
    keyof typeof easingLookup | CubicBezierArgs
  >;

  // Convert ease definition into easing function
  if (type === 'tween') {
    if (typeof definedEase !== 'function') {
      if (typeof definedEase === 'string') {
        invariant(
          easingLookup[definedEase] !== undefined,
          `Invalid easing type '${definedEase}'. popmotion.io/pose/api/config`
        );

        ease = easingLookup[definedEase];
      } else if (Array.isArray(definedEase) && isCubicBezierArgs(definedEase)) {
        invariant(
          definedEase.length === 4,
          `Cubic bezier arrays must contain four numerical values.`
        );
        const [x1, y1, x2, y2] = definedEase;
        ease = easing.cubicBezier(x1, y1, x2, y2);
      }
    }
  }

  ease = ease || (definedEase as typeof ease);

  const baseProps =
    type !== 'keyframes'
      ? {
        from,
        to,
        velocity,
        ease
      }
      : { ease };

  return animationLookup[type]({ ...baseProps, ...def });
};

const getKey = (child: ReactElement<any>): string => {
  invariant(
    child && child.key !== null,
    'Every child of Transition must be given a unique key'
  );

  const childKey =
    typeof child.key === 'number' ? child.key.toString() : child.key;

  return childKey.replace('.$', '');
};

const convertEasing = (easing: EasingDefinition = easeOut) => {
  if (typeof easing === 'string') {
    invariant(
      easingLookup[easing] !== undefined,
      `Invalid easing type '${easing}'. popmotion.io/pose/api/config`
    );

    return easingLookup[easing];
  } else if (Array.isArray(easing)) {
    invariant(
      easing.length === 4,
      'Cubic bezier arrays must contain four numerical values.'
    );

    const [x1, y1, x2, y2] = easing;
    return cubicBezier(x1, y1, x2, y2);
  }

  return easing;
};

const getAction = (
  v: Value,
  { type = 'tween', ease, ...def }: AnimationDef,
  { from, to, velocity }: TransitionProps
) => {
  invariant(
    animationLookup[type] !== undefined,
    `Invalid transition type '${type}'. Valid transition types are: tween, spring, decay, physics and keyframes.`
  );

  // Convert ease definition into easing function
  if (type === 'tween') {
    const typeOfEase = typeof ease;
    if (typeOfEase !== 'function') {
      if (typeOfEase === 'string') {
        invariant(
          easingLookup[ease] !== undefined,
          `Invalid easing type '${ease}'. popmotion.io/pose/api/transition`
        );

        ease = easingLookup[ease];
      } else if (Array.isArray(ease)) {
        invariant(
          ease.length === 4,
          `Cubic bezier arrays must contain four numerical values.`
        );

        const [x1, y1, x2, y2] = ease;
        ease = easing.cubicBezier(x1, y1, x2, y2);
      }
    }
  }

  return animationLookup[type]({
    from,
    to,
    velocity,
    ease,
    ...def
  });
};

  Object.keys(poses).forEach(key => {
    const pose = poses[key];

    invariant(
      typeof pose === 'object',
      `Pose '${key}' is of invalid type. All poses should be objects.`
    );

    poses[key] =
      pose.transition !== undefined
        ? pose
        : applyDefaultTransition<A>(pose, key, defaultTransitions);
  });

/**
 * Create a function that maps from a numerical input array to a generic output array.
 *
 * Accepts:
 *   - Numbers
 *   - Colors (hex, hsl, hsla, rgb, rgba)
 *   - Complex (combinations of one or more numbers or strings)
 *
 * ```jsx
 * const mixColor = interpolate([0, 1], ['#fff', '#000'])
 *
 * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
 * ```
 *
 * @public
 */
function interpolate<T>(
  input: number[],
  output: T[],
  { clamp = true, ease, mixer }: InterpolateOptions<T> = {}
): Mix<T | string | number> {
  const inputLength = input.length;

  invariant(
    inputLength === output.length,
    'Both input and output ranges must be the same length'
  );

  invariant(
    !ease || !Array.isArray(ease) || ease.length === inputLength - 1,
    'Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.'
  );

  // If input runs highest -> lowest, reverse both arrays
  if (input[0] > input[inputLength - 1]) {
    input = [].concat(input);
    output = [].concat(output);
    input.reverse();
    output.reverse();
  }

  const mixers = createMixers(output, ease, mixer);

  const interpolator =
    inputLength === 2
      ? fastInterpolate(input, mixers)
      : slowInterpolate(input, mixers);

  return clamp
    ? (pipe(
        makeInputClamp(input[0], input[inputLength - 1]),
        interpolator
      ) as Mix<number | string | T>)
    : interpolator;
}

const createComplexAction: CreateVectorAction = (
  action,
  { from, to, ...props }
) => {
  const valueTemplate = complex.createTransformer(from);

  invariant(
    valueTemplate(from) === complex.createTransformer(to)(from),
    `Values '${from}' and '${to}' are of different format, or a value might have changed value type.`
  );

  return action({ ...props, from: 0, to: 1 }).pipe(
    blendArray(complex.parse(from), complex.parse(to)),
    valueTemplate
  );
};

const createPosedComponentFactory: PosedComponentFactoryFactory = el => (
  config = {}
) =>
  Vue.extend({
    props,
    provide,
    inject,
    mounted() {
      invariant(typeof this.$el !== 'undefined', `No DOM element found.`);

      const poserConfig = {
        ...config,
        initialPose: this.getInitialPose(),
        onDragStart: this.$listeners['drag-start']
          ? (e: any) => this.$emit('drag-start', e)
          : undefined,
        onDragEnd: this.$listeners['drag-end']
          ? (e: any) => this.$emit('drag-end', e)
          : undefined,
        onPressStart: this.$listeners['press-start']
          ? (e: any) => this.$emit('press-start', e)
          : undefined,
        onPressEnd: this.$listeners['press-end']
          ? (e: any) => this.$emit('press-end', e)
          : undefined,
        onChange: this.$props.onValueChange,
        props: this.getPoserProps()
      };

      // First posed component in tree
      if (!this.$props.withParent || !this._poseRegisterChild) {
        this.initPoser(poseFactory(this.$el, poserConfig));
      } else {
        this._poseRegisterChild({
          element: this.$el,
          config: poserConfig,
          onRegistered: poser => this.initPoser(poser)
        } as ChildRegistration);
      }
    },
    watch,
    methods,
    destroyed,
    render(createElement) {
      return createElement(el, {}, [this.$slots.default]);
    }
  });

export default (
  value: Animated.Value,
  { type = 'tween', loop = 0, ...props }: TransitionConfig
) => {
  invariant(
    createTransition[type] !== undefined,
    `Invalid animation type '${type}' defined. Valid types are: 'tween', 'spring'`
  );

  let transition = createTransition[type](value, props);

  if (loop) {
    transition = loopTransition(transition, { iterations: loop });
  }

  return transition;
};