'use client'

import { useRef, useState, useEffect, useContext } from 'react'
import Image from 'next/image'
import { useRecoilState } from 'recoil'
import { v4 as uuidv4 } from 'uuid'
import { FaAnglesUp } from 'react-icons/fa6'
import { FaAnglesDown } from 'react-icons/fa6'
import { Button } from '@nextui-org/react'
import ColorPicker from './common/color-picker/ColorPicker'
import { cadFileNameState, googleMapFileNameState, useCadFileState, useGoogleMapFileState } from '@/store/canvasAtom'

import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'
import { useMasterController } from '@/hooks/common/useMasterController'
import { useSwal } from '@/hooks/useSwal'
import { convertDwgToPng } from '@/lib/cadAction'
import { GlobalDataContext } from '@/app/GlobalDataProvider'
import QInput from './common/input/Qinput'
import QSelect from './common/select/QSelect'
import QPagination from './common/pagination/QPagination'
import QSelectBox from './common/select/QSelectBox'
import SampleReducer from './sample/SampleReducer'

import styles from './playground.module.css'
import useSWR from 'swr'
import useSWRMutation from 'swr/mutation'
import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
import { canvasPopupStatusStore } from '@/store/canvasPopupStatusAtom'
import { moduleSelectionDataPlanListState } from '@/store/selectedModuleOptions'
import { useRouter } from 'next/navigation'
import { QcastContext } from '@/app/QcastProvider'

