import { useState, useRef } from 'react';
import { PDFAtelier, type PDFAtelierRef } from '@innosoft/pdf-atelier-react';

export default function OrientationDetector() {
  const pdfRef = useRef<PDFAtelierRef>(null);
  const [orientation, setOrientation] = useState<
    'portrait' | 'landscape' | null
  >(null);

  const checkOrientation = async () => {
    const isPortrait = await pdfRef.current?.isPortrait();
    setOrientation(isPortrait ? 'portrait' : 'landscape');
  };

  const checkSpecificPage = async (pageNum: number) => {
    const isPortrait = await pdfRef.current?.isPortrait(pageNum);
    console.log(
      `Page ${pageNum} is ${isPortrait ? 'portrait' : 'landscape'}`,
    );
  };

  return (
    <>
      <button onClick={checkOrientation}>
        Check Current Page Orientation
      </button>
      {orientation && <p>Current page: {orientation}</p>}

      <button onClick={() => checkSpecificPage(1)}>Check Page 1</button>
      <button onClick={() => checkSpecificPage(2)}>Check Page 2</button>

      <PDFAtelier
        ref={pdfRef}
        src="/document.pdf"
        license="My License"
      />
    </>
  );
}

import { Component, ViewChild } from '@angular/core';
import { PdfAtelierWrapper } from '@innosoft/pdf-atelier-angular';

@Component({
  standalone: true,
  selector: 'app-orientation',
  imports: [PdfAtelierWrapper],
  template: `
    <button (click)="checkCurrentPage()">Check Orientation</button>
    <p *ngIf="orientation">{{ orientation }}</p>

    <pdf-atelier-wrapper
      [src]="'/document.pdf'"
      [license]="'My License'"
    ></pdf-atelier-wrapper>
  `,
})
export class OrientationComponent {
  @ViewChild(PdfAtelierWrapper) pdfAtelier!: PdfAtelierWrapper;
  orientation: string | null = null;

  async checkCurrentPage() {
    const isPortrait = await this.pdfAtelier.isPortrait();
    this.orientation = isPortrait ? 'Portrait' : 'Landscape';
  }
}

<script setup lang="ts">
import { ref } from 'vue';
import PdfAtelierWrapper from '@innosoft/pdf-atelier-vue';

interface PdfAtelierExposed {
  isPortrait(pageNumber?: number): Promise<boolean>;
}

const pdfRef = ref<PdfAtelierExposed | null>(null);
const orientationInfo = ref<string | null>(null);

const checkAllPages = async () => {
  const isPortrait1 = await pdfRef.value?.isPortrait(1);
  const isPortrait2 = await pdfRef.value?.isPortrait(2);

  orientationInfo.value = `Page 1: ${isPortrait1 ? 'portrait' : 'landscape'}, Page 2: ${isPortrait2 ? 'portrait' : 'landscape'}`;
};
</script>

<template>
  <div>
    <button @click="checkAllPages">Check All Pages</button>
    <p v-if="orientationInfo">{{ orientationInfo }}</p>

    <PdfAtelierWrapper
      ref="pdfRef"
      :src="'/document.pdf'"
      :license="'My License'"
    />
  </div>
</template>