'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 { useRecoilValue, useResetRecoilState } from 'recoil'
import { useModule } from '@/hooks/module/useModule'
import { useEavesGableEdit } from '@/hooks/roofcover/useEavesGableEdit'

export default function PanelBatchStatistics() {
  const { getMessage } = useMessage()
  const [isFold, setIsFold] = useState(false)
  const [pos, setPos] = useState({
    x: 0,
    y: 30,
  })
  const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
  const { setModuleStatisticsData } = useModule()

  useEffect(() => {
    setModuleStatisticsData()
  }, [])

  return (
    <WithDraggable isShow={true} handle=".penal-wrap" pos={pos}>
      <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}`}>
                      {typeof row[item.prop] === 'number' ? row[item.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 }) : row[item.prop]}
                    </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>
    </WithDraggable>
  )
}