import { cleanup, fireEvent } from '@testing-library/react';

import { ASSETS_URL } from '../../../consts/common';
import { ThemeProvider } from '../../@styles/theme-provider';
import { render } from '../../../utils/theme-render-wrapper';

import {
  RenderActionButtonsCell,
  RenderAvatarGroupCell,
  RenderTextGroupCell,
  RenderTextListCell
} from '../card-grid';
import Card from './card';
import type { CardProps } from './types';

afterEach(cleanup);

const actionViewHandler = jest.fn();
const cellClickHandler = jest.fn();

const mockRowId = 'mockRowId';
const mockGroupCard: CardProps = {
  columns: [
    {
      field: 'groupName',
      children: (
        <RenderTextGroupCell
          cell={{
            title: 'Administrators',
            subtitle: '18 members',
            avatarProps: {}
          }}
        />
      ),
      flex: 'auto',
      minWidth: 224,
      maxWidth: 398
    },
    {
      field: 'members',
      children: (
        <RenderAvatarGroupCell
          cell={{
            avatars: [
              { initials: 'SG', backgroundColor: '#266FE2' },
              { initials: 'TD', backgroundColor: '#CB5BCB' },
              { src: 'https://cdn.iconscout.com/icon/free/png-256/avatar-366-456318.png' },
              { initials: 'AJ', backgroundColor: '#4DC9F6' },
              { initials: 'JM', backgroundColor: '#109618' },
              { initials: 'RD', backgroundColor: '#A7260C' }
            ].concat(Array(26).fill({}))
          }}
        />
      ),
      width: 152
    },
    {
      field: 'groups',
      children: (
        <RenderTextListCell
          cell={{
            text: ['Developers', 'Sales', 'Production', 'All Users', 'Admins']
          }}
        />
      ),
      width: 232
    },
    {
      field: 'actionButtons',
      children: (
        <RenderActionButtonsCell
          colDef={{
            actions: [
              {
                iconSrc: `${ASSETS_URL}/icons2/icon_view.svg`,
                value: 'view',
                onClick: value => actionViewHandler
              }
            ],
            field: 'actionButtons'
          }}
          row={{
            id: mockRowId
          }}
        />
      ),
      align: 'end',
      hideDivider: true,
      marginLeft: 'auto',
      minWidth: 120,
      width: 120
    }
  ],
  onCellClick: cellClickHandler
};

describe('<Card />', () => {
  it('should render successfully', () => {
    const { baseElement } = render(
      <Card active={true} hovered={true} indicator={false} indicatorColor="inherit" />
    );
    expect(baseElement).toBeTruthy();
  });

  it('should render children, focus and blur', () => {
    const { baseElement, getByRole } = render(<Card>Lorem Ipsum</Card>);
    fireEvent.blur(baseElement);

    const rowEl = getByRole('row');
    fireEvent.focus(rowEl);
    fireEvent.blur(rowEl);
  });

  it('should render mock and click twice', () => {
    const { getAllByRole, getByTestId } = render(
      <ThemeProvider>
        <Card {...mockGroupCard} />
      </ThemeProvider>
    );

    const firstCellEl = getAllByRole('cell')[0];
    firstCellEl.click();
    expect(cellClickHandler).toHaveBeenCalled();

    const actionViewEl = getByTestId(`${mockRowId}_view`);
    actionViewEl.click();
    expect(actionViewHandler).toHaveBeenCalled();
  });
});