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

export default function RowRemove(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
  const { id, pos = contextPopupPosition, apply } = props
  const { closePopup } = usePopup()
  const [selectedType, setSelectedType] = useState(MODULE_REMOVE_TYPE.TOP)
  const { getMessage } = useMessage()
  const { moduleRowRemove } = useModule()
  const types = [
    { name: getMessage('modal.row.remove.type.up'), value: MODULE_REMOVE_TYPE.TOP },
    { name: getMessage('modal.row.remove.type.down'), value: MODULE_REMOVE_TYPE.BOTTOM },
    { name: getMessage('modal.row.remove.type.side'), value: MODULE_REMOVE_TYPE.VERTICAL_SIDE },
    { name: getMessage('modal.row.remove.type.none'), value: MODULE_REMOVE_TYPE.NONE },
  ]
  const handleApply = () => {
    // if (apply) apply()
    moduleRowRemove(selectedType)
    closePopup(id)
  }

  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap r mount`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.row.remove')}</h1>
          <button className="modal-close" onClick={() => closePopup(id)}>
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="properties-setting-wrap">
            <div className="setting-tit">{getMessage('modal.row.remove.info')}</div>
            <div className="additional-wrap">
              <div className="additional-radio-wrap">
                {types.map((type, index) => {
                  return (
                    <div className="d-check-radio pop" key={index}>
                      <input
                        type="radio"
                        name="radio01"
                        id={`ra0${index + 1}`}
                        onClick={(e) => setSelectedType(e.target.value)}
                        value={type.value}
                        checked={selectedType === type.value}
                      />
                      <label htmlFor={`ra0${index + 1}`}>{type.name}</label>
                    </div>
                  )
                })}
              </div>
              <div className="additional-img-wrap">
                {selectedType === MODULE_REMOVE_TYPE.TOP && (
                  <Image
                    src="/static/images/canvas/additional_bundle-del01.svg"
                    alt="react"
                    width={0}
                    height={0}
                    style={{ width: 'auto', height: 'auto' }}
                  />
                )}
                {selectedType === MODULE_REMOVE_TYPE.BOTTOM && (
                  <Image
                    src="/static/images/canvas/additional_bundle-del02.svg"
                    alt="react"
                    width={0}
                    height={0}
                    style={{ width: 'auto', height: 'auto' }}
                  />
                )}
                {selectedType === MODULE_REMOVE_TYPE.VERTICAL_SIDE && (
                  <Image
                    src="/static/images/canvas/additional_bundle-del03.svg"
                    alt="react"
                    width={0}
                    height={0}
                    style={{ width: 'auto', height: 'auto' }}
                  />
                )}
                {selectedType === MODULE_REMOVE_TYPE.NONE && (
                  <Image
                    src="/static/images/canvas/additional_bundle-del04.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.row')}</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>
        </div>
      </div>
    </WithDraggable>
  )
}