import postcss from 'postcss'
import tailwindcss from 'tailwindcss'
import { describe, expect, it } from 'vitest'

import { inlineBreakpoints } from './postcss.config.js'

describe ('inline breakpoints', () => {
  it ('uses height for vertical menus and width for horizontal menus', async () => {
    const source = `
      @media (min-width: 768px) { .menu, .account { display: flex } }
      @media (min-width: 1024px) { .menu { font-size: 1rem } }
      @media (max-width: 767px) { .mobile { display: block } }
      @media (prefers-reduced-motion: reduce) { .menu { transition: none } }
    `
    const { css } = await postcss ([inlineBreakpoints]).process (
        source, { from: 'menus.css' })
    const rules = []
    postcss.parse (css).walkRules (rule => {
      rules.push ([rule.parent.params, rule.selector])
    })

    expect (rules).toEqual ([
        ['(min-width: 768px)',
          ':where(html:not(:lang(mn-Mong))) .menu, '
          + ':where(html:not(:lang(mn-Mong))) .account'],
        ['(min-height: 768px)',
          ':where(html:lang(mn-Mong)) .menu, :where(html:lang(mn-Mong)) .account'],
        ['(min-width: 1024px)', ':where(html:not(:lang(mn-Mong))) .menu'],
        ['(min-height: 1024px)', ':where(html:lang(mn-Mong)) .menu'],
        ['(max-width: 767px)', ':where(html:not(:lang(mn-Mong))) .mobile'],
        ['(max-height: 767px)', ':where(html:lang(mn-Mong)) .mobile'],
        ['(prefers-reduced-motion: reduce)', '.menu']])
  })

  it ('includes responsive utilities generated by Tailwind', async () => {
    const { css } = await postcss ([tailwindcss ({
        content: [{ raw: '<div class="md:hidden lg:text-base"></div>' }],
        corePlugins: { preflight: false } }), inlineBreakpoints]).process (
        '@tailwind utilities;', { from: 'utilities.css' })
    const rules = []
    postcss.parse (css).walkRules (rule => {
      rules.push ([rule.parent.params, rule.selector])
    })

    expect (rules).toContainEqual ([
        '(min-width: 768px)', ':where(html:not(:lang(mn-Mong))) .md\\:hidden'])
    expect (rules).toContainEqual ([
        '(min-height: 768px)', ':where(html:lang(mn-Mong)) .md\\:hidden'])
    expect (rules).toContainEqual ([
        '(min-height: 1024px)', ':where(html:lang(mn-Mong)) .lg\\:text-base'])
  })
})