import React, { useEffect,useState } from "react";
import PropTypes from "prop-types";
import "./font.Lato2.module.css";
import styles from "./DocsProvider.module.css";
import UCLProvider from "../uclprovider/UCLProvider";
import AccessibilityProvider from "../accessibility-control/AccessibilityControl";
import docsThemes from "./docsThemes";

const defaultTheme = "blue";
const autoSystemMode = "auto";
const colorSchemes={
    "dark"  : "dark",
    "light"  : "light",
};
const defaultBaseTextSize = '16';

const getPerfectMode = (appMode)=>{
  let matched = window.matchMedia('(prefers-color-scheme: dark)').matches;
  if(appMode === autoSystemMode){
      return matched ? colorSchemes.dark : colorSchemes.light
  }
  return appMode;
}

const getJsonFromUrl = (url)=>{
  if(!url){
      url = window.location.search;
  }
  let query = url.substr(1);
  let result = {};
  query.split("&").forEach(function(part) {
      let item = part.split("=");
      if(item[0]){
          result[item[0]] = decodeURIComponent(item[1]);
      }
  });
  return result;
}

export default function DocsProvider(props) {

  let docsConfig = JSON.parse(localStorage.getItem("docsConfig") ||  null) || {};
  docsConfig = { ...docsConfig, ...getJsonFromUrl()};

  let [state, setState]  = useState({
      appMode: getPerfectMode(docsConfig.appMode || autoSystemMode),
      themeName: docsConfig.themeName || defaultTheme,
      direction : docsConfig.isRTL ? "rtl" : "ltr",
      baseTextSize : docsConfig.fontSizePx || defaultBaseTextSize
  });

  useEffect(() => {
    var temp = document.createElement("div");
    temp.innerHTML = `<style> 

        .iframeSection{
            border: 6px solid #5b5e61;
             border-radius: 2px;
             width: 100%
         }
         .toolOptions .optionsList{
             row-gap: 10px;
             column-gap: 10px;
             padding: 10px 0px;
             justify-content: flex-start;
         }
         
         .toolOptions{
            border-radius: 3px;
         }

         .toolOptions .groupOption{
            margin-left: 10px;
         }
        
        </style>`;

    parent.document.body.appendChild(temp.firstChild);
  }, []);

  let element = props.childElement;
  let themeValue = docsThemes({...state});
  let { appMode , themeName, direction  }  = state;
  return ( <div id='zoho-desk-library-docs' dir={direction}>
    <AccessibilityProvider customClassName={{ focuscss: styles.keyboardFocus }}>
      <UCLProvider value={themeValue} mode={appMode} theme={themeName}>
        <div
          className={`${styles.docs_provider} ${
            appMode === "dark" ? styles.dark : ""
          }`}>
          <element.type
            {...element.props}
            mode={appMode}
            colorTheme={themeName}
            theme={themeValue}
          />
        </div>
      </UCLProvider>
    </AccessibilityProvider>
    </div>);
}

DocsProvider.propTypes = {
  childElement: PropTypes.any,
  mode: PropTypes.string,
  theme: PropTypes.string
};