export default function Playground() {
  const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
  const [cadFileName, setCadFileName] = useRecoilState(cadFileNameState)
  const [useGoogleMapFile, setUseGoogleMapFile] = useRecoilState(useGoogleMapFileState)
  const [googleMapFileName, setGoogleMapFileName] = useRecoilState(googleMapFileNameState)
  const fileRef = useRef(null)
  const queryRef = useRef(null)
  const [zoom, setZoom] = useState(20)
  const { get, promiseGet, post, promisePost, getFetcher, postFetcher } = useAxios()
  const testVar = process.env.NEXT_PUBLIC_TEST
  const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
  const { getMessage } = useMessage()
  const { swalFire } = useSwal()
  const { getRoofMaterialList, getModuleTypeItemList, getTrestleList, getConstructionList, getTrestleDetailList } = useMasterController()

  const [color, setColor] = useState('#ff0000')

  const [textInput, setTextInput] = useState('')
  const [numberInput, setNumberInput] = useState('')
  const [radioInput, setRadioInput] = useState('')
  const [checkboxInput, setCheckboxInput] = useState([])
  const [selectedValue, setSelectedValue] = useState('')

  const [users, setUsers] = useState([])

  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)

  const router = useRouter()
  const { setIsGlobalLoading } = useContext(QcastContext)

  useEffect(() => {
    setIsGlobalLoading(false)
  }, [])

  useEffect(() => {
    console.log('textInput:', textInput)
  }, [textInput])
  useEffect(() => {
    console.log('numberInput:', numberInput)
  }, [numberInput])
  useEffect(() => {
    console.log('radioInput:', radioInput)
  }, [radioInput])
  useEffect(() => {
    console.log('checkboxInput:', checkboxInput)
  }, [checkboxInput])
  useEffect(() => {
    console.log('selectedValue:', selectedValue)
  }, [selectedValue])

  const handleUsers = async () => {
    // const users = await get('/api/user/find-all')
    const params = {
      url: '/api/user/find-all',
    }
    const users = await get(params)
    console.log('users', users)
  }

  const handleConvert = async () => {
    console.log('file', fileRef.current.files[0])

    const formData = new FormData()
    formData.append('file', fileRef.current.files[0])

    await promisePost({ url: converterUrl, data: formData })
      .then((res) => {
        console.log('response: ', res)
        convertDwgToPng(res.data.Files[0].FileName, res.data.Files[0].FileData)
        setUseCadFile(true)
        setCadFileName(res.data.Files[0].FileName)
        swalFire({ text: '파일 변환 완료' })
      })
      .catch((err) => {
        console.error(err)
        swalFire({ text: '파일 변환 실패' })
      })
  }

  const handleDownImage = async (fileName = '') => {
    const fileNm = fileName === '' ? uuidv4() : fileName
    const queryString = queryRef.current.value === '' ? '서울시 서대문구 연세로5다길 22-3 발리빌라 3층' : queryRef.current.value
    const res = await get({ url: `http://localhost:3000/api/html2canvas?q=${queryString}&fileNm=${fileNm}&zoom=${zoom}` })
    console.log('res', res)
    setGoogleMapFileName(res.fileNm)
    swalFire({ text: '이미지 저장 완료' })
    setUseGoogleMapFile(true)
  }

  const handleZoom = async (type) => {
    if (type === 'up') {
      setZoom((prevState) => prevState + 1)
    } else {
      setZoom((prevState) => prevState - 1)
    }

    await handleDownImage()
  }

  const data = [
    {
      id: 1,
      author: 'SWYOO',
      contents: '버튼 정리(템플릿 적용)',
      date: '2024.07.16',
    },
    {
      id: 2,
      author: 'SWYOO',
      contents: 'README.md 파일 이미지 경로 수정',
      date: '2024.07.17',
    },
    {
      id: 3,
      author: 'SWYOO',
      contents: '',
      date: '',
    },
  ]

  const handleSwalAlert = () => {
    swalFire({
      text: '알림 테스트입니다.',
    })
  }

  const paginationProps = {
    pageNo: 1,
    pageSize: 10,
    pagePerBlock: 10,
    totalCount: 26,
    handleChangePage: (page) => {
      console.log('page', page)
    },
  }

  useEffect(() => {
    console.log('users:', users)
  }, [users])

  const codes = [
    {
      clHeadCd: '203800',
      clCode: 'HEI_455',
      clCodeNm: '세로　455mm이하',
      clPriority: 1,
      name: '세로　455mm이하',
      id: 'HEI_455',
    },
    {
      clHeadCd: '203800',
      clCode: 'HEI_500',
      clCodeNm: '세로　500mm이하',
      clPriority: 2,
      name: '세로　500mm이하',
      id: 'HEI_500',
    },
    {
      clHeadCd: '203800',
      clCode: 'HEI_606',
      clCodeNm: '세로　606mm이하',
      clPriority: 3,
      name: '세로　606mm이하',
      id: 'HEI_606',
    },
    {
      clHeadCd: '203800',
      clCode: 'WID_606',
      clCodeNm: '가로　606mm이하',
      clPriority: 4,
      name: '가로　606mm이하',
      id: 'WID_606',
    },
    {
      clHeadCd: '203800',
      clCode: 'ETC',
      clCodeNm: '기타',
      clPriority: 5,
      name: '기타',
      id: 'ETC',
    },
  ]

  const [myData, setMyData] = useState({
    roofMatlCd: 'ROOF_ID_WA_53A',
    roofMatlNm: '화와 A',
    roofMatlNmJp: '和瓦A',
    widAuth: 'R',
    widBase: '265.000',
    lenAuth: 'R',
    lenBase: '235.000',
    roofPchAuth: null,
    roofPchBase: null,
    raftAuth: 'C',
    raftBaseCd: 'HEI_455',
    id: 'ROOF_ID_WA_53A',
    name: '화와 A',
    selected: true,
    nameJp: '和瓦A',
    length: 235,
    width: 265,
    layout: 'P',
    hajebichi: null,
  })

  const handleChangeMyData = () => {
    setMyData({ ...myData, raftBaseCd: 'HEI_500' })
  }

  const [myData2, setMyData2] = useState({})

  const handleChangeMyData2 = () => {
    setMyData2({
      roofMatlCd: 'ROOF_ID_WA_53A',
      roofMatlNm: '화와 A',
      roofMatlNmJp: '和瓦A',
      widAuth: 'R',
      widBase: '265.000',
      lenAuth: 'R',
      lenBase: '235.000',
      roofPchAuth: null,
      roofPchBase: null,
      raftAuth: 'C',
      raftBaseCd: 'HEI_455',
      id: 'ROOF_ID_WA_53A',
      name: '화와 A',
      selected: true,
      nameJp: '和瓦A',
      length: 235,
      width: 265,
      layout: 'P',
      hajebichi: null,
    })
  }

  // const [callFlag, setCallFlag] = useState(false)
  // const { data: tutoData, error, isLoading } = useSWR('http://localhost:8080/api/tutorial', getFetcher)
  // const { data: tutoData, error, isLoading } = useSWR(callFlag ? 'http://localhost:8080/api/tutorial' : null, getFetcher)
  // const { trigger, isMutating } = useSWRMutation('http://localhost:8080/api/tutorial', postFetcher)

  // if (isLoading) {
  //   return <div>Loading...</div>
  // }

  // if (error) {
  //   return <div>Error...</div>
  // }

  // const [moduleSelectionDataPlanListStore, setModuleSelectionDataPlanListStore] = useRecoilState(moduleSelectionDataPlanListState)
  // useEffect(() => {
  //   console.log('🚀 ~ Playground ~ moduleSelectionDataPlanListStore:', moduleSelectionDataPlanListStore)
  // }, [moduleSelectionDataPlanListStore])
  // const { trigger: canvasPopupStatusTrigger } = useCanvasPopupStatusController({ objectNo: 'R201T01241120001', planNo: 2, popupType: 2 })

  return (
    <>
      <div className="container mx-auto p-4 m-4 border">
        <div className={styles.test}>이 영역은 테스트입니다.</div>
        <div className="my-2">
          <button
            className="btn-frame deepgray"
            onClick={() => {
              getRoofMaterialList()
            }}
          >
            지붕재 목록 조회 API 호출
          </button>{' '}
          <button
            className="btn-frame deepgray"
            onClick={() => {
              getModuleTypeItemList(['ROOF_ID_HIRA_SEME', 'ROOF_ID_ROOGA'])
            }}
          >
            모듈 타입별 아이템 목록 조회 API 호출
          </button>{' '}
          <button
            className="btn-frame deepgray"
            onClick={() => {
              getTrestleList({ moduleTpCd: '', roofMatlCd: '', raftBaseCd: '', trestleMkrCd: '', constMthdCd: '', roofBaseCd: '' }) //임시 데이터
            }}
          >
            가대 목록 조회 API 호출
          </button>{' '}
          <button
            className="btn-frame deepgray"
            onClick={() => {
              getConstructionList({
                //임시 데이터
                moduleTpCd: 'testData_1',
                roofMatlCd: 'testData_2',
                trestleMkrCd: 'testData_3',
                constMthdCd: 'testData_4',
                roofBaseCd: 'testData_5',
                illuminationTp: 'testData_6',
                instHt: 'testData_7',
                stdWindSpeed: 'testData_8',
                stdSnowLd: 'testData_9',
                inclCd: 'testData_10',
                raftBaseCd: '',
                roofPitch: 30,
              })
            }}
          >
            시공법 목록 조회 API 호출
          </button>{' '}
          <button
            className="btn-frame deepgray"
            onClick={() => {
              getTrestleDetailList({
                //임시 데이터
                moduleTpCd: 'testData_1',
                roofMatlCd: 'testData_2',
                trestleMkrCd: 'testData_3',
                constMthdCd: 'testData_4',
                roofBaseCd: 'testData_5',
                illuminationTp: 'testData_6',
                instHt: 'testData_7',
                stdWindSpeed: 'testData_8',
                stdSnowLd: 'testData_9',
                inclCd: 'testData_10',
                constTp: 'testData_11',
                mixMatlNo: 30,
                roofPitch: 0,
              })
            }}
          >
            가대 상세 조회 API 호출
          </button>
        </div>

        <div className="m-2">
          <button
            className="btn-frame deepgray"
            onClick={() => {
              setTextInput('')
            }}
          >
            QInput TextInput DATA RESET
          </button>
          <QInput type="text" placeholder="placeholder" value={textInput} onChange={setTextInput} />
          <QInput type="text" placeholder="read only" value={textInput} onChange={setTextInput} readOnly="true" />
          <br />
          <button
            className="btn-frame deepgray"
            onClick={() => {
              setNumberInput('')
            }}
          >
            QInput NumberInput DATA RESET
          </button>
          <QInput type="number" placeholder="placeholder" value={numberInput} onChange={setNumberInput} />
          <QInput type="number" placeholder="read only" value={numberInput} onChange={setNumberInput} readOnly="true" />
          <br />
          <button
            className="btn-frame deepgray"
            onClick={() => {
              setRadioInput('')
            }}
          >
            QInput Radio DATA RESET
          </button>
          <QInput
            type="radio"
            value={radioInput}
            onChange={setRadioInput}
            options={[
              { id: 'r01', value: 'option1', name: 'Option 1' },
              { id: 'r02', value: 'option2', name: 'Option 2' },
            ]}
          />
          <br />
          <button
            className="btn-frame deepgray"
            onClick={() => {
              setCheckboxInput([])
            }}
          >
            QInput Checkbox DATA RESET
          </button>
          <QInput
            type="checkbox"
            value={checkboxInput}
            onChange={setCheckboxInput}
            options={[
              { id: 'c01', value: 'checkbox1', name: 'Checkbox 1' },
              { id: 'c02', value: 'checkbox2', name: 'Checkbox 2' },
            ]}
          />
        </div>
        <div className="m-2">
          <br />
          <button
            className="btn-frame deepgray"
            onClick={() => {
              setSelectedValue([])
            }}
          >
            QSelect DATA RESET
          </button>
          <QSelect
            value={selectedValue}
            onChange={setSelectedValue}
            // placeholder="동물을 선택하세요"
            options={[
              { id: 's01', value: 'cat', name: '고양이' },
              { id: 's02', value: 'dog', name: '개' },
              { id: 's03', value: 'lion', name: '사자' },
              { id: 's04', value: 'tiger', name: '호랑이' },
            ]}
          />
          <QSelect
            value={selectedValue}
            onChange={setSelectedValue}
            placeholder="동물을 선택하세요"
            options={[
              { id: 's01', value: 'cat', name: '고양이' },
              { id: 's02', value: 'dog', name: '개' },
              { id: 's03', value: 'lion', name: '사자' },
              { id: 's04', value: 'tiger', name: '호랑이' },
            ]}
            disabled="true"
          />
          <QSelect
            value={selectedValue}
            onChange={setSelectedValue}
            placeholder="동물을 선택하세요"
            options={[
              { id: 's01', value: 'cat', name: '고양이' },
              { id: 's02', value: 'dog', name: '개' },
              { id: 's03', value: 'lion', name: '사자' },
              { id: 's04', value: 'tiger', name: '호랑이' },
            ]}
            dark="true"
          />
        </div>
        <div className="w-full bg-orange-300 m-2">{testVar}</div>
        <div>
          <div className="m-2">
            <Button onClick={handleUsers}>Button</Button>
          </div>
        </div>
        <div className="test">
          <p className="text-white">Sass 테스트입니다.</p>
        </div>
        <div dangerouslySetInnerHTML={{ __html: getMessage('welcome', ['<span style="color: red">test</span>']) }}></div>
        <div>
          <h1>React ColorPicker</h1>
          <ColorPicker color={color} setColor={setColor} />
          <div className="p-4">{color}</div>
        </div>
        <div>
          <h1 className="text-2xl">캐드 파일 이미지 사용</h1>
          <input type="file" name="file" ref={fileRef} />
          <div>
            <Button onClick={handleConvert}>Convert</Button>
          </div>
        </div>
        <div>
          <h1 className="text-2xl">구글 맵 이미지 사용</h1>
          <input type="text" ref={queryRef} className="w-80 border-medium my-2" />
          <div>
            <Button onClick={handleDownImage}>Google map Download to Image</Button>
          </div>
          {useGoogleMapFile && (
            <>
              <div className="my-2">
                <p className="text-lg">Zoom Controller : {zoom}</p>
                <Button startContent={<FaAnglesUp />} className="mx-2" onClick={() => handleZoom('up')}></Button>
                <Button startContent={<FaAnglesDown />} className="mx-2" onClick={() => handleZoom('down')}></Button>
              </div>
              <div className="my-2">
                <Image src={`/mapImages/${googleMapFileName}`} width={640} height={640} />
              </div>
            </>
          )}
        </div>
        <div className="my-2">
          <Button onClick={() => swalFire({ text: 'alert 테스트입니다.' })}>Sweetalert - alert</Button>
        </div>
        <div className="my-2">
          <Button onClick={() => swalFire({ text: 'alert 아이콘 테스트입니다.', icon: 'error' })}>Sweetalert - alert - error</Button>
        </div>
        <div className="my-2">
          <Button
            onClick={() =>
              swalFire({
                html: `confirm 테스트입니다.<br />당신은 바보입니까?`,
                type: 'confirm',
                confirmFn: () => {
                  alert('test')
                },
              })
            }
          >
            Sweetalert - confirm
          </Button>
        </div>
        <div className="my-2">
          <QPagination {...paginationProps} />
        </div>
        <div className="my-2">
          <Button
            onClick={() => {
              promiseGet({ url: 'http://localhost:8080/api/user' }).then((res) => setUsers(res.data))
            }}
          >
            axios get test
          </Button>
        </div>
        <div className="my-2">
          <Button
            onClick={() => {
              const result = promisePost({
                url: 'http://localhost:8080/api/user',
                data: {
                  firstName: 'Yoo',
                  lastName: 'Sangwook',
                  email: 'yoo1757@naver.com',
                  age: 46,
                },
              }).then((res) => console.log('res', res))
            }}
          >
            axios post test
          </Button>
        </div>
        <div className="my-2">
          <QSelectBox options={codes} value={myData} sourceKey="id" targetKey="raftBaseCd" showKey="clCodeNm" />
        </div>
        <div className="my-2">
          <Button onClick={handleChangeMyData}>QSelectBox value change!!</Button>
        </div>
        <div className="my-2">
          <QSelectBox options={codes} value={myData2} sourceKey="id" targetKey="raftBaseCd" showKey="clCodeNm" />
        </div>
        <div className="my-2">
          <Button onClick={handleChangeMyData2}>QSelectBox dynamic data bind change!!</Button>
        </div>
        <div className="my-2">
          <QSelectBox title="초기값 테스트" options={[]} value={{}} sourceKey="id" targetKey="raftBaseCd" showKey="clCodeNm" />
        </div>
        <div className="my-2">
          <SampleReducer />
        </div>
        <div className="my-2">
          <Button onClick={() => setManagementState({ ...managementState, objectNo: '1234567890' })}>GlobalDataProvider 테스트</Button>
        </div>
        <div className="my-2">
          <Button onClick={() => setManagementState({})}>GlobalDataProvider 초기화</Button>
        </div>
        {/* <div className="my-2">
          <p>{managementStateLoaded?.objectNo}</p>
        </div> */}
        <div className="my-2">
          <Button onClick={() => swalFire({ text: 'alert 테스트입니다.', type: 'alert', confirmFn: () => console.log('Alert!!!') })}>
            Sweetalert - alert
          </Button>
        </div>
        {/* <div className="my-2">
          {tutoData &&
            tutoData.map((item) => (
              <div key={item.id}>
                {item.name} / {item.email}
              </div>
            ))}
        </div>
        <div className="my-2">
          <Button onClick={() => setCallFlag(true)}>getFetcher call</Button>
        </div>
        <div className="my-2">
          <Button disabled={isMutating} onClick={() => trigger({ id: 3, name: 'seulda kim', email: 'seulda.kim@interplug.co.kr' })}>
            insert data
          </Button>
        </div> */}
        <div className="my-2">
          <Button
            onClick={() => {
              canvasPopupStatusTrigger({
                common: {
                  illuminationTp: '3',
                  instHt: '10',
                  stdWindSpeed: 'WL_32',
                  stdSnowLd: '5',
                  moduleTpCd: 'A1',
                  moduleItemId: '106796',
                },
                roofConstructions: [
                  {
                    roofIndex: 0,
                    addRoof: {
                      roofMatlCd: 'ROOF_ID_WA_53A',
                      roofMatlNm: '일본기와 A',
                      roofMatlNmJp: '和瓦A',
                      widAuth: 'R',
                      widBase: '265.000',
                      lenAuth: 'R',
                      lenBase: '235.000',
                      roofPchAuth: null,
                      roofPchBase: null,
                      raftAuth: 'C',
                      raftBaseCd: 'HEI_455',
                      id: 'ROOF_ID_WA_53A',
                      name: '일본기와 A',
                      selected: true,
                      index: 0,
                      nameJp: '和瓦A',
                      length: 235,
                      width: 265,
                      raft: 'HEI_455',
                      layout: 'P',
                      hajebichi: 0,
                      pitch: 7,
                      angle: 21.8,
                      roofSizeSet: '1',
                      roofAngleSet: 'slope',
                    },
                    trestle: {
                      moduleTpCd: 'A1',
                      moduleTpCdNm: 'A1type',
                      moduleTpCdJp: 'A1type',
                      roofMatlCd: 'ROOF_ID_WA_53A',
                      roofMatlCdNm: '일본기와 A',
                      roofMatlCdJp: '和瓦A',
                      trestleMkrCd: 'ROOF_TECHRI',
                      trestleMkrCdNm: '지붕 기술 연구소',
                      trestleMkrCdJp: '屋根技術研究所',
                      constMthdCd: 'CST026',
                      constMthdCdNm: 'YG 앵커 랙 있음',
                      constMthdCdJp: 'YGアンカー　ラック有り',
                      roofBaseCd: 'RFB001',
                      roofBaseCdNm: '구조용 합판 9mm 이상',
                      roofBaseCdJp: '構造用合板9mm以上',
                      rackYn: null,
                      priority: 1,
                    },
                    construction: {
                      constTp: 'WORK_LV_ID_1',
                      constTpNm: '표준 시공',
                      constTpJp: '標準施工',
                      constPossYn: 'Y',
                      plvrYn: 'Y',
                      cvrYn: 'Y',
                      cvrLmtRow: 9999,
                      snowGdPossYn: 'Y',
                      roofIndex: 0,
                      setupCover: true,
                      setupSnowCover: true,
                      selectedIndex: 1,
                    },
                  },
                  {
                    roofIndex: 1,
                    addRoof: {
                      roofMatlCd: 'ROOF_ID_WA_53B',
                      roofMatlNm: '일본기와 B',
                      roofMatlNmJp: '和瓦B',
                      widAuth: 'R',
                      widBase: '275.000',
                      lenAuth: 'R',
                      lenBase: '225.000',
                      roofPchAuth: null,
                      roofPchBase: null,
                      raftAuth: 'C',
                      raftBaseCd: 'HEI_455',
                      id: 'ROOF_ID_WA_53B',
                      name: '일본기와 B',
                      selected: true,
                      index: 1,
                      nameJp: '和瓦B',
                      length: 225,
                      width: 275,
                      raft: 'HEI_455',
                      layout: 'P',
                      hajebichi: 0,
                      pitch: 5,
                      angle: 21.8,
                      roofSizeSet: '1',
                      roofAngleSet: 'slope',
                    },
                    trestle: {
                      moduleTpCd: 'A1',
                      moduleTpCdNm: 'A1type',
                      moduleTpCdJp: 'A1type',
                      roofMatlCd: 'ROOF_ID_WA_53B',
                      roofMatlCdNm: '일본기와 B',
                      roofMatlCdJp: '和瓦B',
                      trestleMkrCd: 'DAIDO HUNT',
                      trestleMkrCdNm: '다이도 헌트',
                      trestleMkrCdJp: 'ダイドーハント',
                      constMthdCd: 'CST016',
                      constMthdCdNm: '지지 기와Ⅱ-B 랙 있음',
                      constMthdCdJp: '支持瓦Ⅱ-B　ラック有り',
                      roofBaseCd: 'RFB002',
                      roofBaseCdNm: 'OSB12mm 이상',
                      roofBaseCdJp: 'OSB12mm以上',
                      rackYn: null,
                      priority: 95,
                    },
                    construction: {
                      constTp: 'WORK_LV_ID_1',
                      constTpNm: '표준 시공',
                      constTpJp: '標準施工',
                      constPossYn: 'Y',
                      plvrYn: 'Y',
                      cvrYn: 'Y',
                      cvrLmtRow: 9999,
                      snowGdPossYn: 'Y',
                      roofIndex: 1,
                      setupCover: false,
                      setupSnowCover: true,
                      selectedIndex: 1,
                    },
                  },
                  {
                    roofIndex: 2,
                    addRoof: {
                      roofMatlCd: 'ROOF_ID_HIRA_C',
                      roofMatlNm: '평판기와 C',
                      roofMatlNmJp: '平板瓦C',
                      widAuth: 'R',
                      widBase: '305.000',
                      lenAuth: 'R',
                      lenBase: '280.000',
                      roofPchAuth: null,
                      roofPchBase: null,
                      raftAuth: 'C',
                      raftBaseCd: 'HEI_455',
                      id: 'ROOF_ID_HIRA_C',
                      name: '평판기와 C',
                      selected: true,
                      index: 2,
                      nameJp: '平板瓦C',
                      length: 280,
                      width: 305,
                      raft: 'HEI_455',
                      layout: 'P',
                      hajebichi: 0,
                      pitch: 4,
                      angle: 21.8,
                      roofSizeSet: '1',
                      roofAngleSet: 'slope',
                    },
                    trestle: {
                      moduleTpCd: 'A1',
                      moduleTpCdNm: 'A1type',
                      moduleTpCdJp: 'A1type',
                      roofMatlCd: 'ROOF_ID_HIRA_C',
                      roofMatlCdNm: '평판기와 C',
                      roofMatlCdJp: '平板瓦C',
                      trestleMkrCd: 'ROOF_TECHRI',
                      trestleMkrCdNm: '지붕 기술 연구소',
                      trestleMkrCdJp: '屋根技術研究所',
                      constMthdCd: 'CST034',
                      constMthdCdNm: '지지 기와 C 랙 있음',
                      constMthdCdJp: '支持瓦C　ラック有り',
                      roofBaseCd: 'RFB001',
                      roofBaseCdNm: '구조용 합판 9mm 이상',
                      roofBaseCdJp: '構造用合板9mm以上',
                      rackYn: null,
                      priority: 122,
                    },
                    construction: {
                      constTp: 'WORK_LV_ID_1',
                      constTpNm: '표준 시공',
                      constTpJp: '標準施工',
                      constPossYn: 'Y',
                      plvrYn: 'Y',
                      cvrYn: 'Y',
                      cvrLmtRow: 9999,
                      snowGdPossYn: 'Y',
                      roofIndex: 2,
                      setupCover: false,
                      setupSnowCover: false,
                      selectedIndex: 1,
                    },
                  },
                  {
                    roofIndex: 3,
                    addRoof: {
                      roofMatlCd: 'ROOF_ID_HIRA_D',
                      roofMatlNm: '평판기와 D',
                      roofMatlNmJp: '平板瓦D',
                      widAuth: 'R',
                      widBase: '305.000',
                      lenAuth: 'R',
                      lenBase: '280.000',
                      roofPchAuth: null,
                      roofPchBase: null,
                      raftAuth: 'C',
                      raftBaseCd: 'HEI_455',
                      id: 'ROOF_ID_HIRA_D',
                      name: '평판기와 D',
                      selected: true,
                      index: 3,
                      nameJp: '平板瓦D',
                      length: 280,
                      width: 305,
                      raft: 'HEI_455',
                      layout: 'P',
                      hajebichi: 0,
                      pitch: 8,
                      angle: 21.8,
                      roofSizeSet: '1',
                      roofAngleSet: 'slope',
                    },
                    trestle: {
                      moduleTpCd: 'A1',
                      moduleTpCdNm: 'A1type',
                      moduleTpCdJp: 'A1type',
                      roofMatlCd: 'ROOF_ID_HIRA_D',
                      roofMatlCdNm: '평판기와 D',
                      roofMatlCdJp: '平板瓦D',
                      trestleMkrCd: 'DAIDO HUNT',
                      trestleMkrCdNm: '다이도 헌트',
                      trestleMkrCdJp: 'ダイドーハント',
                      constMthdCd: 'CST018',
                      constMthdCdNm: '지지 기와Ⅱ-D 랙 있음',
                      constMthdCdJp: '支持瓦Ⅱ-D　ラック有り',
                      roofBaseCd: 'RFB002',
                      roofBaseCdNm: 'OSB12mm 이상',
                      roofBaseCdJp: 'OSB12mm以上',
                      rackYn: null,
                      priority: 203,
                    },
                    construction: {
                      constTp: 'WORK_LV_ID_3',
                      constTpNm: '강화 시공',
                      constTpJp: '強化施工',
                      constPossYn: 'Y',
                      plvrYn: 'Y',
                      cvrYn: 'Y',
                      cvrLmtRow: 9999,
                      snowGdPossYn: 'Y',
                      roofIndex: 3,
                      setupCover: false,
                      setupSnowCover: false,
                      selectedIndex: 2,
                    },
                  },
                ],
                module: {
                  itemId: '106796',
                  itemNm: 'Q.TRON M-G2.4+ 430',
                  goodsNo: 'Q.TRON M-G2.4+ 430',
                  itemTp: 'A1',
                  mixMatlNo: null,
                  mixItemTpYn: 'N',
                  itemList: [
                    {
                      itemId: '106796',
                      itemNm: 'Q.TRON M-G2.4+ 430',
                      goodsNo: 'Q.TRON M-G2.4+ 430',
                      itemTp: 'A1',
                      color: '#BEF781',
                      longAxis: '1722.000',
                      shortAxis: '1134.000',
                      thickness: '30.000',
                      wpOut: '430',
                      mixMatlNo: null,
                    },
                  ],
                  name: 'Q.TRON M-G2.4+ 430',
                },
              })
            }}
          >
            Test Data insert
          </Button>
        </div>
        <div className="my-2">
          <Button
            onClick={() => {
              const params = {
                pid: 1,
                objectNo: 'RT01250131002',
              }
              router.push(`/floor-plan/estimate/5?pid=${params.pid}&objectNo=${params.objectNo}`)
            }}
          >
            견적서 페이지 이동
          </Button>
        </div>
      </div>
    </>
  )
}