import { withDirectives, vShow } from 'vue';

function mapTabPane() {
  let tabPaneVNodes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  let tabValue = arguments.length > 1 ? arguments[1] : undefined;
  let tabPaneLazyCache = arguments.length > 2 ? arguments[2] : undefined;
  const children = [];
  tabPaneVNodes.forEach(vNode => {
    const {
      value,
      'display-directive': _displayDirective,
      displayDirective
    } = vNode.props;
    if (!vNode.key) {
      vNode.key = value;
    }
    if (!vNode.props.key) {
      vNode.props.key = value;
    }
    const show = value === tabValue;
    const directive = _displayDirective || displayDirective;
    if (directive === 'show') {
      children.push(withDirectives(vNode, [[vShow, show]]));
    } else if (directive === 'show:lazy' && (tabPaneLazyCache[value] || show)) {
      tabPaneLazyCache[value] = true;
      children.push(withDirectives(vNode, [[vShow, show]]));
    } else if (show) {
      children.push(vNode);
    }
  });
  return children;
}

export { mapTabPane };
