widgets/TSODiffSection/hooks/useTSODiffTable.tsx

import { getTranslation } from '@Translations'
import { useMemo } from 'react'
import { useSelector } from 'react-redux'
import { speedLimitItemType } from '../types'
import { data } from '../mock'

const useTSODiffTable = () => {
  const lang = useSelector((state: any) => state.language)
  const deletedIndex = data.deleted
  const addIndex = data.added

  const customFields = useMemo(() => {
    const fields = [
      {
        key: 'subdivision',
        label: 'subdivision',
        _style: {
          background: 'white',
          textAlign: 'center',
          width: '25%'
        }
      },
      {
        key: 'speed_limit_mph',
        label: 'speed_limit_mph',
        _style: {
          background: 'white',
          textAlign: 'center',
          width: '15%'
        }
      },
      {
        key: 'start_milepost',
        label: 'start_milepost',
        _style: {
          background: 'white',
          textAlign: 'center',
          width: '20%'
        }
      },
      {
        key: 'end_milepost',
        label: 'end_milepost',
        _style: {
          background: 'white',
          textAlign: 'center',
          width: '20%'
        }
      }
    ]

    return fields
  }, [lang])

  const renderOriginalCells = () => {
    return {
      subdivision: (item: speedLimitItemType, index: number) => {
        return (
          <td
            className={`text-center ${
              deletedIndex.includes(index) ? 'bg-red-300' : ''
            } `}
          >
            {item?.subdivision}
          </td>
        )
      },
      speed_limit_mph: (item: speedLimitItemType, index: number) => {
        return (
          <td
            className={`text-center ${
              deletedIndex.includes(index) ? 'bg-red-300' : ''
            } `}
          >
            {item.speed_limit_mph}
          </td>
        )
      },
      start_milepost: (item: speedLimitItemType, index: number) => {
        return (
          <td
            className={` ${deletedIndex.includes(index) ? 'bg-red-300' : ''}`}
          >
            <div className="flex justify-evenly gap-2  ">
              <p className="m-0 h-fit">{item?.start_milepost?.toFixed(2)}</p>
            </div>
          </td>
        )
      },
      end_milepost: (item: speedLimitItemType, index: number) => {
        return (
          <td
            className={` ${deletedIndex.includes(index) ? 'bg-red-300' : ''}`}
          >
            <div className="flex justify-evenly gap-2 ">
              <p className="m-0 h-fit">{item?.end_milepost?.toFixed(2)}</p>
            </div>
          </td>
        )
      }
    }
  }
  const renderNewCells = () => {
    return {
      subdivision: (item: speedLimitItemType, index: number) => {
        return (
          <td
            className={`text-center ${
              addIndex.includes(index) ? 'bg-green-300' : ''
            } `}
          >
            {item?.subdivision}
          </td>
        )
      },
      speed_limit_mph: (item: speedLimitItemType, index: number) => {
        return (
          <td
            className={`text-center ${
              addIndex.includes(index) ? 'bg-green-300' : ''
            } `}
          >
            {item.speed_limit_mph}
          </td>
        )
      },
      start_milepost: (item: speedLimitItemType, index: number) => {
        return (
          <td className={` ${addIndex.includes(index) ? 'bg-green-300' : ''}`}>
            <div className="flex justify-evenly gap-2  ">
              <p className="m-0 h-fit">{item?.start_milepost?.toFixed(2)}</p>
            </div>
          </td>
        )
      },
      end_milepost: (item: speedLimitItemType, index: number) => {
        return (
          <td className={` ${addIndex.includes(index) ? 'bg-green-300' : ''}`}>
            <div className="flex justify-evenly gap-2 ">
              <p className="m-0 h-fit">{item?.end_milepost?.toFixed(2)}</p>
            </div>
          </td>
        )
      }
    }
  }

  return {
    fields: customFields,
    originalCells: renderOriginalCells(),
    newCells: renderNewCells()
  }
}

export default useTSODiffTable