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

import {
  buildConsumerFieldWrapper,
  buildConsumerOtpSegmentClass,
  resolveConsumerTone,
  withConsumerFieldError,
} from '@/components/consumer/input/consumerInputStyles'

describe('consumerInputStyles', () => {
  it('forces select to muted tone even when bordered is requested', () => {
    expect(resolveConsumerTone('select', 'bordered')).toBe('muted')
    expect(resolveConsumerTone('input', 'muted')).toBe('muted')
    expect(resolveConsumerTone('input')).toBe('bordered')
  })

  it('builds muted fill background', () => {
    const classes = buildConsumerFieldWrapper({ size: 'md', radius: 'control', tone: 'muted' })

    expect(classes).toContain('bg-[#E2E2E280]')
  })

  it('builds bordered field wrapper with consumer sizing and focus', () => {
    const classes = buildConsumerFieldWrapper({ size: 'md', radius: 'control', tone: 'bordered' })

    expect(classes).toContain('h-12')
    expect(classes).toContain('rounded-[10px]')
    expect(classes).toContain('border-consumer-border')
    expect(classes).toContain('focus-within:!border-consumer-focus')
  })

  it('builds muted select wrapper background', () => {
    const classes = buildConsumerFieldWrapper({ size: 'lg', radius: 'full', tone: 'muted' })

    expect(classes).toContain('h-[52px]')
    expect(classes).toContain('rounded-full')
    expect(classes).toContain('bg-[#E2E2E280]')
  })

  it('applies full radius from consumer wrapper classes', () => {
    const classes = buildConsumerFieldWrapper({ size: 'lg', radius: 'full', tone: 'bordered' })

    expect(classes).toContain('rounded-full')
    expect(classes).not.toContain('rounded-none')
  })

  it('keeps error border overrides on focus and kills invalid outline/ring', () => {
    const classes = withConsumerFieldError(buildConsumerFieldWrapper({ size: 'sm', radius: 'full', tone: 'bordered' }))

    expect(classes).toContain('!border')
    expect(classes).toContain('!border-fourth')
    expect(classes).toContain('focus-within:!border-fourth')
    expect(classes).toContain('data-[active=true]:!border-fourth')
    expect(classes).toContain('!outline-none')
    expect(classes).toContain('!ring-0')
  })

  it('builds otp segment classes from size and radius', () => {
    const classes = buildConsumerOtpSegmentClass({ size: 'md', radius: 'control' })

    expect(classes).toContain('size-12')
    expect(classes).toContain('rounded-[10px]')
    expect(classes).toContain('border-consumer-border')
    expect(classes).toContain('data-[active=true]:!border-primary')
  })
})