import React, { useState } from "react";
import styles from "./DocsViewer.module.css";
import DocsComponentsList from "./DocsComponentsList";
import getDocsViewerIcon, { docsViewerIcons } from "./docsViewerIcons";

function triggerFocus(focusId) {
  document.getElementById(`program_focus_option_${focusId}`).focus();
}

const iconTypes={
  source : "source",
  keyboard : "keyboard"
}

const DisplayNamePart = (props) => {
  return (
    <div
      tabIndex="0"
      className={styles.tabs_content__item__header}
      id={props.propId}
    >
      <span>{props.displayName}</span>
      {props.disableIcon ? null : (
        <span className={styles["icon_"+iconTypes.source]} title={props.iconTitles[iconTypes.source]} onClick={props.onIconChange.bind(null,iconTypes.source)}>
          {getDocsViewerIcon(docsViewerIcons.copyLink, styles.iconOption)}
        </span>
      )}

      <span className={styles["icon_"+iconTypes.keyboard]} title={props.iconTitles[iconTypes.keyboard]} onClick={props.onIconChange.bind(null,iconTypes.keyboard)}>
          {getDocsViewerIcon(docsViewerIcons.program_focus, styles.iconOption)}
       </span>

    </div>
  );
};

export default (props) => {
  let [isShowFullSource, setFullSourceView] = useState(false);

  return (
    <div className={styles.tabs_content__item}>
      <DisplayNamePart
        propId={props.propId}
        displayName={props.displayName}
        disableIcon={props.disableSourceCode}
        iconTitles={{
          [iconTypes.source] : !isShowFullSource ? "View full source" : "Hide source",
          [iconTypes.keyboard] : "Keyboard focus"
        }}
        onIconChange={(type) => {
            if(iconTypes.keyboard === type){
              triggerFocus(props.propId);
            }
            else if(iconTypes.source === type){

              setFullSourceView(!isShowFullSource);
            }
        }}
       
      />

      <div className={styles.tabs_content__item__description}>
        {props.description}
      </div>

      <DocsComponentsList
        locator={ <button id={`program_focus_option_${props.propId}`} className={styles.program_focus_option} />    }
        componentType={props.componentType}
        componentsList={props.componentsList}
        componentsDetail={props.componentsDetail}
        $decorateComponentItem={props.$decorateComponentItem}
        $decorator={props.$decorator}
        $decoratorListClassName={props.$decoratorListClassName}
        $decoratorItemsClassName={props.$decoratorItemsClassName}
        $decoratorItemClassName={props.$decoratorItemClassName}
        disableSourceCode={props.disableSourceCode}
        isShowFullSource={isShowFullSource}
        libComponents={props.libComponents}
      />
    </div>
  );
};
