import * as React from 'react';

import { render } from '../../../../vitest/render';

import { MassActions } from './MassActions';

describe('MassActions component', () => {
  it('renders component correctly', () => {
    const { container } = render(
      <MassActions
        massActions={[]}
        massActionsApplicableToAll={false}
        selectedRows={[{ id: 1, name: 'test' }]}
        selectedPage={false}
        selectedAll={false}
        setSelectPage={() => {}}
        toggleSelectAll={() => {}}
        data-testid='massAction'
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="massAction__wrap"
    data-testid="massAction"
  >
    <div
      class="massAction"
    >
      <div
        class="massAction__item"
      >
        <label
          class="v2FormField"
        >
          <div
            class="v2FormField__checkbox"
          >
            <input
              aria-label="Select all on this page"
              class="checkboxField checkboxField--indeterminate"
              data-checked="false"
              id="function-handler"
              type="checkbox"
            />
          </div>
        </label>
      </div>
      <div
        class="massAction__item"
      >
        <button
          aria-expanded="false"
          aria-haspopup="true"
          class="btn btn-secondary btn-sm btn--iconLeft dropdownButton__trigger"
          data-react-aria-pressable="true"
          id="react-aria-_r_0_"
          tabindex="0"
          type="button"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--sm shp-descending"
          />
          Function
        </button>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('with massActionsApplicableToAll on, but not checked', () => {
    const { container } = render(
      <MassActions
        massActions={[]}
        massActionsApplicableToAll={true}
        selectedRows={[
          { id: 1, name: 'test' },
          { id: 2, name: 'test' },
          { id: 3, name: 'test' },
        ]}
        selectedPage={true}
        selectedAll={false}
        setSelectPage={() => {}}
        toggleSelectAll={() => {}}
        data-testid='massAction'
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="massAction__wrap"
    data-testid="massAction"
  >
    <div
      class="massAction"
    >
      <div
        class="massAction__item"
      >
        <label
          class="v2FormField"
        >
          <div
            class="v2FormField__checkbox"
          >
            <input
              aria-label="Select all on this page"
              checked=""
              class="checkboxField checkboxField--checked"
              data-checked="true"
              id="function-handler"
              type="checkbox"
            />
          </div>
        </label>
      </div>
      <div
        class="massAction__item"
      >
        <button
          aria-expanded="false"
          aria-haspopup="true"
          class="btn btn-secondary btn-sm btn--iconLeft dropdownButton__trigger"
          data-react-aria-pressable="true"
          id="react-aria-_r_0_"
          tabindex="0"
          type="button"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--sm shp-descending"
          />
          Function
        </button>
      </div>
      <div
        class="massAction__item"
      >
        <label
          class="v2FormField"
        >
          <div
            class="v2FormField__checkbox"
          >
            <input
              aria-disabled="false"
              aria-label="Apply to all pages"
              class="checkboxField"
              data-checked="false"
              data-disabled="false"
              name="multipage"
              type="checkbox"
            />
            <span
              class="v2FormField__labelAfter"
            >
              Apply to all pages
            </span>
          </div>
        </label>
      </div>
    </div>
  </div>
</div>
`);
  });

  it('with massActionsApplicableToAll on and checked', () => {
    const { container } = render(
      <MassActions
        massActions={[]}
        massActionsApplicableToAll={false}
        selectedRows={[
          { id: 1, name: 'test' },
          { id: 2, name: 'test' },
          { id: 3, name: 'test' },
        ]}
        selectedPage={true}
        selectedAll={true}
        setSelectPage={() => {}}
        toggleSelectAll={() => {}}
        data-testid='massAction'
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="massAction__wrap"
    data-testid="massAction"
  >
    <div
      class="massAction"
    >
      <div
        class="massAction__item"
      >
        <label
          class="v2FormField"
        >
          <div
            class="v2FormField__checkbox"
          >
            <input
              aria-label="Select all on this page"
              checked=""
              class="checkboxField checkboxField--checked"
              data-checked="true"
              id="function-handler"
              type="checkbox"
            />
          </div>
        </label>
      </div>
      <div
        class="massAction__item"
      >
        <button
          aria-expanded="false"
          aria-haspopup="true"
          class="btn btn-secondary btn-sm btn--iconLeft dropdownButton__trigger"
          data-react-aria-pressable="true"
          id="react-aria-_r_0_"
          tabindex="0"
          type="button"
        >
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--sm shp-descending"
          />
          Function
        </button>
      </div>
    </div>
  </div>
</div>
`);
  });
});