"use client";

import { useRef } from "react";
import generatePDF, { Margin, Resolution } from "react-to-pdf";

export default function PDFViewContents() {
  const targetRef = useRef<HTMLDivElement>(null);
  const handleDownPdf = () => {
    const options = {
      method: "open" as const,
      resolution: Resolution.HIGH,
      page: {
        margin: Margin.SMALL,
        format: "A4",
        orientation: "portrait" as const, // 'portrait' 세로 | 'landscape' 가로
      },
      canvas: {
        mimeType: "image/png" as const,
        qualityRatio: 1,
      },
      overrides: {
        pdf: {
          compress: true,
        },
        canvas: {
          useCORS: true,
        },
      },
    };

    generatePDF(targetRef, options);
    // generatePDF(targetRef, { filename: 'page.pdf' })
  };
  return (
    <>
      <button className="btn-frame n-blue min" onClick={handleDownPdf}>
        PDF Download
      </button>
      <div className="pdf-contents" ref={targetRef}>
        <div className="pdf-cont-head">
          <div className="pdf-cont-head-tit">HWJ 現地調査シート1/2</div>
          <div className="pdf-cont-head-data-wrap">
            <div className="pdf-cont-head-data-bx">
              <div className="pdf-cont-head-data-tit">現地明登施工店名</div>
              <div className="pdf-cont-head-data">Interplug</div>
            </div>
            <div className="pdf-cont-head-data-bx">
              <div className="pdf-cont-head-data-tit">現地阴買日</div>
              <div className="pdf-cont-head-data">2025-04-05</div>
            </div>
          </div>
        </div>
        <div className="pdf-cont-body">
          <div className="pdf-table">
            <table>
              <colgroup>
                <col width={72} />
                <col />
              </colgroup>
              <tbody>
                <tr>
                  <th>お客様名</th>
                  <td>山田 ひろし</td>
                </tr>
                <tr>
                  <th>ご住所</th>
                  <td>1620042東京都新宿区早稲田町</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div className="pdf-table">
            <div className="pdf-data-tit">も気開係</div>
            <table>
              <colgroup>
                <col width={110} />
                <col />
              </colgroup>
              <tbody>
                <tr>
                  <th>雨気契约容国</th>
                  <td>3kVA(or A)</td>
                </tr>
                <tr>
                  <th>電気契約会社</th>
                  <td>Interplug</td>
                </tr>
                <tr>
                  <th>電気付带設備</th>
                  <td>既設太陽光発電システム</td>
                </tr>
                <tr>
                  <th>設置希望システム</th>
                  <td>ハイブリッド蓄電システム</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div className="pdf-table">
            <div className="pdf-data-tit">屋根眀係</div>
            <table>
              <colgroup>
                <col width={110} />
                <col />
              </colgroup>
              <tbody>
                <tr>
                  <th>築年数</th>
                  <td>新築</td>
                </tr>
                <tr>
                  <th>至根材</th>
                  <td>アスファルトシングル</td>
                </tr>
                <tr>
                  <th>座根形状</th>
                  <td>切妻</td>
                </tr>
                <tr>
                  <th>座根勾配</th>
                  <td>4寸</td>
                </tr>
                <tr>
                  <th>住宅樠造</th>
                  <td>木造</td>
                </tr>
                <tr>
                  <th>並木材質</th>
                  <td>鉄骨材</td>
                </tr>
                <tr>
                  <th>垂木サイズ</th>
                  <td>幅35mm以上×高さ48mm以上</td>
                </tr>
                <tr>
                  <th>垂木ビッチ</th>
                  <td>455mm以下</td>
                </tr>
                <tr>
                  <th>垂木方向</th>
                  <td>縦垂木</td>
                </tr>
                <tr>
                  <th>野地板種類</th>
                  <td>パーティクルボード</td>
                </tr>
                <tr>
                  <th>野地板厚さ</th>
                  <td>12mm</td>
                </tr>
                <tr>
                  <th>兩漏の形跡</th>
                  <td>あり</td>
                </tr>
                <tr>
                  <th>ルーフィング種類</th>
                  <td>アスファルトルーフィング940（22kg以上）</td>
                </tr>
                <tr>
                  <th>断熱材の有無</th>
                  <td>なし</td>
                </tr>
                <tr>
                  <th>屋根構造の順番</th>
                  <td>屋根材/ルーフィング/野地板/垂木</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div className="pdf-table">
            <table>
              <colgroup>
                <col width={150} />
                <col />
              </colgroup>
              <tbody>
                <tr>
                  <th>区根製品名設置可否確認</th>
                  <td>確認済み</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div className="pdf-textarea">
            <div className="pdf-data-tit">メモ</div>
            <div className="pdf-textarea-data">No.25</div>
          </div>
        </div>
      </div>
    </>
  );
}