'use client'

import { useEffect, useRef } from 'react'
import generatePDF, { Margin, Resolution } from 'react-to-pdf'
import { useParams } from 'next/navigation'
import { useSurvey } from '@/hooks/useSurvey'
import { radioEtcData, roofMaterial, selectBoxOptions, supplementaryFacilities } from '../survey-sale/detail/RoofForm'

export default function SurveySaleDownloadPdf() {
  const params = useParams()
  const id = params.id

  const { surveyDetail, isLoadingSurveyDetail } = useSurvey(Number(id))

  useEffect(() => {
    if (isLoadingSurveyDetail) return
    handleDownPdf()
  }, [surveyDetail, isLoadingSurveyDetail])

  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,
      },
      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 onClick={handleDownPdf}>down</button> */}
      <div ref={targetRef} style={{ boxSizing: 'border-box' }}>
        <div style={{ margin: '0 auto', padding: 0, maxWidth: '800px', minWidth: '800px' }}>
          <div style={{ padding: '20px 20px 50px', borderBottom: '2px solid #2E3A59' }}>
            <div style={{ float: 'left', verticalAlign: 'middle', fontSize: '18px', color: '#101010', fontWeight: 600, fontFamily: 'M-Gothic' }}>
              HWJ 現地調査シート1/2
            </div>
            <div style={{ float: 'right', overflow: 'hidden' }}>
              <div style={{ float: 'left', marginRight: '20px' }}>
                <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#101010', fontWeight: 500, fontFamily: 'M-Gothic', textAlign: 'right' }}>
                  現地明登施工店名
                </p>
                <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>
                  {surveyDetail?.store}
                </p>
              </div>
              <div style={{ float: 'right' }}>
                <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#101010', fontWeight: 500, fontFamily: 'M-Gothic' }}>現地阴買日</p>
                <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>
                  {surveyDetail?.investigationDate}
                </p>
              </div>
            </div>
          </div>
          <div style={{ padding: '24px 20px 12px' }}>
            <table
              style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
            >
              <tbody>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '73px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    お客様名
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {surveyDetail?.customerName}
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '73px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    ご住所
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {surveyDetail?.postCode ? `(${surveyDetail?.postCode}) ${surveyDetail?.address} ${surveyDetail?.addressDetail}` : '-'}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style={{ padding: '12px 20px 12px' }}>
            <div style={{ fontSize: '14px', fontFamily: 'M-Gothic', color: '#101010', fontWeight: 500, marginBottom: '10px' }}>も気開係</div>
            <table
              style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
            >
              <tbody>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    雨気契约容国
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {surveyDetail?.detailInfo?.contractCapacity}
                  </td>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    電気契約会社
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {surveyDetail?.detailInfo?.retailCompany}
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    電気付带設備
                  </th>
                  <td
                    colSpan={3}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {supplementaryFacilities
                      .filter((facility) => surveyDetail?.detailInfo?.supplementaryFacilities?.includes(facility.id.toString()))
                      .map((facility) => facility.name)
                      .join(', ')}
                    {surveyDetail?.detailInfo?.supplementaryFacilitiesEtc
                      ? `, (その他) ${surveyDetail?.detailInfo?.supplementaryFacilitiesEtc}`
                      : '-'}
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    設置希望システム
                  </th>
                  <td
                    colSpan={3}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {
                      selectBoxOptions.installationSystem.find((system) => system.id.toString() === surveyDetail?.detailInfo?.installationSystem)
                        ?.name
                    }
                    {surveyDetail?.detailInfo?.installationSystemEtc ? `, (その他) ${surveyDetail?.detailInfo?.installationSystemEtc}` : '-'}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style={{ padding: '12px 20px 12px' }}>
            <div style={{ fontSize: '14px', fontFamily: 'M-Gothic', color: '#101010', fontWeight: 500, marginBottom: '10px' }}>屋根眀係</div>
            <table
              style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
            >
              <tbody>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    築年数
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {surveyDetail?.detailInfo?.constructionYear === '1' ? '新築' : `既築 (${surveyDetail?.detailInfo?.constructionYear}年)`}
                  </td>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    至根材
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {roofMaterial
                      .filter((material) => surveyDetail?.detailInfo?.roofMaterial?.includes(material.id.toString()))
                      .map((material) => material.name)
                      .join(', ')}
                    {surveyDetail?.detailInfo?.roofMaterialEtc ? `, (その他) ${surveyDetail?.detailInfo?.roofMaterialEtc}` : '-'}
                  </td>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    座根形状
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {selectBoxOptions.roofShape.find((shape) => shape.id.toString() === surveyDetail?.detailInfo?.roofShape)?.name}
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    座根勾配
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {`${surveyDetail?.detailInfo?.roofSlope} 寸`}
                  </td>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    住宅樠造
                  </th>
                  <td
                    colSpan={3}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {`${surveyDetail?.detailInfo?.houseStructure ? '木製' : '(その他)'} ${surveyDetail?.detailInfo?.houseStructureEtc}`}
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    並木材質
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {radioEtcData.rafterMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.rafterMaterial)?.label ??
                      (surveyDetail?.detailInfo?.rafterMaterialEtc ? `(その他) ${surveyDetail?.detailInfo?.rafterMaterialEtc}` : '-')}
                  </td>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    垂木サイズ
                  </th>
                  <td
                    colSpan={3}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {selectBoxOptions.rafterSize.find((size) => size.id.toString() === surveyDetail?.detailInfo?.rafterSize)?.name ??
                      (surveyDetail?.detailInfo?.rafterSizeEtc ? `(その他) ${surveyDetail?.detailInfo?.rafterSizeEtc}` : '-')}
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    垂木ピッチ
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {selectBoxOptions.rafterPitch.find((pitch) => pitch.id.toString() === surveyDetail?.detailInfo?.rafterPitch)?.name ??
                      (surveyDetail?.detailInfo?.rafterPitchEtc ? `(その他) ${surveyDetail?.detailInfo?.rafterPitchEtc}` : '-')}
                  </td>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    垂木方向
                  </th>
                  <td
                    colSpan={3}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {radioEtcData.rafterDirection.find((direction) => direction.id.toString() === surveyDetail?.detailInfo?.rafterDirection)?.label ??
                      '-'}
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    野地板種類
                  </th>
                  <td
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {selectBoxOptions.openFieldPlateKind.find((kind) => kind.id.toString() === surveyDetail?.detailInfo?.openFieldPlateKind)?.name ??
                      (surveyDetail?.detailInfo?.openFieldPlateKindEtc ? `(その他) ${surveyDetail?.detailInfo?.openFieldPlateKindEtc}` : '-')}
                  </td>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    野地板厚さ
                  </th>
                  <td
                    colSpan={3}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {surveyDetail?.detailInfo?.openFieldPlateThickness ? `${surveyDetail?.detailInfo?.openFieldPlateThickness}mm` : '-'}
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    兩漏の形跡
                  </th>
                  <td
                    colSpan={5}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {surveyDetail?.detailInfo?.leakTrace ? 'あり' : 'なし'}
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    ルーフィング種類
                  </th>
                  <td
                    colSpan={5}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {radioEtcData.waterproofMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.waterproofMaterial)
                      ?.label ??
                      (surveyDetail?.detailInfo?.waterproofMaterialEtc ? `(その他) ${surveyDetail?.detailInfo?.waterproofMaterialEtc}` : '-')}
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    断熱材の有無
                  </th>
                  <td
                    colSpan={5}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {
                      radioEtcData.insulationPresence.find((presence) => presence.id.toString() === surveyDetail?.detailInfo?.insulationPresence)
                        ?.label
                    }
                    {surveyDetail?.detailInfo?.insulationPresenceEtc ? `(その他) ${surveyDetail?.detailInfo?.insulationPresenceEtc}` : '-'}
                  </td>
                </tr>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '126px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    屋根構造の順番
                  </th>
                  <td
                    colSpan={5}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {selectBoxOptions.structureOrder.find((order) => order.id.toString() === surveyDetail?.detailInfo?.structureOrder)?.name ??
                      (surveyDetail?.detailInfo?.structureOrderEtc ? `(その他) ${surveyDetail?.detailInfo?.structureOrderEtc}` : '-')}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style={{ padding: '12px 20px' }}>
            <table
              style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
            >
              <tbody>
                <tr>
                  <th
                    style={{
                      padding: '10px',
                      width: '160px',
                      border: '1px solid #2E3A59',
                      backgroundColor: '#F5F6FA',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#101010',
                      textAlign: 'left',
                      boxSizing: 'border-box',
                    }}
                  >
                    区根製品名設置可否確認
                  </th>
                  <td
                    colSpan={5}
                    style={{
                      padding: '10px',
                      border: '1px solid #2E3A59',
                      fontSize: '13px',
                      fontWeight: 500,
                      color: '#FF5656',
                      boxSizing: 'border-box',
                    }}
                  >
                    {
                      selectBoxOptions.installationAvailability.find(
                        (availability) => availability.id.toString() === surveyDetail?.detailInfo?.installationAvailability,
                      )?.name
                    }
                    {surveyDetail?.detailInfo?.installationAvailabilityEtc
                      ? `(その他) ${surveyDetail?.detailInfo?.installationAvailabilityEtc}`
                      : '-'}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style={{ padding: '12px 20px 12px' }}>
            <div style={{ fontSize: '14px', fontFamily: 'M-Gothic', color: '#101010', fontWeight: 500, marginBottom: '10px' }}>メモ</div>
            <div
              style={{
                boxSizing: 'border-box',
                padding: '10px',
                fontSize: '13px',
                fontWeight: 400,
                fontFamily: 'M-Gothic',
                color: '#FF5656',
                border: '1px solid #2E3A59',
                height: '150px',
              }}
            >
              {surveyDetail?.detailInfo?.memo ?? '-'}
            </div>
          </div>
        </div>
      </div>
    </>
  )
}