SpeedLimitSection/hooks/useUpdateReviewTable.tsx

import React, { useMemo } from 'react'
import { useSelector } from 'react-redux'
import { speedLimitItemType, StatusTypes, StatusUpdate } from '../types'
import { LoadingSpinner } from '@Shared'
import { Icons } from '@Assets/icons/Icons'

const useUpdateReviewTable = () => {
  const lang = useSelector((state: any) => state.language)

  const customFields = useMemo(() => {
    const fields = [
      {
        key: 'type',
        label: 'Type',
        _style: {
          background: 'white',
          textAlign: 'center',
          display: 'none',
          verticalAlign: 'middle'
        }
      },
      {
        key: 'data',
        label: 'data',
        _style: {
          background: 'white',
          textAlign: 'center',
          display: 'none'
        }
      },
      {
        key: 'status_update',
        label: 'Status update',
        _style: {
          background: 'white',
          textAlign: 'center',
          display: 'none'
        }
      }
    ]

    return fields
  }, [lang])

  const renderCustomCells = () => {
    const renderType = (status: StatusTypes) => {
      switch (status) {
        case StatusTypes.NewAdded:
          return (
            <span className="text-sm text-green-400 font-semibold">Added</span>
          )
        case StatusTypes.Edited:
          return (
            <span className="text-sm text-yellow-500 font-semibold">
              Modified
            </span>
          )
        case StatusTypes.Delete:
          return (
            <span className="text-sm text-red-400 font-semibold">Deleted</span>
          )
      }
    }

    return {
      type: (item: speedLimitItemType, index: number) => {
        return (
          <td className={`p-0 text-center w-[15%] align-middle border-none`}>
            {renderType(item?.status!)}
          </td>
        )
      },
      data: (item: speedLimitItemType, index: number) => {
        return (
          <td className={` p-0 text-center w-[70%] align-middle border-none`}>
            <div className="flex items-center justify-center gap-2 my-2">
              <span>{item.type}</span>
              <span>|</span>
              <span>
                {item?.new_subdivision &&
                item.new_subdivision != item?.subdivision ? (
                  <>
                    <span className="line-through">{item?.subdivision}</span>
                    <span className="font-bold"> → {item.new_subdivision}</span>
                  </>
                ) : (
                  item?.subdivision
                )}
              </span>
              <span>|</span>
              <span>
                {item?.new_speed_limit_mph &&
                Number(item?.new_speed_limit_mph) !==
                  Number(item?.speed_limit_mph) ? (
                  <>
                    <span className="line-through">
                      {item?.speed_limit_mph}
                    </span>
                    <span className="font-bold">
                      → {item?.new_speed_limit_mph}
                    </span>{' '}
                    mph
                  </>
                ) : (
                  <span> {item?.speed_limit_mph} mph</span>
                )}
              </span>
              <span>|</span>
              <span>
                From{' '}
                {item?.new_start_mile &&
                item?.new_start_mile != item?.start_mile ? (
                  <>
                    <span className="line-through">{item?.start_mile}</span>
                    <span className="font-bold">→ {item?.new_start_mile}</span>
                  </>
                ) : (
                  item?.start_mile
                )}
              </span>
              <span>
                to{' '}
                {item?.new_end_mile && item?.new_end_mile != item?.end_mile ? (
                  <>
                    <span className="line-through">{item?.end_mile}</span>
                    <span className="font-bold">→ {item?.new_end_mile}</span>
                  </>
                ) : (
                  item?.end_mile
                )}
              </span>
            </div>
          </td>
        )
      },
      status_update: (item: speedLimitItemType, index: number) => {
        const renderContent = () => {
          switch (item?.statusUpdate) {
            case StatusUpdate.Success:
              return <Icons.Success width={20} height={20} />
            case StatusUpdate.Failure:
              return <Icons.Error width={20} height={20} />
            case StatusUpdate.Loading:
              return <LoadingSpinner height={25} width={25} />

            default:
              return <></>
          }
        }
        return (
          <td className="w-15% align-middle text-center border-none py-1">
            {renderContent()}
          </td>
        )
      }
    }
  }
  return {
    fields: customFields,
    customCells: renderCustomCells()
  }
}

export default useUpdateReviewTable