'use client'
import { useEffect, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
export default function ProductFeaturesPop({ popShowSpecialNoteList, showProductFeatureData, setProductFeaturesPopupOpen }) {
  const [showSpecialNoteList, setShowSpecialNoteList] = useState([])
  const { getMessage } = useMessage()

  useEffect(() => {
    let pushData = []
    popShowSpecialNoteList.forEach((row) => {
      let option = showProductFeatureData.split('、')
      option.forEach((row2) => {
        if (row.code === row2) {
          pushData.push(row)
        }
      })
    })
    setShowSpecialNoteList(pushData)
  }, [popShowSpecialNoteList, showProductFeatureData])

  return (
    <div className="modal-popup">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <h1 className="title">{getMessage('estimate.detail.productFeaturesPopup.title')}</h1>
            <button
              type="button"
              className="modal-close"
              onClick={() => {
                setProductFeaturesPopupOpen(false)
              }}
            >
              {getMessage('estimate.detail.productFeaturesPopup.close')}
            </button>
          </div>
          <div className="modal-body">
            <div className="modal-body-inner border">
              <div className="calculation-estimate usemodal">
                {showSpecialNoteList.length > 0 &&
                  showSpecialNoteList.map((row) => {
                    return (
                      <dl key={row.code}>
                        <dt>{row.codeNm}</dt>
                        <dd dangerouslySetInnerHTML={{ __html: row.remarks }} style={{ whiteSpace: 'pre-wrap' }}></dd>
                      </dl>
                    )
                  })}
              </div>
            </div>
            <div className="footer-btn-wrap">
              <button
                type="button"
                className="btn-origin navy"
                onClick={() => {
                  setProductFeaturesPopupOpen(false)
                }}
              >
                {getMessage('estimate.detail.productFeaturesPopup.close')}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}