// to get all the sheets in the app
const sheet  = document.styleSheets;
// choose 1 rule in sheet and add css to rule
sheet[1].insertRule ('.classname {width : 100%;height : 100%;}', indexStyle)

// this function only return one ar chứ tất cả các đối số của function này
const templateFunc  =  (...args ) =>  args
templateFunc`
    width : 100%; 
    height : 50%;
    background : ${props => props};

class ComponentStyle {
  sheet = {};
  constructor() {
    // as soon as the class is initialized, I will create a style tag and store the sheet of that style in the 'sheet' variable within the class.
    const styleDom =  this.makeStyleTag();
    // retrieve the sheet and save it in the this.sheet variable.
    this.sheet =  styleDom.sheet;
  }
 makeStyleTag = () => {
    // this function will create a style and add that style tag to the head of the document.
    const style = document.createElement("style");
    style.setAttribute("data-style-duc-version", "1.0.0");
    document.head.insertBefore(style, document.head.childNodes[document.head.childNodes.length]);
    return style;
  };
  insertBefore(css) {
    // the function will generate random class names for components and return the class name.
    const className = uuid();
    const newName = "style-duc-" + className.slice(0, 5);
    this.sheet.insertRule(
      `.${newName}{${css}}`,
      this.sheet.cssRules.length
    );
    return newName;
  }
}

// This function will directly create a React element.
export default function createStyledComponent(target, css) {
  let WrappedStyledComponent = {};
 // init class ComponentStyle
  const componentStyle = new ComponentStyle();
 // it saves it in the WrappedStyledComponent variable so that later, in the useStyledComponentImpl function, it can be retrieved and used.
  WrappedStyledComponent.componentStyle = componentStyle;
  WrappedStyledComponent.target = target;

  const forwardRef = (props, ref) => useStyledComponentImpl(WrappedStyledComponent, props, ref, css);
  const Element = React.forwardRef(forwardRef);
  Element.toString = () => {
    return `.${WrappedStyledComponent.newClassToString}`;
  };
  return Element;
}

const renderCss = (cssRaw, propsElement) => {
  // this function will handle the mapping of the cssRaw array into a CSS string. Each element in the cssRaw array can be either a function or a string.
  let css = "";
  for (const elementCss of cssRaw) {
    if (typeof elementCss === 'function') {
         const result = elementCss(propsElement);
          css += result;    
    }
    if (typeof elementCss === "string") { css += elementCss; }
  }
  return css;
};
// CORE FUNCTION 
// this function is responsible for creating a React component, merging props, and passing the ref.
const useStyledComponentImpl = (WrappedStyledComponent, props, ref, css) => {
  // support for the ThemeProvider in styled-components
  const theme = React.useContext(ThemeContext);
  const newProps = { ...props, ...{ theme, ref } };
  const newCss = renderCss(css, newProps);
  // insert css and get new className
  const className = WrappedStyledComponent.componentStyle.insertBefore(newCss);
  WrappedStyledComponent.newClassToString = className;
  // truncate name these className
  newProps.className = [props.className, className].join(" ");
  // finally, it creates a React element.
  return React.createElement(WrappedStyledComponent.target, newProps);
};

// domElements is an array that contains HTML tags, e.g., domElements = ['a', 'div', 'section', 'svg', ...]. For more details, you can check my repository because it's lengthy, so I won't include it here.
import domElements from './utils/domElements';
import createStyledComponent from './core'
import css from './utils/css';
import {createContext} from 'react'
export const ThemeContext  = createContext({}) 
export const ThemeProvider = ThemeContext.Provider 
const styled  = (tag) => {
    return  (...args) => createStyledComponent(tag, css(...args));
}
domElements.forEach(domElement => {
    // I'm assigning this entity so that later everyone can use it like this: styled.div `... `
    styled[domElement] = styled(domElement);
});
export default styled