'use client'

import React, { useEffect, useRef, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
import Select from 'react-dropdown-select'
import KO from '@/locales/ko.json'
import JA from '@/locales/ja.json'
import { stuffSearchState } from '@/store/stuffAtom'
import { isEmptyArray } from '@/util/common-utils'
import dayjs from 'dayjs'
import Link from 'next/link'
import SingleDatePicker from '../common/datepicker/SingleDatePicker'
import { sessionStore } from '@/store/commonAtom'
import { useMessage } from '@/hooks/useMessage'
import { isObjectNotEmpty } from '@/util/common-utils'
export default function StuffSearchCondition() {
  const sessionState = useRecoilValue(sessionStore)

  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
  const globalLocaleState = useRecoilValue(globalLocaleStore)
  const { getMessage } = useMessage()
  const ref = useRef()
  const { get } = useAxios(globalLocaleState)

  //달력 props 관련 날짜 셋팅
  const [startDate, setStartDate] = useState(dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
  const [endDate, setEndDate] = useState(dayjs(new Date()).format('YYYY-MM-DD'))

  const rangeDatePickerProps1 = {
    startDate, //시작일
    setStartDate,
  }

  const rangeDatePickerProps2 = {
    startDate: endDate, //종료일
    setStartDate: setEndDate,
  }

  //여기서 선택한 검색조건들을 recoil로 관리
  const resetStuffRecoil = useResetRecoilState(stuffSearchState)
  const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
  const [objectNo, setObjectNo] = useState('') //물건번호
  // const [saleStoreId, setSaleStoreId] = useState('') //판매대리점ID 세션에서 가져와서세팅
  const [address, setAddress] = useState('') //물건주소
  const [objectName, setobjectName] = useState('') //물건명
  const [saleStoreName, setSaleStoreName] = useState('') //판매대리점명
  const [receiveUser, setReceiveUser] = useState('') //담당자
  const [dispCompanyName, setDispCompanyName] = useState('') //견적처
  const [dateType, setDateType] = useState('U') //갱신일(U)/등록일(R)
  const [schSelSaleStoreId, setSchSelSaleStoreId] = useState('') //판매대리점 선택

  const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT
  // 조회
  const onSubmit = () => {
    let diff = dayjs(endDate).diff(startDate, 'day')
    if (diff > 366) {
      return alert(getMessage('stuff.message.periodError'))
    }

    setStuffSearch({
      schObjectNo: stuffSearch?.schObjectNo ? stuffSearch.schObjectNo : objectNo,
      schAddress: stuffSearch?.schAddress ? stuffSearch.schAddress : address,
      schObjectName: stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName,
      schSaleStoreName: stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName,
      schReceiveUser: stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser,
      schDispCompanyName: stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName,
      schDateType: stuffSearch?.schDateType ? stuffSearch.schDateType : dateType,
      schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
      schToDt: dayjs(endDate).format('YYYY-MM-DD'),
      code: 'E',
      schSelSaleStoreId: stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId,
      startRow: stuffSearch?.startRow ? stuffSearch.startRow : 1,
      endRow: stuffSearch?.endRow ? stuffSearch.endRow : 100,
      schSortType: stuffSearch?.schSortType ? stuffSearch.schSortType : 'R',
    })
  }

  //초기화
  const resetRecoil = () => {
    setObjectNo('')
    //setSaleStoreId('') //세션정보
    setAddress('')
    setobjectName('')
    setSaleStoreName('')
    setReceiveUser('')
    setDispCompanyName('')
    setDateType('U')
    setStartDate(dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
    setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
    setSchSelSaleStoreId('')
    handleClear() //판매대리점선택 자동완성 클리어
    resetStuffRecoil()
  }

  useEffect(() => {
    if (isObjectNotEmpty(sessionState)) {
      // console.log('판매대리점 리스트 가져오기 위한 세션정보::::::::', sessionState)
      // storeId가 T01 이거나 1차점일때만 판매대리점 선택 활성화
      // get({ url: `/api/object/saleStore/201TES01/list` }).then((res) => {
      get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
        if (!isEmptyArray(res)) {
          // console.log('판매점 결과:::::', res)
          setSchSelSaleStoreList(res)
        }
      })
    }
  }, [sessionState])

  //초기화 눌렀을 때 자동완성도..
  const handleClear = () => {
    // console.log('ref::', ref.current.state.values)
    if (ref.current.state.dropDown) {
      ref.current.methods.dropDown()
    } else {
      ref.current.state.values = []
    }
  }
  //판매대리점 자동완성 변경
  const onSelectionChange = (key) => {
    if (!isEmptyArray(key)) {
      setSchSelSaleStoreId(key[0].saleStoreId)
      setStuffSearch({ ...stuffSearch, code: 'S', schSelSaleStoreId: key[0].saleStoreId })
    } else {
      setSchSelSaleStoreId('')
      setStuffSearch({ ...stuffSearch, schSelSaleStoreId: '' })
    }
  }

  useEffect(() => {
    setStartDate(stuffSearch?.schFromDt ? stuffSearch.schFromDt : dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
    setEndDate(stuffSearch?.schToDt ? stuffSearch.schToDt : dayjs(new Date()).format('YYYY-MM-DD'))
  }, [stuffSearch])

  useEffect(() => {
    if (globalLocaleState === 'ko') {
      setAppMessageState(KO)
    } else {
      setAppMessageState(JA)
    }
  }, [globalLocaleState])

  return (
    <>
      {/* 퍼블적용시작 */}
      <div className="sub-table-box">
        <div className="table-box-title-wrap">
          <div className="title-wrap">
            <h3>물건현황</h3>
          </div>
          <div className="left-unit-box">
            <Link href="/management/stuff/tempdetail">
              <button type="button" className="btn-origin navy mr5">
                물건신규등록
              </button>
            </Link>
            <button type="button" className="btn-origin navy mr5" onClick={onSubmit}>
              조회
            </button>
            <button type="button" className="btn-origin grey" onClick={resetRecoil}>
              초기화
            </button>
          </div>
        </div>
        <div className="common-table">
          <table>
            <colgroup>
              <col style={{ width: '160px' }} />
              <col />
              <col style={{ width: '160px' }} />
              <col />
              <col style={{ width: '160px' }} />
              <col />
            </colgroup>
            <tbody>
              <tr>
                <th>물건번호</th>
                <td>
                  <div className="input-wrap">
                    <input
                      type="text"
                      className="input-light"
                      placeholder="물건번호 입력"
                      value={stuffSearch?.code === 'E' || stuffSearch?.code === 'M' ? stuffSearch.schObjectNo : objectNo}
                      onChange={(e) => {
                        setObjectNo(e.target.value)
                        setStuffSearch({ ...stuffSearch, code: 'S', schObjectNo: e.target.value })
                      }}
                    />
                  </div>
                </td>
                <th>판매대리점명</th>
                <td>
                  <div className="input-wrap">
                    <input
                      type="text"
                      className="input-light"
                      placeholder="판매대리점명 입력"
                      value={stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName}
                      onChange={(e) => {
                        //setSaleStoreId(e.target.value)
                        setSaleStoreName(e.target.value)
                        setStuffSearch({ ...stuffSearch, code: 'S', schSaleStoreName: e.target.value })
                      }}
                    />
                  </div>
                </td>
                <th>물건주소</th>
                <td>
                  <div className="input-wrap">
                    <input
                      type="text"
                      className="input-light"
                      placeholder="물건주소 입력"
                      value={stuffSearch?.schAddress ? stuffSearch.schAddress : address}
                      onChange={(e) => {
                        setAddress(e.target.value)
                        setStuffSearch({ ...stuffSearch, code: 'S', schAddress: e.target.value })
                      }}
                    />
                  </div>
                </td>
              </tr>
              <tr>
                <th>물건명</th>
                <td>
                  <div className="input-wrap">
                    <input
                      type="text"
                      className="input-light"
                      placeholder="물건명 입력"
                      value={stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName}
                      onChange={(e) => {
                        setobjectName(e.target.value)
                        setStuffSearch({ ...stuffSearch, code: 'S', schObjectName: e.target.value })
                      }}
                    />
                  </div>
                </td>
                <th>견적처</th>
                <td>
                  <div className="input-wrap">
                    <input
                      type="text"
                      className="input-light"
                      placeholder="견적처 입력"
                      value={stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName}
                      onChange={(e) => {
                        setDispCompanyName(e.target.value)
                        setStuffSearch({ ...stuffSearch, code: 'S', schDispCompanyName: e.target.value })
                      }}
                    />
                  </div>
                </td>
                <th>판매대리점 선택</th>
                <td>
                  {schSelSaleStoreList?.length > 0 && (
                    <Select
                      options={schSelSaleStoreList}
                      value={stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId}
                      labelField="saleStoreName"
                      valueField="saleStoreId"
                      searchBy="saleStoreName"
                      onChange={onSelectionChange}
                      clearable={true}
                      onClearAll={handleClear}
                      ref={ref}
                      disabled={sessionState?.storeLvl === '1' ? false : true}
                    ></Select>
                  )}
                </td>
              </tr>
              <tr>
                <th>담당자</th>
                <td>
                  <div className="input-wrap">
                    <input
                      type="text"
                      className="input-light"
                      placeholder="담당자 입력"
                      value={stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser}
                      onChange={(e) => {
                        setReceiveUser(e.target.value)
                        setStuffSearch({ ...stuffSearch, code: 'S', schReceiveUser: e.target.value })
                      }}
                    />
                  </div>
                </td>
                <th>기간검색</th>
                <td colSpan={3}>
                  <div className="form-flex-wrap">
                    <div className="radio-wrap mr10">
                      <div className="d-check-radio light mr10">
                        <input
                          type="radio"
                          name="radio_ptype"
                          id="radio_u"
                          checked={stuffSearch?.schDateType === 'U' ? true : false}
                          value={'U'}
                          onChange={(e) => {
                            setDateType(e.target.value)
                            setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
                          }}
                        />
                        <label htmlFor="radio_u">갱신일</label>
                      </div>
                      <div className="d-check-radio light">
                        <input
                          type="radio"
                          name="radio_ptype"
                          id="radio_r"
                          checked={stuffSearch?.schDateType === 'R' ? true : false}
                          value={'R'}
                          onChange={(e) => {
                            setDateType(e.target.value)
                            setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
                          }}
                        />
                        <label htmlFor="radio_r">등록일</label>
                      </div>
                    </div>
                    <div className="date-picker-wrap">
                      <div className="date-picker" style={{ flex: 1 }}>
                        <SingleDatePicker {...rangeDatePickerProps1} />
                      </div>
                      <span> ~ </span>
                      <div className="date-picker" style={{ flex: 1 }}>
                        <SingleDatePicker {...rangeDatePickerProps2} />
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      {/* 퍼블적용끝 */}
    </>
  )
}