import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import Input from '@/components/ui/Input';
import Field from '@/components/ui/Field';

describe('Input', () => {
    it('مقدار و placeholder را رندر می‌کند', () => {
        render(<Input defaultValue="ساغر" placeholder="نام" />);
        const el = screen.getByPlaceholderText('نام') as HTMLInputElement;
        expect(el.value).toBe('ساغر');
        expect(el.className).toBe('cp-input');
    });

    it('در حالت hasError قاب قرمز می‌گیرد', () => {
        render(<Input placeholder="کدملی" hasError />);
        const el = screen.getByPlaceholderText('کدملی') as HTMLInputElement;
        expect(el.style.borderColor).toBe('var(--danger)');
    });

    it('با numeric کیبورد عددی و جهت LTR می‌گیرد', () => {
        render(<Input placeholder="مبلغ" numeric />);
        const el = screen.getByPlaceholderText('مبلغ') as HTMLInputElement;
        expect(el.inputMode).toBe('numeric');
        expect(el.getAttribute('dir')).toBe('ltr');
        expect(el.getAttribute('lang')).toBe('en');
    });

    it('با numeric ارقام فارسی را قبل از onChange به لاتین تبدیل می‌کند', () => {
        const onChange = vi.fn();
        render(<Input placeholder="مبلغ" numeric onChange={onChange} />);
        const el = screen.getByPlaceholderText('مبلغ') as HTMLInputElement;
        fireEvent.change(el, { target: { value: '۱۲۳۴' } });
        expect(onChange).toHaveBeenCalledTimes(1);
        expect(onChange.mock.calls[0][0].target.value).toBe('1234');
    });

    it('بدون numeric ورودی را دست‌نخورده می‌گذارد', () => {
        const onChange = vi.fn();
        render(<Input placeholder="نام" onChange={onChange} />);
        const el = screen.getByPlaceholderText('نام') as HTMLInputElement;
        fireEvent.change(el, { target: { value: 'علی۱۲' } });
        expect(onChange.mock.calls[0][0].target.value).toBe('علی۱۲');
    });
});

describe('Field', () => {
    it('برچسب و فرزند را نشان می‌دهد و بدون خطا پیام خطا ندارد', () => {
        render(
            <Field label="نام پدر">
                <Input placeholder="نام پدر را وارد کنید" />
            </Field>,
        );
        expect(screen.getByText('نام پدر')).toBeInTheDocument();
        expect(screen.getByPlaceholderText('نام پدر را وارد کنید')).toBeInTheDocument();
    });

    it('پیام خطا را وقتی error داده شود نمایش می‌دهد', () => {
        render(
            <Field label="کدملی" error="کد ملی باید ۱۰ رقم باشد">
                <Input />
            </Field>,
        );
        expect(screen.getByText('کد ملی باید ۱۰ رقم باشد')).toBeInTheDocument();
    });
});