import React, { useEffect } from 'react'
import { popSpinnerState, promisePopupState } from '@/store/popupAtom'
import { useRecoilState } from 'recoil'
import WithDraggable from '../common/draggable/WithDraggable'
import { useMessage } from '@/hooks/useMessage'

export default function PromisePopup() {
  const { getMessage } = useMessage()
  const [promisePopupStore, setPromisePopupStore] = useRecoilState(promisePopupState)
  const [popSpinnerStore, setPopSpinnerStore] = useRecoilState(popSpinnerState)

  const handleSpinner = () => {
    setPopSpinnerStore(true)
    setTimeout(() => {
      setPopSpinnerStore(false)
    }, 1000)
  }

  return (
    <WithDraggable isShow={promisePopupStore} pos={{ x: 1000, y: 200 }} className="r">
      <WithDraggable.Header title={'popup promise test'} onClose={() => setPromisePopupStore(false)} />

      <WithDraggable.Body>
        <div className="img-flex-box">
          <span className="normal-font mr10">{getMessage('modal.image.load.size.rotate')}</span>
          <label className="toggle-btn">
            <input type="checkbox" checked={true} value="1" />
            <span className="slider"></span>
          </label>
        </div>
        <div className="img-load-from">
          <div className="img-load-item">
            <div className="d-check-radio pop">
              <input type="radio" name="radio03" id="ra06" value={'1'} />
              <label htmlFor="ra06">{getMessage('common.input.file')}</label>
            </div>
            <div className="img-flex-box">
              <div className="img-edit-wrap">
                <label className="img-edit-btn" htmlFor="img_file">
                  <span className="img-edit"></span>
                  {getMessage('common.load')}
                </label>
                <input type="file" id="img_file" style={{ display: 'none' }} />
              </div>
              <div className="img-name-wrap">
                <input type="text" className="input-origin al-l" value={'test'} readOnly />
              </div>
            </div>
          </div>
          <div className="img-load-item">
            <div className="d-check-radio pop">
              <input type="radio" name="radio03" id="ra07" value={'2'} />
              <label htmlFor="ra07">{getMessage('common.input.address.load')}</label>
            </div>
            <div className="img-flex-box for-address">
              <input type="text" className="input-origin al-l mr10" placeholder={'住所入力'} value={'test'} />
              <div className="img-edit-wrap">
                <button className={`img-edit-btn`}>{getMessage('common.finish')}</button>
              </div>
            </div>
          </div>
        </div>
        <div className="grid-btn-wrap">
          <button className="btn-frame modal act" onClick={handleSpinner}>
            {getMessage('common.finish')}
          </button>
        </div>
      </WithDraggable.Body>
    </WithDraggable>
  )
}