'use client'

import { useEffect, useState, memo, useCallback } from 'react'
import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { modalContent, modalState } from '@/store/modalAtom'
import { canvasSettingState } from '@/store/canvasAtom'
import { useAxios } from '@/hooks/useAxios'
import { get, post } from '@/lib/Axios'

export default function InitSettingsModal(props) {
  const [objectNo, setObjectNo] = useState('test123240909002') // 후에 삭제 필요
  const [lastRoofSeq, setLastRoofSeq] = useState(0) // 마지막 roofSeq를 추적
  const [open, setOpen] = useRecoilState(modalState)
  const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
  const [roofMaterials, setRoofMaterials] = useState([])
  const [basicSetting, setBasicSettings] = useState({
    roofDrawingSet: '1',
    roofSizeSet: '1',
    roofAngleSet: 'slope',
    roofs: [],
  })

  const modelProps = {
    open,
    setOpen,
  }

  //const { get, post } = useAxios()

  useEffect(() => {
    get({ url: '/api/roof-material/roof-material-infos' }).then((res) => {
      //TODO: error handling
      if (!res) return

      setRoofMaterials(res)
    })

    get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => {
      if (res.length == 0) return

      // 'roofs' 배열을 생성하여 각 항목을 추가
      const roofsRow = res.map((item) => {
        return {
          roofDrawingSet: String(item.roofDrawingSet),
          roofSizeSet: String(item.roofSizeSet),
          roofAngleSet: item.roofAngleSet,
        }
      })

      const roofsArray = res.some((item) => !item.roofSeq)
        ? null //지붕재 추가 정보가 없다면 roofsArray를 null 처리하여 지붕재 추가 정보가 보이지 않게 한다.
        : res.map((item) => ({
            roofSeq: String(item.roofSeq),
            roofType: String(item.roofType),
            roofWidth: String(item.roofWidth),
            roofHeight: String(item.roofHeight),
            roofGap: String(item.roofGap),
            roofLayout: item.roofLayout,
          }))

      // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
      const patternData = {
        roofDrawingSet: roofsRow[0].roofDrawingSet, // 첫 번째 항목의 값을 사용
        roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
        roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
        roofs: roofsArray, // 만들어진 roofs 배열
      }

      // 데이터 설정
      setBasicSettings({ ...patternData })

      // 초기 roofSeq 값을 업데이트
      if (roofsArray == null) {
        //roofs(지붕재추가) 값이 없으면 lastRoofSeq는 1 설정
        setLastRoofSeq(1)
      } else {
        setLastRoofSeq(roofsArray.length + 1)
      }
    })

    if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
      setBasicSettings({ ...canvasSetting })
    }
  }, [])

  //기본 설정값 변경 함수
  const handleBasicSetting = (event) => {
    const newBasicSetting = { ...basicSetting, [event.target.name]: event.target.value }
    setBasicSettings(newBasicSetting)
  }

  //배열 추가 함수
  const addRoofSetting = () => {
    if (basicSetting.roofs != null && basicSetting.roofs.length === 4) {
      alert('지붕재는 최대 4종까지 선택할 수 있습니다.')
      return
    }

    //roofs가 null인 경우 배열 생성
    if (basicSetting.roofs == null) {
      basicSetting.roofs = []
    }

    //기본값
    const newRoofSettings = {
      //roofSeq: basicSetting.roofs.length + 1,
      roofSeq: lastRoofSeq, // 마지막 roofSeq를 1 증가
      roofType: '3',
      roofWidth: '200',
      roofHeight: '200',
      roofGap: '0',
      roofLayout: 'parallel',
    }

    setBasicSettings((prevState) => ({
      ...prevState,
      roofs: [...prevState.roofs, newRoofSettings],
    }))

    setLastRoofSeq(newRoofSettings.roofSeq + 1) // roofSeq 값을 업데이트
  }

  //배열 값 변경 함수
  const handleRoofSettings = (id, event) => {
    console.log(id)

    // 기본 세팅에서 roofs 배열을 복사
    const updatedRoofs = [...basicSetting.roofs]

    // roofSeq가 id와 일치하는 항목의 인덱스 찾기
    const index = updatedRoofs.findIndex((roof) => roof.roofSeq === id)

    if (index !== -1) {
      // 해당 인덱스의 항목을 수정
      updatedRoofs[index] = {
        ...updatedRoofs[index],
        [event.target.name]: event.target.value,
      }

      // 수정된 배열을 상태에 반영
      setBasicSettings((prevState) => ({
        ...prevState,
        roofs: updatedRoofs,
      }))
    }

    // const roof = basicSetting.roofs.map((roof, i) => (id === roof.roofSeq ? { ...roof, [event.target.name]: event.target.value } : roof))

    // setBasicSettings((prevState) => ({
    //   ...prevState,
    //   roofs: [...roof],
    // }))
  }

  //저장
  const submitCanvasConfig = async () => {
    if (!objectNo) {
      alert('object_no를 입력하세요.')
      return
    }

    const patternData = {
      objectNo,
      roofDrawingSet: basicSetting.roofDrawingSet,
      roofSizeSet: basicSetting.roofSizeSet,
      roofAngleSet: basicSetting.roofAngleSet,
      roofMaterialsAddList: basicSetting.roofs,
    }
    await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData })

    //Recoil 설정
    setCanvasSetting({ ...basicSetting })

    // 저장 후 재조회
    //await handleSelect()
  }

  // 삭제버튼 클릭시 해당 요소 id를 targetId로 전달받음
  const onRemove = async (targetId) => {
    console.log(targetId)

    setBasicSettings((prevState) => ({
      ...prevState,
      roofs: prevState.roofs.filter((roof) => roof.roofSeq !== targetId),
    }))
    // setBasicSettings({ ...newRoofSettings }) // 삭제한 데이터 배열을 setData()에 상태를 변화시킴
  }

  return (
    <>
      <div className="container mx-auto mt-10 p-6 bg-white shadow-lg rounded-lg">
        <div className="text-lg font-semibold mb-4">배치면 초기설정</div>

        <div className="mb-6">
          <div className="flex space-x-4">
            <RadioGroup
              label="도면 작성방법"
              name="roofDrawingSet"
              orientation="horizontal"
              value={basicSetting.roofDrawingSet}
              onChange={handleBasicSetting}
            >
              <Radio value="1">치수 입력에 의한 물건작성</Radio>
            </RadioGroup>
          </div>
        </div>

        <div className="mb-6">
          <div className="flex space-x-4">
            <RadioGroup
              label="치수 입력방법"
              name="roofSizeSet"
              orientation="horizontal"
              value={basicSetting.roofSizeSet}
              onChange={handleBasicSetting}
            >
              <Radio value="1">복사도 입력</Radio>
              <Radio value="2">실측값 입력</Radio>
              <Radio value="3">육지붕</Radio>
            </RadioGroup>
          </div>
        </div>

        <div className="mb-6">
          <div className="flex space-x-4">
            <RadioGroup
              label="지붕각도 설정"
              name="roofAngleSet"
              orientation="horizontal"
              value={basicSetting.roofAngleSet}
              onChange={handleBasicSetting}
            >
              <Radio value="slope">경사</Radio>
              <Radio value="angle">각도</Radio>
            </RadioGroup>
          </div>
        </div>

        <div className="flex space-x-4">지붕재 추가(단위 : mm)</div>
        <div className="flex items-center mb-4">
          <button className="px-3 py-1 bg-blue-500 text-white rounded mr-3" onClick={addRoofSetting}>
            Add
          </button>
          <span className="text-sm text-gray-500">※ 지붕재는 최대 4종까지 선택할 수 있습니다.</span>
        </div>

        {/* Roofs Array Rendering */}
        {basicSetting.roofs &&
          basicSetting.roofs.map((roof, index) => {
            return (
              <div key={index} className="mb-4 flex flex-wrap items-center space-x-4" style={{ border: '1px solid black' }}>
                <span> 타입 : </span>
                <Select
                  aria-label="roofMaterial"
                  className={'w-52'}
                  name="roofType"
                  onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
                  items={roofMaterials}
                  defaultSelectedKeys={roof.roofType ? roof.roofType : ''}
                  selectedKeys={roof.roofType}
                  value={roof.roofType}
                >
                  {(roofMaterial) => (
                    <SelectItem key={roofMaterial.id} value={roofMaterial.id}>
                      {roofMaterial.name}
                    </SelectItem>
                  )}
                </Select>
                <span> 너비 : </span>
                <Input
                  type="text"
                  name="roofWidth"
                  placeholder="너비"
                  value={roof.roofWidth}
                  className="w-24"
                  onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
                />
                mm
                <span> 높이 : </span>
                <Input
                  type="text"
                  name="roofHeight"
                  placeholder="높이"
                  value={roof.roofHeight}
                  className="w-24"
                  onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
                />
                mm
                <span> 서까래 간격 : </span>
                <Input
                  type="text"
                  name="roofGap"
                  placeholder="간격"
                  value={roof.roofGap}
                  className="w-24"
                  onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
                />
                mm
                <div className="flex space-x-4">
                  <RadioGroup
                    orientation="horizontal"
                    name="roofLayout"
                    value={roof.roofLayout}
                    defaultValue="parallel"
                    onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
                  >
                    <Radio value="parallel">병렬식</Radio>
                    <Radio value="cascade">계단식</Radio>
                  </RadioGroup>
                </div>
                <div className="flex space-x-4">
                  <Button
                    size="sm"
                    onClick={() => {
                      onRemove(roof.roofSeq)
                    }}
                  >
                    삭제
                  </Button>
                </div>
              </div>
            )
          })}

        <div className="flex gap-4 items-right">
          <Button size="sm" color="secondary" onClick={submitCanvasConfig}>
            저장
          </Button>
          <Button size="sm" onClick={() => setOpen(!open)}>
            취소
          </Button>
          <input type="text" placeholder="Object No 입력" value={objectNo} onChange={(e) => setObjectNo(e.target.value)} />
        </div>
      </div>
    </>
  )
}