import * as React from "react";
import Properties from "../../components/property";
import VisionPane from "../../components/vision-pane/vision-pane";
import { useRef, useState, useEffect } from "react";
import { isMobile } from "../../utils/isMobile";
import lscWindowConfig from "../../utils/lscConfig";
import RouteMap from "../../utils/routeMap";
import { Usage } from "../../components/usage/usage";
import { DevDescription } from "./dev-desc";

import "./index.scss";

declare const window: any;

const { Tabs } = window.antd;

const { TabPane } = Tabs;

const {
  route,
  isLibraryComponent,
  packageName,
  LibraryName,
  packageVersion,
} = lscWindowConfig;

const ComponentName = isLibraryComponent
  ? RouteMap[route]
  : lscWindowConfig.LibraryName;

const getComponentModule = (mode: "pc" | "mobile" = "pc") => {
  const mainExports = window[mode === "pc" ? LibraryName : mode];
  return isLibraryComponent
    ? mainExports && mainExports[ComponentName]
    : mainExports;
};

const ComponentPC = getComponentModule("pc");

const DocsRenders = window[route] as any;

export default function ReadmePane() {
  const propertyTypes = ComponentPC.__docgenInfo || null;

  const componentRef = useRef();

  const isMultiple = typeof DocsRenders === "object";
  const keys = Object.keys(DocsRenders);

  const [tabIndex, setTabIndex] = useState(keys[0]);
  const DocsRender = isMultiple ? DocsRenders[tabIndex] : DocsRenders;

  const [visionRenderTab, setVisionRenderTab] = useState(tabIndex);
  const [visionProps, setVisionProps] = useState({});
  const [visionDefaultProps, setVisionDefaultProps] = useState({});

  const getComponent = () => {
    const ComponentMobile = getComponentModule("mobile");

    const RenderComponent =
      isMobile() && ComponentMobile ? ComponentMobile : ComponentPC;

    const Component = (props) => {
      setVisionDefaultProps(props);
      setVisionRenderTab(tabIndex);
      return React.createElement(RenderComponent, props);
    };

    return Object.assign(Component, RenderComponent);
  };

  // vision pane setter's props
  const wrapVisionProps = (Component) => (props) => {
    const finalProps = Object.assign({}, props, visionProps);
    return React.createElement(Component, finalProps);
  };

  useEffect(() => {
    const Component = getComponent();
    const wrapComponent = Object.assign(wrapVisionProps(Component), Component);

    DocsRender(wrapComponent, componentRef.current);
  }, [visionProps, tabIndex]);

  const onSwitchCase = (activeKey) => {
    setTabIndex(activeKey);
    setVisionProps({});
    setVisionDefaultProps({});
  };

  return (
    <div id="public-component-show-container">
      <div className="component-page">
        <h1 className="component-name">{ComponentName}</h1>
        <span className="component-sub-title">
          <span>Package: {packageName}</span>
          <span>Version: {packageVersion}</span>
        </span>
        <div className="component-main">
          <div className="component-part">
            <div className="component-block">
              <div
                className="component-container code-box-demo"
                ref={componentRef}
              />
              {keys.length ? (
                <Tabs tabPosition="bottom" size="small" onChange={onSwitchCase}>
                  {keys.map((key) => (
                    <TabPane tab={key} key={key} />
                  ))}
                </Tabs>
              ) : null}
            </div>
            <div className="component-description component-block ">
              {lscWindowConfig.env === "development" ? (
                <DevDescription />
              ) : null}
              <Usage
                key={new Date().valueOf()}
                packageName={packageName}
                isLibraryComponent={isLibraryComponent}
                componentName={ComponentName}
                componentProps={Object.assign(
                  {},
                  visionDefaultProps,
                  visionProps
                )}
                docsRender={DocsRender}
              />
              <Properties properties={propertyTypes} />
            </div>
          </div>
          <VisionPane
            key={visionRenderTab}
            componentName={ComponentPC.displayName}
            properties={propertyTypes}
            defaultProps={visionDefaultProps}
            onPropsChange={setVisionProps}
          />
        </div>
      </div>
    </div>
  );
}