'use client'

import React, { useState, useEffect } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { Input, RadioGroup, Radio, Button, Autocomplete, AutocompleteItem, Select, SelectItem, Checkbox, Textarea, button } from '@nextui-org/react'
import Link from 'next/link'
import { get } from '@/lib/Axios'
import { queryStringFormatter } from '@/util/common-utils'
import dayjs from 'dayjs'
import { useForm } from 'react-hook-form'
export default function StuffDetail() {
  const router = useRouter()
  const searchParams = useSearchParams()

  //form
  const formInitValue = {
    // 물건번호 T...(임시) R...(진짜)
    dispCompanyName: '', //담당자
    objectStatusId: '0', //물건구분(신축:0 기축 : 1)
    objectName: '', //물건명
    objectNameOmit: '', //경칭선택
    objectNameKana: '', //물건명 후리가나
    saleStoreId: '', //판매점ID
    saleStoreName: '', //판매점명
    zipNo: '', //우편번호
    prefId: '', //도도부현
    address: '', //주소
    powerSimArea: '', //발전량시뮬레이션지역
    windSpeed: '', //기준풍속
    snowCover: '', //수직적설량
    coldAreaChk: false, //한랭지대책시행
    surfaceType: '', //면조도구분(Ⅲ・Ⅳ / Ⅱ)
    saltAreaChk: false, //염해지역용아이템사용
    installHeight: '', //설치높이
    powerConTerms: '', //계약조건
    remark: '', //메모
    tempFlag: 'T', //임시저장(1) 저장(0)
  }
  const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
    defaultValues: formInitValue,
  })

  const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }

  const [receiveUser, setReceiveUser] = useState('') //담당자
  const [name2, setName2] = useState('') //물건명
  const [name3, setName3] = useState('') //물건명후리가나
  const [zipCode, setZipCode] = useState('') //우편번호
  const [name5, setName5] = useState('') //수직적설량
  const [gubun, setGubun] = useState('NEW') //신축 기축
  const [sel, setSel] = useState('') //경칭선택
  const [sel2, setSel2] = useState('') //발전량시뮬레이션지역
  const [sel3, setSel3] = useState('') //기준풍속
  const [sel4, setSel4] = useState('') //설치높이

  const [errors, setErrors] = useState({})
  const [isFormValid, setIsFormValid] = useState(false) //임시저장, 진짜저장 버튼 컨트롤
  const [testSelOption, setTestSelOption] = useState([]) // 테스트용
  const [autoSelectValue, setAutoSelectValue] = useState('') //판매점명 자동완성
  const [buttonValid, setButtonValid] = useState(false) //주소검색 활성화 컨트롤
  const [isSelected, setIsSelected] = useState(false) //한랭지대첵 체크박스
  const [isSelected2, setIsSelected2] = useState(false) //염해지역용아이템사용 체크박스
  const [gubun2, setGubun2] = useState('1') //면조도구분 라디오
  const [gubun3, setGubun3] = useState('A') //계약조건 라디오
  const [memo, setMemo] = useState('') //메모
  const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set

  // const [address1, setAddress1] = useState('') //우편API리턴 도도부현명
  // const [address2, setAddress2] = useState('') //우편API리턴 시구정촌명
  // const [address3, setAddress3] = useState('') //우편API리턴 마을 지역명
  // const [prefCode, setPrefCode] = useState(1) //우편API prefcode

  const [editMode, setEditMode] = useState('NEW')
  const [detailData, setDetailData] = useState({})

  useEffect(() => {
    // console.log('상세화면진입:::::::::', searchParams.get('objectNo'))
    console.log('물건번호::::', objectNo)

    if (objectNo) {
      // console.log('상세::', objectNo)
      setEditMode('EDIT')
      if (objectNo.substring(0, 1) === 'R') {
        setIsFormValid(true)
      }
      //일단 플랜번호 무조건 1로
      //API 호출
      get({ url: `/api/object/v1.0/object/${objectNo}/1` }).then((res) => {
        if (res != null) {
          // console.log('res:::::::', res)
          setDetailData(res)
        }
      })
    }
  }, [objectNo])

  useEffect(() => {
    // validateForm()
  }, [receiveUser, name2, name3, gubun, sel, autoSelectValue, zipCode, sel2, sel3, name5, sel4])

  // 우편번호 숫자만 체크
  const _zipNo = watch('zipNo')
  useEffect(() => {
    console.log('실시간이니:::::', _zipNo)
    if (_zipNo !== '' && _zipNo.length === 7 && !_zipNo.match(/\D/g)) {
      console.log('벨리통과했군')
      setButtonValid(true)
    } else {
      setButtonValid(false)
    }
  }, [_zipNo])

  // 수직적설량 숫자만
  const textTypeHandler2 = (e) => {
    if (!e.target.value.match(/[^0-9]/g)) {
      setName5(e.target.value)
    }
  }
  const validateForm = () => {
    let errors = {}

    if (!receiveUser || receiveUser.trim().length === 0) {
      errors.receiveUser = '담당자 is required.'
    }

    if (!name2 || name2.trim().length === 0) {
      errors.name2 = '물건명 is required.'
    }

    if (!name3 || name3.trim().length === 0) {
      errors.name3 = '물건명후리가나 is required.'
    }

    if (!sel) {
      errors.sel = '경칭선택 is required'
    }

    if (!sel2) {
      errors.sel2 = '발전량시뮬레이션지역 is required'
    }

    if (!sel3) {
      errors.sel3 = '기준풍속 is required'
    }

    if (!sel4) {
      errors.sel4 = '설치높이 is required'
    }

    if (!autoSelectValue) {
      errors.autoSelectValue = '판매점ID자동완성 is required'
    }

    if (!zipCode || zipCode.length != 7) {
      errors.zipCode = '우편번호 is required.'
      setButtonValid(true)
    } else {
      setButtonValid(false)
    }

    if (!name5) {
      errors.name5 = '수직적설량 is required.'
    }

    console.log('errors::', errors)
    setErrors(errors)
    setIsFormValid(Object.keys(errors).length === 0)
  }

  // 우편번호 API
  const onSearchPostNumber = () => {
    const params = {
      zipcode: _zipNo,
    }
    get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
      console.log('우편API RES::::::::', res)
      //7830060
      if (res.status === 200) {
        if (res.results?.length > 0) {
          // setAddress1(res.results[0].address1)
          // setAddress2(res.results[0].address2)
          // setAddress3(res.results[0].address3)
          // setPrefCode(res.results[0].prefcode)
          //       prefId: '', //도도부현
          // address: '', //주소
          form.setValue('prefId', res.results[0].prefcode)
          form.setValue('address', res.results[0].address2 + res.results[0].address3)
        } else {
          alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
        }
      } else {
        alert(res.message)
      }
    })
  }

  const onTempSave = () => {
    console.log('임시저장::', isFormValid)
  }

  const onSave = () => {
    console.log('진짜저장isFormValid:::', isFormValid)
  }

  const moveList = () => {
    router.push('/management/stuff')
  }

  const changeAddress2 = (e) => {
    console.log('e:::::::', e.target.value)
  }

  //필수값 다 입력했을때
  const onValid = (data) => {
    console.log('data::::::', data)
    const formData = form.getValues()
    //console.log('formData::::', formData)
    const _dispCompanyName = watch('dispCompanyName')
    const _objectStatusId = watch('objectStatusId')
    const _objectNameOmit = watch('objectNameOmit')
    const _zipno = watch('zipno')
    console.log(_dispCompanyName)
    console.log(_objectStatusId)
    console.log(_objectNameOmit)
    console.log(_zipno)
  }

  //필수값 안넣었을때
  const onInvalid = (errors) => {
    console.log('실패', errors)
  }

  return (
    <>
      {(editMode === 'NEW' && (
        <form onSubmit={handleSubmit(onValid, onInvalid)}>
          <div>
            <div>(*필수 입력항목)</div>
            <div className="form-input">
              <label>담당자*</label>
              <input type="text" className="input-origin" {...form.register('dispCompanyName', { required: true })} />
            </div>
            <div className="form-input">
              <label>물건구분/물건명*</label>
              <input type="radio" name="objectStatusId" value="0" id="objectStatus0" {...form.register('objectStatusId')} />
              <label htmlFor="objectStatus0">신축</label>
              <input type="radio" name="objectStatusId" value="1" id="objectStatus1" {...form.register('objectStatusId')} />
              <label htmlFor="objectStatus0">기축</label>
              <input type="text" className="input-origin" {...form.register('objectName', { required: true })} />
              <div className="flex w-full max-w-xs flex-col gap-2">
                <select name="objectNameOmit" {...register('objectNameOmit', { required: true })}>
                  <option value="">경칭선택</option>
                  <option value="11">111</option>
                  <option value="22">222</option>
                  <option value="33">333</option>
                </select>
              </div>
            </div>
            <div className="form-input">
              <label>물건명 후리가나</label>
              <input type="text" className="input-origin" {...form.register('objectNameKana', { required: true })} />
            </div>
            <div className="form-input">
              <label>1차 판매점명 / ID</label>
            </div>
            <div className="form-input">
              <label>2차 판매점명 / ID</label>
            </div>
            <div className="form-input">
              <label>우편번호</label>
              <input
                type="text"
                className="input-origin"
                maxLength={7}
                {...form.register('zipNo', {
                  required: true,
                  minLength: { value: 7, message: '7자리만가능' },
                  pattern: { value: /^[0-9]*$/g, message: '숫자만 입력' },
                })}
              />
              <Button isDisabled={!buttonValid} onClick={onSearchPostNumber}>
                주소검색
              </Button>
              *우편번호 7자리를 입력한 후, 주소검색 버튼을 클릭해 주십시오
            </div>
            <div className="form-input">
              <label>도도부현 / 주소</label>

              <input type="text" className="input-origin" value={form.watch('address')} {...form.register('address')} />
            </div>
          </div>
          <button type="submit">저장!!!!!!!!!</button>
        </form>
      )) || <div>상세:::::::::::</div>}

      {/* <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
        <div>
          <span>물건번호</span>
          <span>{objectNo}</span>
        </div>
        <div>
          <span>사양확정일</span>
          <span>{detailData?.specDate ? dayjs(detailData.specDate).format('YYYY.MM.DD') : null}</span>
        </div>
        <div>
          <span>갱신일시</span>
          <span>
            {detailData?.lastEditDatetime
              ? dayjs(detailData.lastEditDatetime).format('YYYY.MM.DD HH:mm:ss')
              : detailData?.createDatetime
                ? dayjs(detailData.createDatetime).format('YYYY.MM.DD HH:mm:ss')
                : null}
          </span>
        </div>
        <div>
          <span>등록일</span>
          <span></span>
        </div>
      </div> */}
      {/* <div>(*필수 입력항목)</div>
      
        <div>
          <input type="text" placeholder="물건명" value={name2} onChange={(e) => setName2(e.target.value)} />
        </div>
        <div className="flex w-full max-w-xs flex-col gap-2">
          <Select label="경칭선택" className="max-w-xs" onChange={(e) => setSel(e.target.value)}>
            <SelectItem key="1">111</SelectItem>
            <SelectItem key="2">222</SelectItem>
            <SelectItem key="3">333</SelectItem>
          </Select>
        </div>
        <div>
          <span>물건명 후리가나</span>
          <input type="text" placeholder="물건명 후리가나" value={name3} onChange={(e) => setName3(e.target.value)} />
        </div>
      </div> */}
      {/* <div>
        <span>판매점명 /ID *</span>
        <div className="flex w-full max-w-xs flex-col gap-2">
          <Autocomplete
            className="max-w-xs"
            defaultItems={testSelOption}
            label="판매점ID자동완성으로 바꾸기"
            selectedKey={autoSelectValue}
            onSelectionChange={setAutoSelectValue}
          >
            {(option) => <AutocompleteItem key={option.id}>{option.name}</AutocompleteItem>}
          </Autocomplete>
        </div>
      </div> */}
      {/* <div>
        <span>우편번호*</span>
        <input type="text" placeholder="숫자7자리 입력여부 체크" value={zipCode} maxLength="7" onChange={textTypeHandler} />
        <Button onClick={onSearchPostNumber} isDisabled={buttonValid}>
          주소검색
        </Button>
        *우편번호 7자리를 입력한 후, 주소검색 버튼을 클릭해 주십시오
      </div> */}
      {/* <div>
        <span>도도부현 / 주소*</span>
        <input type="text" placeholder="주소검색 결과 주소 셋팅 칸" value={address2 + address3} onChange={changeAddress2} />
      </div> */}
      {/* <div>
        <span>발전량시뮬레이션지역*</span>
        <Select label="발전량시뮬레이션지역" className="max-w-xs" onChange={(e) => setSel2(e.target.value)}>
          <SelectItem key="1">111</SelectItem>
          <SelectItem key="2">222</SelectItem>
          <SelectItem key="3">333</SelectItem>
        </Select>
      </div>
      <div>
        <span>기준풍속*</span>
        <Select label="기준풍속" className="max-w-xs" onChange={(e) => setSel3(e.target.value)}>
          <SelectItem key="1">111</SelectItem>
          <SelectItem key="2">222</SelectItem>
          <SelectItem key="3">333</SelectItem>
        </Select>
        m/s이하
      </div>
      <div>
        <span>수직적설량*</span>
        <input type="text" placeholder="수직적설량" value={name5} maxLength="3" onChange={textTypeHandler2} /> cm
        <Checkbox isSelected={isSelected} onValueChange={setIsSelected}>
          한랭지대책시행
        </Checkbox>
      </div> */}
      {/* <div>
        <span>면조도구분*</span>
        <input
          type="radio"
          name="radio_gubun2"
          id="radio_1"
          value={'1'}
          checked={gubun2 === '1' ? true : false}
          onChange={(e) => {
            setGubun2(e.target.value)
          }}
        />
        <label htmlFor="radio_1">III·IV</label>
        <input
          type="radio"
          name="radio_gubun2"
          id="radio_2"
          value={'2'}
          checked={gubun2 === '2' ? true : false}
          onChange={(e) => {
            setGubun2(e.target.value)
          }}
        />
        <label htmlFor="radio_2">II</label>
        <Checkbox isSelected={isSelected2} onValueChange={setIsSelected2}>
          염해지역용아이템사용
        </Checkbox>
      </div>
      <div>
        <span>설치높이*</span>
        <Select label="설치높이" className="max-w-xs" onChange={(e) => setSel4(e.target.value)}>
          <SelectItem key="1">111</SelectItem>
          <SelectItem key="2">222</SelectItem>
          <SelectItem key="3">333</SelectItem>
        </Select>
        m
      </div>
      <div>
        <span>계약조건</span>
        <input
          type="radio"
          name="radio_gubun3"
          id="radio_a"
          value={'A'}
          checked={gubun3 === 'A' ? true : false}
          onChange={(e) => {
            setGubun3(e.target.value)
          }}
        />
        <label htmlFor="radio_a">잉여</label>
        <input
          type="radio"
          name="radio_gubun3"
          id="radio_b"
          value={'B'}
          checked={gubun3 === 'B' ? true : false}
          onChange={(e) => {
            setGubun3(e.target.value)
          }}
        />
        <label htmlFor="radio_2">전량</label>
      </div>
      <div>
        <span>메모</span>
        <Textarea
          value={memo}
          onValueChange={setMemo}
          disableAutosize
          classNames={{
            base: 'max-w-xs',
            input: 'resize-y min-h-[40px]',
          }}
        />
      </div>
      {!isFormValid ? (
        <>
          <Button onClick={onTempSave}>임시저장</Button>
        </>
      ) : (
        <>
          <Button onClick={onSave}>진짜저장</Button>
        </>
      )}
      <Link href="/management/stuff">
        <button type="button">물건목록</button>
      </Link> */}
    </>
  )
}