import { readFileSync, writeFileSync } from 'fs';
// @ts-expect-error: no config
import path from 'path';

const file = readFileSync(
  path.join(
    __dirname,
    '../../packages/core/styles/src/colors/surface-modes.css'
  ),
  { encoding: 'utf-8' }
);
let data = [];
let canAdd = false;
file.split('\n').forEach((d) => {
  if (d.includes('}')) canAdd = false;
  if (canAdd) data.push(d);
  if (d.includes('{') && data.length === 0) canAdd = true;
});
data = data.map((t) => t.replaceAll('\r', '').replaceAll('    ', ''));

const surfaces = {};

const transformSurfaceState = (name: string, isStatic: boolean) => {
  if (name.includes('foundation')) return [name];
  const newName: string[] = [];
  const nativePseudoSelector = {
    '-enabled': [''],
    '-focused': [':has(*:focus-visible)', ':focus-visible'],
    '-pressed': [':active'],
    '-hovered': [':hover'],
  };
  let isReplaced = false;
  Object.entries(nativePseudoSelector).map(([key, replaceTo]) => {
    if (name.includes(key)) {
      isReplaced = true;
      if (!isStatic) {
        replaceTo.forEach((pseudo, idx) => {
          newName.push(
            name.replace(key, `[data-surface-state="native"]${pseudo}`)
          );
        });
      } else newName.push(name.replace(key, `[data-surface-state="static"]`));
    }
  });
  const nameSplit = name.split('-');
  const lastStateName = nameSplit[nameSplit.length - 1];
  if (!isReplaced)
    newName.push(
      name.replace(
        `-${lastStateName}`,
        `[data-surface-state="${lastStateName}"]`
      )
    );

  return newName;
};

data.forEach((t) => {
  const tokenName = t.substring(t.indexOf('--') + 2, t.indexOf(':'));
  if (!t.includes('--on') && !t.includes('--over')) {
    if (!surfaces[tokenName]) surfaces[tokenName] = {};
    surfaces[tokenName]['surface-color'] = `--${tokenName}`;
  } else {
    const prefix = t.includes('--on') ? 'on' : 'over';
    const surfaceArr = tokenName.split('-');
    const colorSpecification = surfaceArr[1];
    const surfaceType = surfaceArr.filter((i, idx) => idx > 1).join('-');

    const surfaceName =
      `--${surfaceArr[0]}`.replace('--over', '').replace('--on', '') +
      `-${surfaceType}`;
    if (!surfaces[surfaceName]) surfaces[surfaceName] = {};
    if (prefix === 'on') {
      surfaces[surfaceName][
        `symbol-color-${colorSpecification}`
      ] = `--${tokenName}`;
    } else {
      surfaces[surfaceName][
        `over-surface-color-${colorSpecification}`
      ] = `--${tokenName}`;
    }
  }
});

console.log(surfaces);

let cssFileData = `
.rt-surface {
  background-color: var(--rt-surface-color);
  transition-property: background-color;
  transition-duration: 0.2s;
}
`;

function mapSurface(isStatic = false) {
  Object.entries(surfaces).map(([surfaceName, data]) => {
    if (surfaceName.includes('foundation') && !isStatic) return;
    if (
      isStatic &&
      !surfaceName.includes('-enabled') &&
      !surfaceName.includes('foundation')
    )
      return;

    const surfacePostfixes = transformSurfaceState(surfaceName, isStatic);

    if (
      surfacePostfixes.length === 0 ||
      !surfacePostfixes.some((postfix) => !!postfix)
    )
      return;

    cssFileData += '\n';
    surfacePostfixes.forEach((postfix, idx) => {
      if (idx !== 0) cssFileData += ', ';
      cssFileData += `.rt-surface--${postfix}`;
      if (!postfix.includes('foundation'))
        cssFileData += `, .rt-surface--${postfix} .rt-surface-children`;
      if (idx === surfacePostfixes.length - 1) cssFileData += ' {\n';
    });

    Object.entries(data).map(([colorToken, value]) => {
      cssFileData += `  --rt-${colorToken}: var(${value});\n`;
    });

    cssFileData += '}\n';
  });
}

mapSurface(false);
mapSurface(true);

writeFileSync(
  path.join(__dirname, '../../packages/core/styles/src/colors/surfaces.css'),
  cssFileData,
  'utf-8'
);