import PropTypes from '../../_util/vue-types';
import { cloneElement } from '../../_util/vnode';
import {
  getTransformByIndex,
  getActiveIndex,
  getTransformPropValue,
  getMarginStyle,
} from './utils';
export default {
  name: 'TabContent',
  props: {
    animated: PropTypes.bool.def(true),
    animatedWithMargin: PropTypes.bool.def(true),
    prefixCls: PropTypes.string.def('ant-tabs'),
    activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    tabBarPosition: PropTypes.string,
    direction: PropTypes.string,
    destroyInactiveTabPane: PropTypes.bool,
    children: PropTypes.any,
  },
  computed: {
    classes() {
      const { animated, prefixCls } = this;
      return {
        [`${prefixCls}-content`]: true,
        [animated ? `${prefixCls}-content-animated` : `${prefixCls}-content-no-animated`]: true,
      };
    },
  },
  methods: {
    getTabPanes(children) {
      const props = this.$props;
      const activeKey = props.activeKey;
      const newChildren = [];

      children.forEach(child => {
        if (!child) {
          return;
        }
        const key = child.key;
        const active = activeKey === key;
        newChildren.push(
          cloneElement(child, {
            active,
            destroyInactiveTabPane: props.destroyInactiveTabPane,
            rootPrefixCls: props.prefixCls,
          }),
        );
      });

      return newChildren;
    },
  },
  render() {
    const {
      activeKey,
      tabBarPosition,
      animated,
      animatedWithMargin,
      direction,
      classes,
      children,
    } = this;
    let style = {};
    if (animated && children) {
      const activeIndex = getActiveIndex(children, activeKey);
      if (activeIndex !== -1) {
        const animatedStyle = animatedWithMargin
          ? getMarginStyle(activeIndex, tabBarPosition)
          : getTransformPropValue(getTransformByIndex(activeIndex, tabBarPosition, direction));
        style = animatedStyle;
      } else {
        style = {
          display: 'none',
        };
      }
    }
    return (
      <div class={classes} style={style}>
        {this.getTabPanes(children || [])}
      </div>
    );
  },
};