import { defineConfig } from 'windicss/helpers';

function range(size, startAt = 1) {
  return Array.from(Array(size).keys()).map((i) => i + startAt);
}

export default defineConfig({
  attributify: true,
  darkMode: 'class',
  safelist: [range(10).map((i) => `p-${i}`), range(10).map((i) => `m-${i}`)],
  // 扫描src中的文件识别出class
  extract: {
    include: ['src/**/*.{vue,html,jsx,tsx,ts}'],
    exclude: ['node_modules/**/*', '.git/**/*', '.vscode/**/*'],
  },
  plugins: [require('@windicss/plugin-scrollbar'), createEnterPlugin()],
});

function createEnterPlugin(maxOutput = 7) {
  const createCss = (index: number, d = 'x') => {
    const upd = d.toUpperCase();
    return {
      [`*> .enter-${d}:nth-child(${index})`]: {
        transform: `translate${upd}(50px)`,
      },
      [`*> .-enter-${d}:nth-child(${index})`]: {
        transform: `translate${upd}(-50px)`,
      },
      [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]:
        {
          'z-index': `${10 - index}`,
          opacity: '0',
          animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
          'animation-fill-mode': 'forwards',
          'animation-delay': `${(index * 1) / 10}s`,
        },
    };
  };
  const handler = ({ addBase }) => {
    const addRawCss = {};
    for (let index = 1; index < maxOutput; index++) {
      Object.assign(addRawCss, {
        ...createCss(index, 'x'),
        ...createCss(index, 'y'),
      });
    }
    addBase({
      ...addRawCss,
      [`@keyframes enter-x-animation`]: {
        to: {
          opacity: '1',
          transform: 'translateX(0)',
        },
      },
      [`@keyframes enter-y-animation`]: {
        to: {
          opacity: '1',
          transform: 'translateY(0)',
        },
      },
    });
  };
  return { handler };
}