// ......................................
////  compose
// ......................................


//--- pattern
const labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;

//--- object
const ownkey = (obj) => Object.keys(obj)[0];
const ownValue = (obj) => Object.values(obj)[0];

//--- remove
const removeDoubleSpace = (x) =>
  isArray(x)
    ? x.map((str) => str.replace(/\s{2,}/g, ' '))
    : x.replace(/\s{2,}/g, ' ');
const removeLabel = (str) => str.replace(labelPattern, '');

//--- is
const isArray = (x) => Array.isArray(x);

// ......................................
////  utils
// ......................................

const getNameByLabel = (str) => {
  const label = str.match(labelPattern) || [];

  const nameLabel = label
    .join(' ')
    .split(' ')[1]
    .replace('.', '')
    .replace(';', '')
    .trim();

  return nameLabel.trim();
};

// ......................................
////  create Render Styles
// ......................................


 const createRenderStyles = (inserted, cachekey) => {
  if (inserted && inserted && Array.isArray(inserted)) {

    const styles = inserted.reduce((acc, prev) => {
      const { name, styles } = prev;
      const key = name.includes('css-') ? 'css' : cachekey;
      const classname = ownkey(styles);
      const value = ownValue(styles);
      const nameLabel = getNameByLabel(value);
      const nameIds = name.includes('@') ? [nameLabel, name] : [nameLabel];
      const css = `${
        classname.includes('@')
          ? classname
          : classname.startsWith('.')
          ? classname
          : `.${classname}`
      } { ${removeLabel(value)} }`;

      return [
        ...acc,
        {
          key: key,
          ids: nameIds,
          css: removeDoubleSpace(css),
        },
      ];
      
      // //--- single style tag like all css
      // const ids = name.split(' ')[0];
      // _key = key;
      // _ids.add(ids);
      // _css += ` ${css}`;

    }, []);

    return {
      styles,
      // //--- single style tag like all css
      //   styles: [
      //     {
      //       key: _key,
      //       ids: [..._ids],
      //       css: _css.trim(),
      //     },
      //   ],
    };
  }
  return {
    styles: [],
  };
};

export { createRenderStyles };