'use client'

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

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

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

  const targetRef = useRef<HTMLDivElement>(null)
  const isGeneratedRef = useRef(false)

  useEffect(() => {
    setIsShow(true)
    if (isLoadingSurveyDetail || !surveyDetail || isGeneratedRef.current) return
    isGeneratedRef.current = true
    handleDownPdf()
  }, [surveyDetail?.id, isLoadingSurveyDetail])

  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).then(() => {
      setIsShow(false)
      router.push(`/survey-sale/${id}`)
    })
  }
  const supplementList = supplementaryFacilities
    .filter((facility) => surveyDetail?.detailInfo?.supplementaryFacilities?.includes(facility.id.toString()))
    .map((facility) => facility.name)

  return (
    <>
      <div
        ref={targetRef}
        style={{
          width: '794px', // A4 너비
          minHeight: '1123px', // A4 높이
          transform: 'scale(1.0)',
          transformOrigin: 'top left',
          padding: '20px',
          boxSizing: 'border-box',
          backgroundColor: '#fff',
          fontSize: '12px',
        }}
      >
        <div>
          <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',
                    }}
                  >
                    {supplementList === null && surveyDetail?.detailInfo?.supplementaryFacilitiesEtc === null
                      ? '-'
                      : surveyDetail?.detailInfo?.supplementaryFacilitiesEtc
                      ? `${supplementList.join(', ')}, ${surveyDetail?.detailInfo?.supplementaryFacilitiesEtc}`
                      : supplementList.join(', ')}
                  </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 !== null
                      ? `${surveyDetail?.detailInfo?.installationSystemEtc}`
                      : '-'} */}
                    {surveyDetail?.detailInfo?.installationSystem === null && surveyDetail?.detailInfo?.installationSystemEtc === null
                      ? '-'
                      : surveyDetail?.detailInfo?.installationSystemEtc
                      ? `${surveyDetail?.detailInfo?.installationSystemEtc}`
                      : selectBoxOptions.installationSystem.find((system) => system.id.toString() === surveyDetail?.detailInfo?.installationSystem)
                          ?.name}
                  </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',
                    }}
                  >
                    {surveyDetail?.detailInfo?.roofMaterial === null && surveyDetail?.detailInfo?.roofMaterialEtc === null
                      ? '-'
                      : 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 ??
                      (surveyDetail?.detailInfo?.roofShapeEtc ? ` ${surveyDetail?.detailInfo?.roofShapeEtc}` : '-')}
                  </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 ? `${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',
                    }}
                  >
                    {radioEtcData.houseStructure.find((structure) => structure.id.toString() === surveyDetail?.detailInfo?.houseStructure)?.label ??
                      (surveyDetail?.detailInfo?.houseStructureEtc ? ` ${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',
                    }}
                  >
                    {/* {surveyDetail?.detailInfo?.rafterMaterial === null && surveyDetail?.detailInfo?.rafterMaterialEtc === null
                      ? '-'
                      : radioEtcData.rafterMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.rafterMaterial)?.label ??
                        surveyDetail?.detailInfo?.rafterMaterialEtc} */}
                    {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',
                    }}
                  >
                    {radioEtcData.structureOrder.find((order) => order.id.toString() === surveyDetail?.detailInfo?.structureOrder)?.label ??
                      (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',
                    }}
                  >
                    {surveyDetail?.detailInfo?.installationAvailability === null && surveyDetail.detailInfo?.installationAvailabilityEtc === null
                      ? '-'
                      : 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>
    </>
  )
}
