import React from 'react';
import { screen } from '@testing-library/react';
import { createIdentity, renderInAppContext } from '@theorchard/suite-testing';
import { testNrSoundRec as song } from 'lib/mockNrSoundRecData';
import { featureArrayToDic } from 'lib/test/features';
import SongPageHeader, { Props, CLASSNAME } from '../songPageHeader';
import type { SongMetadata } from 'src/data/queries/nrSoundRecordingById/types';

describe('<SongPageHeader>', () => {
    const renderWrapper = (
        songProps?: Partial<SongMetadata>,
        props?: Partial<Props>,
        featureNames?: string[],
        disableButtons = true
    ) => {
        const identity = createIdentity({
            features: featureArrayToDic(featureNames),
        });

        return renderInAppContext(
            <SongPageHeader
                song={{ ...song, ...songProps }}
                disableButtons={disableButtons}
                handleUpdateClicked={() => null}
                handleCancelClicked={() => null}
                errors={false}
                {...props}
            />,
            { identity }
        );
    };

    test('renders page', () => {
        const { container } = renderWrapper();
        const component = container.getElementsByClassName(CLASSNAME).item(0);
        expect(component).toBeVisible();
    });

    test('renders buttons', () => {
        const { container } = renderWrapper();
        const component = container
            .getElementsByClassName(`${CLASSNAME}-buttons`)
            .item(0);
        expect(component).toBeVisible();
        const updateButton = container
            .getElementsByClassName('UpdateButton')
            .item(0);
        expect(updateButton).toBeDisabled();
    });

    test('buttons are activated', () => {
        const page = `SongPage-Pages-${CLASSNAME}.metadata`;
        const { container } = renderWrapper(
            undefined,
            {
                pages: [{ key: 'delivery', label: page }],
            },
            undefined,
            false
        );
        const component = container
            .getElementsByClassName('UpdateButton')
            .item(0);
        expect(component).toBeVisible();
        expect(component).toBeEnabled();
    });

    test('renders Metadata page', () => {
        const page = `SongPage-Pages-${CLASSNAME}.metadata`;
        renderWrapper(undefined, {
            pages: [{ key: 'metadata', label: page }],
        });

        expect(screen.getByText(page)).toBeInTheDocument();
    });

    test('renders Contributors page', () => {
        const page = `SongPage-Pages-${CLASSNAME}.contributors`;
        renderWrapper(undefined, {
            pages: [{ key: 'contributors', label: page }],
        });

        expect(screen.getByText(page)).toBeInTheDocument();
    });

    test('renders Delivery page', () => {
        const page = `SongPage-Pages-${CLASSNAME}.delivery`;
        renderWrapper(undefined, {
            pages: [{ key: 'delivery', label: page }],
        });

        expect(screen.getByText(page)).toBeInTheDocument();
    });
});