import React from 'react';
import { act, fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { MaskedValue, DEFAULT_LENGTH, UNMASKED_TIMEOUT } from '../masked-value';
import { MASK_CHAR } from '@theorchard/accounting-apps-shared';

jest.useFakeTimers();
jest.spyOn(global, 'setTimeout');

describe('<MaskedValue>', () => {
    const render = (value: string | number) =>
        renderInAppContext(<MaskedValue value={value} />);

    it('renders masked show unmasked', () => {
        const testValue = '12345abcdef';
        const testMaskedValue = MASK_CHAR.repeat(testValue.length);
        render(testValue);
        const button = screen.getByRole('button');
        const testMaskedValueEl = screen.getByText(testMaskedValue);

        expect(testMaskedValueEl).toBeInTheDocument();
        expect(testMaskedValueEl).not.toHaveClass('show');
        expect(screen.queryAllByAltText(testValue).length).toBeFalsy();

        fireEvent.click(button);

        expect(setTimeout).toHaveBeenCalledWith(
            expect.any(Function),
            UNMASKED_TIMEOUT
        );

        const testValueEl = screen.getByText(testValue);

        expect(testValueEl).toBeInTheDocument();
        expect(testValueEl).toHaveClass('show');
        expect(screen.queryAllByAltText(testMaskedValue).length).toBeFalsy();

        act(() => {
            jest.runOnlyPendingTimers();
        });

        expect(screen.getByText(testMaskedValue)).toBeInTheDocument();
        expect(screen.queryAllByAltText(testValue).length).toBeFalsy();
    });

    it('renders empty value', () => {
        const testValue = '';
        const testMaskedValue = MASK_CHAR.repeat(DEFAULT_LENGTH);
        render(testValue);
        expect(screen.getByText(testMaskedValue)).toBeInTheDocument();
    });

    it('renders datadog privacy settings', () => {
        const { container } = render('');
        expect(container.firstChild).toHaveAttribute('data-dd-privacy', 'mask');
    });
});