import fs from 'node:fs/promises';
import {
  defineConfig,
  presetIcons,
  presetTypography,
  presetWebFonts,
  presetWind3,
  transformerDirectives,
} from 'unocss';
import { presetAnimations } from 'unocss-preset-animations';

export default defineConfig({
  presets: [
    presetWind3({
      dark: 'class',
    }),
    presetAnimations(),
    presetIcons({
      collections: {
        custom: {
          area: () => fs.readFile('./src/assets/editor/area.svg', 'utf-8'),
          draw: () => fs.readFile('./src/assets/editor/draw.svg', 'utf-8'),
          edit: () => fs.readFile('./src/assets/editor/edit.svg', 'utf-8'),
          generate: () =>
            fs.readFile('./src/assets/editor/generate.svg', 'utf-8'),
          preview: () =>
            fs.readFile('./src/assets/editor/preview.svg', 'utf-8'),
          rectangle: () =>
            fs.readFile('./src/assets/editor/rectangle.svg', 'utf-8'),
          select: () => fs.readFile('./src/assets/editor/select.svg', 'utf-8'),
          'sign-library': () =>
            fs.readFile('./src/assets/editor/sign-library.svg', 'utf-8'),
          'street-view': () =>
            fs.readFile('./src/assets/editor/street-view.svg', 'utf-8'),
        },
      },
    }),
    presetTypography(),
    presetWebFonts({
      provider: 'google',
      fonts: {
        sans: 'Roboto',
      },
    }),
  ],
  transformers: [transformerDirectives()],
  extendTheme: (theme) => {
    return {
      ...theme,
      colors: {
        ...theme.colors,
        neutral: {
          1: '#ffffff',
          2: '#fafafa',
          3: '#f5f5f5',
          4: '#f0f0f0',
          5: '#d9d9d9',
          6: '#bfbfbf',
          7: '#8c8c8c',
          8: '#595959',
          9: '#434343',
          10: '#262626',
          11: '#1f1f1f',
          12: '#141414',
          13: '#000000',
        },
        red: {
          1: '#fff1f0',
          2: '#ffccc7',
          3: '#ffa39e',
          4: '#ff7875',
          5: '#ff4d4f',
          6: '#f5222d',
          7: '#cf1322',
          8: '#a8071a',
          9: '#820014',
          10: '#5c0011',
        },
        volcano: {
          1: '#fff2e8',
          2: '#ffd8bf',
          3: '#ffbb96',
          4: '#ff9c6e',
          5: '#ff7a45',
          6: '#fa541c',
          7: '#d4380d',
          8: '#ad2102',
          9: '#871400',
          10: '#610b00',
        },
        orange: {
          1: '#fff7e6',
          2: '#ffe7ba',
          3: '#ffd591',
          4: '#ffc069',
          5: '#ffa940',
          6: '#fa8c16',
          7: '#d46b08',
          8: '#ad4e00',
          9: '#873800',
          10: '#612500',
        },
        gold: {
          1: '#fffbe6',
          2: '#fff1b8',
          3: '#ffe58f',
          4: '#ffd666',
          5: '#ffc53d',
          6: '#faad14',
          7: '#d48806',
          8: '#ad6800',
          9: '#874d00',
          10: '#613400',
        },
        yellow: {
          1: '#feffe6',
          2: '#ffffb8',
          3: '#fffb8f',
          4: '#fff566',
          5: '#ffec3d',
          6: '#fadb14',
          7: '#d4b106',
          8: '#ad8b00',
          9: '#876800',
          10: '#614700',
        },
        lime: {
          1: '#fcffe6',
          2: '#f4ffb8',
          3: '#eaff8f',
          4: '#d3f261',
          5: '#bae637',
          6: '#a0d911',
          7: '#7cb305',
          8: '#5b8c00',
          9: '#3f6600',
          10: '#254000',
        },
        green: {
          1: '#f6ffed',
          2: '#d9f7be',
          3: '#b7eb8f',
          4: '#95de64',
          5: '#73d13d',
          6: '#52c41a',
          7: '#389e0d',
          8: '#237804',
          9: '#135200',
          10: '#092b00',
        },
        cyan: {
          1: '#e6fffb',
          2: '#b5f5ec',
          3: '#87e8de',
          4: '#5cdbd3',
          5: '#36cfc9',
          6: '#13c2c2',
          7: '#08979c',
          8: '#006d75',
          9: '#00474f',
          10: '#002329',
        },
        blue: {
          1: '#e6f4ff',
          2: '#bae0ff',
          3: '#91caff',
          4: '#69b1ff',
          5: '#4096ff',
          6: '#1677ff',
          7: '#0958d9',
          8: '#003eb3',
          9: '#002c8c',
          10: '#001d66',
        },
        geekblue: {
          1: '#f0f5ff',
          2: '#d6e4ff',
          3: '#adc6ff',
          4: '#85a5ff',
          5: '#597ef7',
          6: '#2f54eb',
          7: '#1d39c4',
          8: '#10239e',
          9: '#061178',
          10: '#030852',
        },
        purple: {
          1: '#f9f0ff',
          2: '#efdbff',
          3: '#d3adf7',
          4: '#b37feb',
          5: '#9254de',
          6: '#722ed1',
          7: '#531dab',
          8: '#391085',
          9: '#22075e',
          10: '#120338',
        },
        magenta: {
          1: '#fff0f6',
          2: '#ffd6e7',
          3: '#ffadd2',
          4: '#ff85c0',
          5: '#f759ab',
          6: '#eb2f96',
          7: '#c41d7f',
          8: '#9e1068',
          9: '#780650',
          10: '#520339',
        },
        workStatus: {
          accepted: '#10b981',
          pending: '#FFA500',
          working: '#3b82f6',
          finished: '#8b5cf6',
          cancel: '#ef4444',
          others: '#D3D3D3',
        },
      },
      icons: {
        car: 'i-ant-design-car',
      },
      keyframes: {
        'accordion-down': {
          from: {
            height: '0',
          },
          to: {
            height: 'var(--radix-accordion-content-height)',
          },
        },
        'accordion-up': {
          from: {
            height: 'var(--radix-accordion-content-height)',
          },
          to: {
            height: '0',
          },
        },
      },
      animation: {
        ...theme.animation,
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
      spacing: {
        ...theme.spacing,
        inset: '1rem',
      },
    };
  },
});