import * as React from 'react';
import { createElement, Suspense, useState, useEffect, forwardRef, useCallback, useContext, useMemo, memo, Fragment } from 'react';
import loadable from '@loadable/component';
import _get from 'lodash/fp/get';
import { __rest } from 'tslib';
import { a as isFn, b as useComponents, c as doczState } from './chunk.esm.js';
export { j as ComponentsProvider, c as doczState, b as useComponents, d as useConfig, e as useDataServer, f as useDocs, g as useMenus, h as usePrevious, i as useWindowSize } from './chunk.esm.js';
import _omit from 'lodash/fp/omit';
import { Link as Link$1, createHistory, LocationProvider, Router } from '@reach/router';
import _first from 'lodash/fp/first';
import capitalize from 'capitalize';
import 'fast-deep-equal';
import 'lodash/fp/merge';
import 'array-sort';
import 'lodash/fp/unionBy';
import 'lodash/fp/flattenDepth';
import 'lodash/fp/pipe';
import 'ulid';
import 'match-sorter';
import 'lodash/fp/throttle';
import { MDXProvider } from '@mdx-js/react';
import createHashSource from 'hash-source';
let source = createHashSource();

const BasePlayground = loadable(() => import('./Playground.esm.js'));
const Playground = props => typeof window !== 'undefined' ? createElement(Suspense, {
  fallback: null
}, createElement(BasePlayground, Object.assign({}, props))) : null;

const AsyncComponent = defaultProps => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [data, setData] = useState({});
  useEffect(() => {
    const {
      getInitialProps
    } = defaultProps;

    if (getInitialProps && isFn(getInitialProps)) {
      setLoading(true);
      getInitialProps(defaultProps).then(data => {
        setLoading(false);
        setError(null);
        setData(data);
      }).catch(err => {
        setLoading(false);
        setError(err);
        setData({});
      });
    }
  }, []);

  const {
    as: Comp,
    getInitialProps
  } = defaultProps,
        props = __rest(defaultProps, ["as", "getInitialProps"]);

  return createElement(Comp, Object.assign({}, props, {
    data: Object.assign({}, data, {
      loading,
      error
    })
  }));
};

const loadRoute = (path, imports, components) => {
  const Loading = components.loading;

  const fn = async () => {
    const importFn = _get(path, imports);

    const {
      default: Component,
      getInitialProps
    } = await importFn();

    const ExportedComponent = props => createElement(AsyncComponent, Object.assign({}, props, {
      as: Component || 'div',
      getInitialProps: getInitialProps
    }));

    return ExportedComponent;
  };

  return loadable(fn, {
    fallback: createElement(Loading, null)
  });
};
const AsyncRoute = defaultProps => {
  const {
    asyncComponent,
    path,
    entry
  } = defaultProps,
        routeProps = __rest(defaultProps, ["asyncComponent", "path", "entry"]);

  const components = useComponents();
  const Page = components.page;
  const Component = asyncComponent;
  const props = Object.assign({}, routeProps, {
    doc: entry
  });
  return Page ? createElement(Page, Object.assign({}, props), createElement(Component, Object.assign({}, props))) : createElement(Component, Object.assign({}, props));
};

const Link = forwardRef((defaultProps, ref) => {
  const props = _omit(['activeClassName', 'partiallyActive'], defaultProps);

  const isActive = useCallback(({
    isCurrent
  }) => {
    return isCurrent ? {
      className: `${props.className} active`
    } : {};
  }, [props.className]);
  return createElement(Link$1, Object.assign({}, props, {
    getProps: isActive,
    ref: ref
  }));
});
Link.displayName = 'Link';

const RE_OBJECTOF = /(?:React\.)?(?:PropTypes\.)?objectOf\((?:React\.)?(?:PropTypes\.)?(\w+)\)/;

