import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
import { useState } from 'react'
import Image from 'next/image'
import { MODULE_INSERT_TYPE, useModule } from '@/hooks/module/useModule'

export default function ColumnInsert(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
  const { id, pos = contextPopupPosition, apply } = props
  const { closePopup } = usePopup()
  const [selectedType, setSelectedType] = useState(MODULE_INSERT_TYPE.LEFT)
  const { getMessage } = useMessage()
  const { moduleColumnInsert } = useModule()
  const handleApply = () => {
    moduleColumnInsert(selectedType)
    closePopup(id)
  }

  const handleRadioChange = (e) => {
    setSelectedType(e.target.value)
  }

  return (
    <WithDraggable isShow={true} pos={pos} className="r">
      <WithDraggable.Header title={getMessage('modal.panel.column.insert')} onClose={() => closePopup(id)} />
      <WithDraggable.Body>
        <div className="properties-setting-wrap">
          <div className="setting-tit">{getMessage('modal.panel.column.insert.info')}</div>
          <div className="additional-wrap">
            <div className="additional-radio-wrap">
              <div className="d-check-radio pop">
                <input
                  type="radio"
                  name="radio01"
                  id="ra01"
                  onChange={handleRadioChange}
                  value={MODULE_INSERT_TYPE.LEFT}
                  checked={selectedType === MODULE_INSERT_TYPE.LEFT}
                />
                <label htmlFor="ra01">{getMessage('modal.panel.column.insert.type.left')}</label>
              </div>
              <div className="d-check-radio pop">
                <input
                  type="radio"
                  name="radio01"
                  id="ra02"
                  onChange={handleRadioChange}
                  value={MODULE_INSERT_TYPE.RIGHT}
                  checked={selectedType === MODULE_INSERT_TYPE.RIGHT}
                />
                <label htmlFor="ra02">{getMessage('modal.panel.column.insert.type.right')}</label>
              </div>
            </div>
            <div className="additional-img-wrap">
              {selectedType === MODULE_INSERT_TYPE.LEFT && (
                <Image src="/static/images/canvas/additional-edit01.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
              )}
              {selectedType === MODULE_INSERT_TYPE.RIGHT && (
                <Image src="/static/images/canvas/additional-edit02.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
              )}
            </div>
          </div>
        </div>
        <div className="properties-setting-wrap">
          <div className="setting-tit">{getMessage('legend')}</div>
          <div className="module-table-box">
            <div className="module-table-inner">
              <div className="additional-color-wrap">
                <div className="additional-color-box">
                  <span className="additional-color pink"></span>
                  <span className="normal-font">{getMessage('modal.panel.select.column')}</span>
                </div>
                <div className="additional-color-box">
                  <span className="additional-color white"></span>
                  <span className="normal-font">{getMessage('modal.panel.insert.column')}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="grid-btn-wrap">
          <button className="btn-frame modal act" onClick={handleApply}>
            {getMessage('modal.common.save')}
          </button>
        </div>
      </WithDraggable.Body>
    </WithDraggable>
  )
}