const { pfs, rtl, stylesMap, validator } = require('agile-css');

module.exports = {
  input: ["./src/**/*.jsx", "./src/**/*.js", "./src/**/*.tsx"],
  output: "./src/agile-css.css",
  defaultCss: `
    body {
      font-size: 14px;
    }
  `,
  validator,
  cache: true,
  plugins: [pixelToRem(62.5), rtl(), pfs(), testplugin2()],
  customValue(value) {
    // customValue
    console.log(value);
    return value;
  },
  breakpoints: {
    sm: "768px",
    md: "992px",
    lg: "1200px",
  },
  custom: {
    "color-primary": "var(--color-primary)",
    "color-secondary": "var(--color-secondary)",
    "color-tertiary": "var(--color-tertiary)",
    "color-quaternary": "var(--color-quaternary)",
  },
};

function pixelToRem(rootFontSize) {
  return ({ styles, addStyles }) => {
    const newStyles = stylesMap(styles, (selector, css) => {
      const [property, value] = css;
      if (/[\d.]*px/g.test(value)) {
        const newValue = value.replace(/[\d.]*px/g, (val) => {
          const num = Number(val.replace("px", ""));
          return `${(num * 62.5) / rootFontSize / 10}rem`;
        });
        const newCss = [property, newValue];
        return {
          [selector]: newCss,
        };
      }
      return {
        [selector]: css,
      };
    });
    addStyles(newStyles);
  };
}
// use pixelToRem: fz:14px -> css { font-size: ...rem }

function testplugin2() {
  return ({ addBase }) => {
    addBase(`.testttttttttt { color: red }`);
  };
}

import { atomic, validator } from 'agile-css';

atomic.setConfig({
  breakpoints: {
    sm: '768px',
    md: '992px',
    lg: '1200px',
  },
  cache: true,
  parentSelector: '',
  exclude: [],
  custom: {
    'color-primary': 'var(--color-primary)',
    'color-secondary': 'var(--color-secondary)'
  },
  validator,
});

atomic.plugins([rtl(), pfs()]);

atomic.customValue(value => {
  console.log(value);
  return value;
});

atomic
  .find(`<div class="c:red c:blue|h fz:20px w:30%@md p:30px@md m:20px@+300px pos:relative!"></div>`);
  .find(`const className = "bgc:blue";`);

const id = atomic.on('success', css => {
  console.log(atomic.getCss());
});

// atomic.off(id);

atomic.on('valid', diagnostic => {
  console.log(diagnostic);
});

atomic.on('invalid', diagnostic => {
  console.log(diagnostic);
});