const getTypeStr = type => {
  switch (type.name.toLowerCase()) {
    case 'instanceof':
      return `Class(${type.value})`;

    case 'enum':
      if (type.computed) return type.value;
      return type.value ? type.value.map(v => `${v.value}`).join(' │ ') : type.raw;

    case 'union':
      return type.value ? type.value.map(t => `${getTypeStr(t)}`).join(' │ ') : type.raw;

    case 'array':
      return type.raw;

    case 'arrayof':
      return `Array<${getTypeStr(type.value)}>`;

    case 'custom':
      if (type.raw.indexOf('function') !== -1 || type.raw.indexOf('=>') !== -1) return 'Custom(Function)';else if (type.raw.toLowerCase().indexOf('objectof') !== -1) {
        const m = type.raw.match(RE_OBJECTOF);
        if (m && m[1]) return `ObjectOf(${capitalize(m[1])})`;
        return 'ObjectOf';
      }
      return 'Custom';

    case 'bool':
      return 'Boolean';

    case 'func':
      return 'Function';

    case 'shape':
      const shape = type.value;
      const rst = {};
      Object.keys(shape).forEach(key => {
        rst[key] = getTypeStr(shape[key]);
      });
      return JSON.stringify(rst, null, 2);

    default:
      return capitalize(type.name);
  }
};

const humanize = type => getTypeStr(type);

const getPropType = prop => {
  const propName = _get('name', prop.flowType || prop.type);

  if (!propName) return null;
  const isEnum = propName.startsWith('"') || propName === 'enum';
  const name = capitalize(isEnum ? 'enum' : propName);

  const value = _get('type.value', prop);

  if (!name) return null;

  if (isEnum && typeof value === 'string' || !prop.flowType && !isEnum && !value || prop.flowType && !prop.flowType.elements) {
    return name;
  }

  return prop.flowType ? humanize(prop.flowType) : humanize(prop.type);
};
const Props = ({
  title,
  isToggle,
  isRaw,
  of: component
}) => {
  const components = useComponents();
  const {
    props: stateProps
  } = useContext(doczState.context);
  const PropsComponent = components.props;

  const filename = _get('__filemeta.filename', component);

  const filemetaName = _get('__filemeta.name', component);

  const componentName = filemetaName || component.displayName || component.name;
  const found = stateProps && stateProps.length > 0 && stateProps.find(item => filename ? item.key === filename : item.key.includes(`${componentName}.`));
  const value = _get('value', found) || [];

  const firstDefinition = _first(value);

  const definition = value.find(i => i.displayName === componentName);

  const props = _get('props', definition || firstDefinition);

  if (!props) return null;
  if (!PropsComponent) return null;
  return createElement(PropsComponent, {
    title: title,
    isRaw: isRaw,
    isToggle: isToggle,
    props: props,
    getPropType: getPropType
  });
};

const goToHash = ({
  location
}) => {
  setTimeout(() => {
    if (location && location.hash) {
      const decodedHash = decodeURI(location.hash);
      const id = decodedHash.substring(1);
      const el = document.getElementById(id);
      if (el) el.scrollIntoView();
    }
  });
};

const Routes = ({
  imports
}) => {
  const components = useComponents();
  const {
    entries
  } = useContext(doczState.context);
  const NotFound = components.notFound;
  const history = useMemo(() => createHistory(source), []);
  useEffect(() => {
    history.listen(goToHash);
  }, []);
  return createElement(MDXProvider, {
    components: components
  }, createElement(LocationProvider, {
    history: history
  }, createElement(Router, null, createElement(NotFound, {
    default: true
  }), entries && entries.map(({
    key: path,
    value: entry
  }) => {
    const props = {
      path,
      entries,
      components
    };
    const component = loadRoute(path, imports, components);
    return createElement(AsyncRoute, Object.assign({}, props, {
      entry: entry,
      key: entry.id,
      path: entry.route,
      asyncComponent: component
    }));
  }))));
};

function theme(themeConfig, transform = c => c) {
  return WrappedComponent => {
    const Theme = memo(props => {
      const {
        linkComponent
      } = props;
      const {
        db,
        children,
        wrapper: Wrapper = Fragment
      } = props;
      const initial = Object.assign({}, db, {
        themeConfig,
        transform,
        linkComponent
      });
      return createElement(doczState.Provider, {
        initial: initial
      }, createElement(Wrapper, null, createElement(WrappedComponent, null, children)));
    });
    Theme.displayName = WrappedComponent.displayName || 'DoczTheme';
    return Theme;
  };
}

export { AsyncRoute, Link, Playground, Props, Routes, loadRoute, theme };