import { RuleTester } from '@typescript-eslint/rule-tester'
import { describe, it, afterAll } from 'vitest'
import rule, { RULE_NAME } from '../../../eslint-rules/rules/no-hardcoded-color-in-style.js'

RuleTester.it = it
RuleTester.describe = describe
RuleTester.afterAll = afterAll

const ruleTester = new RuleTester({
  languageOptions: {
    parserOptions: {
      ecmaFeatures: { jsx: true },
      ecmaVersion: 2023,
      sourceType: 'module',
    },
  },
})

describe('no-hardcoded-color-in-style (ESLint rule)', () => {
  ruleTester.run(RULE_NAME, rule, {
    valid: [
      {
        name: 'CSS var token',
        code: `<div style={{ color: 'var(--td-text-color-placeholder)' }} />`,
      },
      {
        name: 'numeric value 0',
        code: `<div style={{ opacity: 0 }} />`,
      },
      {
        name: 'numeric value 16',
        code: `<div style={{ width: 16 }} />`,
      },
      {
        name: 'inherit keyword',
        code: `<div style={{ color: 'inherit' }} />`,
      },
      {
        name: 'transparent keyword',
        code: `<div style={{ color: 'transparent' }} />`,
      },
      {
        name: 'currentColor keyword',
        code: `<div style={{ color: 'currentColor' }} />`,
      },
      {
        name: 'none keyword',
        code: `<div style={{ display: 'none' }} />`,
      },
      {
        name: 'unset keyword',
        code: `<div style={{ color: 'unset' }} />`,
      },
      {
        name: 'initial keyword',
        code: `<div style={{ color: 'initial' }} />`,
      },
      {
        name: 'pixel string value',
        code: `<div style={{ width: '100px' }} />`,
      },
      {
        name: 'percentage string value',
        code: `<div style={{ width: '50%' }} />`,
      },
      {
        name: 'plain numeric string value',
        code: `<div style={{ zIndex: '10' }} />`,
      },
      {
        name: 'auto keyword',
        code: `<div style={{ width: 'auto' }} />`,
      },
      {
        name: 'contain keyword',
        code: `<div style={{ backgroundSize: 'contain' }} />`,
      },
      {
        name: 'cover keyword',
        code: `<div style={{ backgroundSize: 'cover' }} />`,
      },
    ],

    invalid: [
      {
        name: 'hex3 color #fff',
        code: `<div style={{ color: '#fff' }} />`,
        errors: [{ messageId: 'hardcodedColor', data: { value: '#fff' } }],
      },
      {
        name: 'hex6 color #ffffff',
        code: `<div style={{ color: '#ffffff' }} />`,
        errors: [{ messageId: 'hardcodedColor', data: { value: '#ffffff' } }],
      },
      {
        name: 'hex8 color #ffffffff',
        code: `<div style={{ color: '#ffffffff' }} />`,
        errors: [{ messageId: 'hardcodedColor', data: { value: '#ffffffff' } }],
      },
      {
        name: 'rgb color',
        code: `<div style={{ color: 'rgb(255, 255, 255)' }} />`,
        errors: [{ messageId: 'hardcodedColor', data: { value: 'rgb(255, 255, 255)' } }],
      },
      {
        name: 'rgba color',
        code: `<div style={{ color: 'rgba(255, 255, 255, 0.5)' }} />`,
        errors: [{ messageId: 'hardcodedColor', data: { value: 'rgba(255, 255, 255, 0.5)' } }],
      },
      {
        name: 'hsl color',
        code: `<div style={{ color: 'hsl(120, 50%, 50%)' }} />`,
        errors: [{ messageId: 'hardcodedColor', data: { value: 'hsl(120, 50%, 50%)' } }],
      },
      {
        name: 'multiple style properties with one hardcoded',
        code: `<div style={{ width: 100, color: '#999', opacity: 0.5 }} />`,
        errors: [{ messageId: 'hardcodedColor', data: { value: '#999' } }],
      },
    ],
  })
})
