import * as React from 'react';

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

import { SectionControls } from './SectionControls';

describe('SectionControls', () => {
  it('renders with primary button only', () => {
    const { container } = render(
      <SectionControls primaryButton={<Button variant='action'>Save</Button>} secondaryButton={false} />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      />
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Save
          </span>
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders with primary and secondary buttons', () => {
    const { container } = render(
      <SectionControls
        primaryButton={<Button variant='action'>Save</Button>}
        secondaryButton={<Button variant='secondary'>Cancel</Button>}
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      >
        <button
          class="btn btn-secondary btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Cancel
          </span>
        </button>
      </span>
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Save
          </span>
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders with primary, secondary, and additional buttons', () => {
    const { container } = render(
      <SectionControls
        primaryButton={<Button variant='action'>Save</Button>}
        secondaryButton={<Button variant='secondary'>Cancel</Button>}
        buttons={
          <>
            <Button variant='primary'>Export</Button>
            <Button variant='primary'>Import</Button>
          </>
        }
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      >
        <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-ascending"
          />
          More functions
        </button>
      </span>
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Save
          </span>
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders with help content', () => {
    const { container } = render(
      <SectionControls
        primaryButton={<Button variant='action'>Save</Button>}
        secondaryButton={<Button variant='secondary'>Cancel</Button>}
        help={<span>Need help? Contact support.</span>}
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      >
        <button
          class="btn btn-secondary btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Cancel
          </span>
        </button>
      </span>
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Save
          </span>
        </button>
      </span>
    </div>
    <span
      class="section__controlsHelp"
    >
      <span>
        Need help? Contact support.
      </span>
    </span>
  </div>
</div>
`);
  });

  it('renders with complex help content', () => {
    const { container } = render(
      <SectionControls
        primaryButton={<Button variant='action'>Submit</Button>}
        secondaryButton={false}
        help={
          <div className='help-content'>
            <strong>Important:</strong> This action cannot be undone.
            <a href='/help' target='_blank'>
              Learn more
            </a>
          </div>
        }
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      />
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Submit
          </span>
        </button>
      </span>
    </div>
    <span
      class="section__controlsHelp"
    >
      <div
        class="help-content"
      >
        <strong>
          Important:
        </strong>
         This action cannot be undone.
        <a
          href="/help"
          target="_blank"
        >
          Learn more
        </a>
      </div>
    </span>
  </div>
</div>
`);
  });

  it('renders with dropdown button in additional buttons', () => {
    const { container } = render(
      <SectionControls
        primaryButton={<Button variant='action'>Save</Button>}
        secondaryButton={<Button variant='secondary'>Cancel</Button>}
        buttons={
          <DropdownButton variant='primary' label='Actions'>
            <DropdownButton.Item label='Copy' />
            <DropdownButton.Item label='Move' />
            <DropdownButton.Item label='Delete' variant='action' />
          </DropdownButton>
        }
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      >
        <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-ascending"
          />
          More functions
        </button>
      </span>
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Save
          </span>
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders with null primary button', () => {
    const { container } = render(
      <SectionControls primaryButton={null} secondaryButton={<Button variant='secondary'>Cancel</Button>} />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      >
        <button
          class="btn btn-secondary btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Cancel
          </span>
        </button>
      </span>
      <span
        class="section__controlsFooterEnd"
      />
    </div>
  </div>
</div>
`);
  });

  it('renders with false secondary button', () => {
    const { container } = render(
      <SectionControls primaryButton={<Button variant='action'>Save</Button>} secondaryButton={false} />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      />
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Save
          </span>
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders with both buttons null/false', () => {
    const { container } = render(<SectionControls primaryButton={null} secondaryButton={false} />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      />
      <span
        class="section__controlsFooterEnd"
      />
    </div>
  </div>
</div>
`);
  });

  it('renders with buttons containing icons', () => {
    const { container } = render(
      <SectionControls
        primaryButton={
          <Button variant='action' iconLeft='shp-checkmark'>
            Save
          </Button>
        }
        secondaryButton={
          <Button variant='secondary' iconLeft='shp-cross'>
            Cancel
          </Button>
        }
        buttons={
          <>
            <Button variant='primary' iconLeft='shp-arrow-down'>
              Download
            </Button>
            <Button variant='primary' iconLeft='shp-arrow-up'>
              Upload
            </Button>
          </>
        }
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      >
        <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-ascending"
          />
          More functions
        </button>
      </span>
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm btn--iconLeft"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--sm shp-checkmark"
            />
            Save
          </span>
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders with complex button structure', () => {
    const { container } = render(
      <SectionControls
        primaryButton={
          <Button variant='action' iconLeft='shp-checkmark' onClick={() => console.log('save')}>
            Save Changes
          </Button>
        }
        secondaryButton={
          <Button variant='secondary' iconLeft='shp-back' onClick={() => console.log('revert')}>
            Revert Changes
          </Button>
        }
        buttons={
          <>
            <Button variant='primary' iconLeft='shp-visible'>
              Preview
            </Button>
            <DropdownButton variant='primary' label='More Actions'>
              <DropdownButton.Item label='Duplicate' icon='shp-design' />
              <DropdownButton.Item label='Archive' icon='shp-cart' />
              <DropdownButton.Item label='Delete' icon='shp-alert' variant='action' />
            </DropdownButton>
          </>
        }
        help={
          <div>
            <span>Unsaved changes will be lost.</span>
            <a href='/docs/saving'>Learn about auto-save</a>
          </div>
        }
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      >
        <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-ascending"
          />
          More functions
        </button>
      </span>
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm btn--iconLeft"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            <span
              aria-hidden="true"
              class="shoptet-icon icon icon--default icon--sm shp-checkmark"
            />
            Save Changes
          </span>
        </button>
      </span>
    </div>
    <span
      class="section__controlsHelp"
    >
      <div>
        <span>
          Unsaved changes will be lost.
        </span>
        <a
          href="/docs/saving"
        >
          Learn about auto-save
        </a>
      </div>
    </span>
  </div>
</div>
`);
  });

  it('renders with empty buttons fragment', () => {
    const { container } = render(
      <SectionControls
        primaryButton={<Button variant='action'>Save</Button>}
        secondaryButton={<Button variant='secondary'>Cancel</Button>}
        buttons={<></>}
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      >
        <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-ascending"
          />
          More functions
        </button>
      </span>
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Save
          </span>
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders with mixed button types in additional buttons', () => {
    const { container } = render(
      <SectionControls
        primaryButton={<Button variant='action'>Submit</Button>}
        secondaryButton={<Button variant='secondary'>Back</Button>}
        buttons={
          <>
            <Button variant='primary'>Regular Button</Button>
            <DropdownButton variant='primary' label='Dropdown'>
              <DropdownButton.Item label='Option 1' />
              <DropdownButton.Item label='Option 2' />
            </DropdownButton>
            <Button variant='primary' iconLeft='shp-design'>
              Settings
            </Button>
          </>
        }
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      >
        <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-ascending"
          />
          More functions
        </button>
      </span>
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Submit
          </span>
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders without any buttons', () => {
    const { container } = render(<SectionControls primaryButton={false} secondaryButton={false} />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      />
      <span
        class="section__controlsFooterEnd"
      />
    </div>
  </div>
</div>
`);
  });

  it('renders with only help content', () => {
    const { container } = render(
      <SectionControls
        primaryButton={false}
        secondaryButton={false}
        help={<span className='help-text'>This is help information only</span>}
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      />
      <span
        class="section__controlsFooterEnd"
      />
    </div>
    <span
      class="section__controlsHelp"
    >
      <span
        class="help-text"
      >
        This is help information only
      </span>
    </span>
  </div>
</div>
`);
  });

  it('renders with nested components in buttons', () => {
    const { container } = render(
      <SectionControls
        primaryButton={<Button variant='action'>Save</Button>}
        secondaryButton={<Button variant='secondary'>Cancel</Button>}
        buttons={
          <div className='button-group'>
            <Button variant='primary'>Group Action 1</Button>
            <Button variant='primary'>Group Action 2</Button>
          </div>
        }
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      >
        <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-ascending"
          />
          More functions
        </button>
      </span>
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Save
          </span>
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders buttons with various props for dropdown conversion', () => {
    const { container } = render(
      <SectionControls
        primaryButton={<Button variant='action'>Save</Button>}
        secondaryButton={
          <Button variant='secondary' iconLeft='shp-cross' onClick={() => console.log('cancel')}>
            Cancel
          </Button>
        }
        buttons={
          <>
            <Button variant='primary' iconRight='shp-external-link' onClick={() => console.log('external')}>
              External Link
            </Button>
            <Button variant='action' iconLeft='shp-alert' onClick={() => console.log('danger')}>
              Danger Action
            </Button>
          </>
        }
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      >
        <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-ascending"
          />
          More functions
        </button>
      </span>
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Save
          </span>
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders with fragments in buttons', () => {
    const { container } = render(
      <SectionControls
        primaryButton={<Button variant='action'>Submit</Button>}
        secondaryButton={<Button variant='secondary'>Cancel</Button>}
        buttons={
          <>
            <Button variant='primary'>Nested Fragment 1</Button>
            <Button variant='primary'>Nested Fragment 2</Button>
          </>
        }
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      >
        <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-ascending"
          />
          More functions
        </button>
      </span>
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Submit
          </span>
        </button>
      </span>
    </div>
  </div>
</div>
`);
  });

  it('renders with complex help containing interactive elements', () => {
    const { container } = render(
      <SectionControls
        primaryButton={<Button variant='action'>Complete Setup</Button>}
        secondaryButton={<Button variant='secondary'>Skip</Button>}
        help={
          <div className='interactive-help'>
            <p>Complete all required fields before continuing.</p>
            <div className='help-actions'>
              <button type='button' className='help-btn'>
                Show Tutorial
              </button>
              <button type='button' className='help-btn'>
                Get Help
              </button>
            </div>
          </div>
        }
      />
    );
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="section__controlsFooter"
  >
    <div
      class="section__controlsFooterStack"
    >
      <span
        class="section__controlsFooterStart"
      >
        <button
          class="btn btn-secondary btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Skip
          </span>
        </button>
      </span>
      <span
        class="section__controlsFooterEnd"
      >
        <button
          class="btn btn-action btn-sm"
          data-react-aria-pressable="true"
          type="button"
        >
          <span
            class="btn--content"
          >
            Complete Setup
          </span>
        </button>
      </span>
    </div>
    <span
      class="section__controlsHelp"
    >
      <div
        class="interactive-help"
      >
        <p>
          Complete all required fields before continuing.
        </p>
        <div
          class="help-actions"
        >
          <button
            class="help-btn"
            type="button"
          >
            Show Tutorial
          </button>
          <button
            class="help-btn"
            type="button"
          >
            Get Help
          </button>
        </div>
      </div>
    </span>
  </div>
</div>
`);
  });
});