import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
import { useState } from 'react'

export default function LinePropertySetting(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
  const { id, pos = contextPopupPosition } = props
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
  const properties = [
    { name: getMessage('eaves.line'), value: 'eaves' },
    { name: getMessage('ridge'), value: 'ridge' },
    { name: getMessage('oneside.flow.ridge'), value: 'onesideFlowRidge' },
    { name: getMessage('gable'), value: 'gable' },
    { name: getMessage('gable.left'), value: 'gableLeft' },
    { name: getMessage('gable.right'), value: 'gableRight' },
    { name: getMessage('yosemune'), value: 'yosemune' },
    { name: getMessage('valley'), value: 'valley' },
    { name: getMessage('l.abandon.valley'), value: 'lAbandonValley' },
    { name: getMessage('mansard'), value: 'mansard' },
    { name: getMessage('wall.merge'), value: 'wallCollection' },
    { name: getMessage('wall.merge.type'), value: 'wallCollectionType' },
    { name: getMessage('wall.merge.flow'), value: 'wallCollectionFlow' },
    { name: getMessage('wall.merge.flow.left'), value: 'wallCollectionFlowLeft' },
    { name: getMessage('wall.merge.flow.right'), value: 'wallCollectionFlowRight' },
    { name: getMessage('no.setting'), value: 'noSetting' },
  ]
  const [selectedProperty, setSelectedProperty] = useState(null)
  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap r mount`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('contextmenu.line.property.edit')} </h1>
          <button className="modal-close" onClick={() => closePopup(id)}>
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="guide">
            <span className="mb10">{getMessage('modal.line.property.edit.info')}</span>
            <span>
              {getMessage('modal.line.property.edit.selected')} [ {selectedProperty?.name} ]
            </span>
          </div>
          <div className="properties-setting-wrap outer">
            <div className="setting-tit">{getMessage('setting')}</div>
            <div className="outline-wrap">
              <div className="radio-grid-wrap">
                {properties.map((property, index) => {
                  return (
                    <div className="d-check-radio pop" key={index}>
                      <input
                        type="radio"
                        name="radio01"
                        id={'ra' + (index + 1 >= 10 ? index + 1 : `0${index + 1}`)}
                        onChange={(e) => setSelectedProperty(property)}
                      />
                      <label htmlFor={'ra' + (index + 1 > 10 ? index + 1 : `0${index + 1}`)}>{property.name}</label>
                    </div>
                  )
                })}
              </div>
            </div>
          </div>
          <div className="grid-btn-wrap">
            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}