'use client'

import { useEffect, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
import { useModule } from '@/hooks/module/useModule'
import { useEavesGableEdit } from '@/hooks/roofcover/useEavesGableEdit'
import { canvasState } from '@/store/canvasAtom'
import { POLYGON_TYPE } from '@/common/common'
import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
import Draggable from 'react-draggable'

export default function PanelBatchStatistics() {
  const { getMessage } = useMessage()
  const [isFold, setIsFold] = useState(false)
  const canvas = useRecoilValue(canvasState)
  const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
  const { setModuleStatisticsData } = useCircuitTrestle(true)
  const [moduleSelectionDataStore, setModuleSelectionDataStore] = useRecoilState(moduleSelectionDataState)
  const [position, setPosition] = useState({
    x: 0,
    y: 30,
  })

  const handleOnDrag = (e, data) => {
    e.stopPropagation()
    setPosition({ x: data.x, y: data.y })
  }

  useEffect(() => {
    if (moduleSelectionDataStore && moduleSelectionDataStore.module) setModuleStatisticsData()
  }, [])

  return (
    <Draggable position={{ x: position.x, y: position.y }} onDrag={(e, data) => handleOnDrag(e, data)} handle=".penal-wrap">
      <div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
        <h2>{getMessage('modal.panel.batch.statistic')}</h2>
        <button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
        <div className="penal-table-wrap">
          <table className="penal-table">
            <thead>
              <tr>
                {header.map((item, index) => (
                  <th key={`statistic-hd-${index}`}>{item.name}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((row, index) => (
                <tr key={`statistic-row-${index}`}>
                  {header.map((item, i) => (
                    <td key={`statistic-col-${i}`}>{row[item.prop] ?? 0}</td>
                  ))}
                </tr>
              ))}
              <tr>
                {header.map((header, index) => (
                  <td key={`statistic-ft-${index}`}>
                    {typeof footer[header.prop] === 'number'
                      ? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 })
                      : footer[header.prop]}
                  </td>
                ))}
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </Draggable>
  )
}
