components/Tables/UploadedFileTable.tsx

import { CSwitch } from '@coreui/react'
import { LoadingSpinner, RvTable } from '@Shared'
import { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { useCompareTable } from '../../hooks'
import { actionCreatorsProps, ActionTypes, speedLimitStates } from '../../types'

interface UploadedFileTableType {
  state: speedLimitStates
  actions: actionCreatorsProps
}

const UploadedFileTable = ({ state, actions }: UploadedFileTableType) => {
  const [fakeLoading, setFakeLoading] = useState(false)
  const [fakeLoadingChangeMode, setFakeLoadingChangeMode] = useState(false)

  const [isParseMode, setIsParseMode] = useState(false)

  const {
    TSODiffReport: { data: TSODiffReportData, loading: TSODiffReportLoading }
  } = useSelector((state: any) => state.portalData)
  const {
    ParseTsoFromDocument: {
      data: ParseTsoFromDocumentData,
      loading: ParseTsoFromDocumentLoading
    }
  } = useSelector((state: any) => state.portalData)

  const { fields, customCells } = useCompareTable(state, actions, isParseMode)
  const { actionType } = state

  useEffect(() => {
    if (actionType === ActionTypes.Compare && TSODiffReportData) {
      setFakeLoading(true)
      setTimeout(() => {
        setFakeLoading(false)
      }, 500)
    }
  }, [actionType])

  useEffect(() => {
    if (
      actionType === ActionTypes.Compare &&
      TSODiffReportData &&
      ParseTsoFromDocumentData
    ) {
      setFakeLoadingChangeMode(true)
      setTimeout(() => {
        setFakeLoadingChangeMode(false)
      }, 300)
    }
  }, [isParseMode])

  return TSODiffReportLoading || ParseTsoFromDocumentLoading || fakeLoading ? (
    <div className="flex flex-col items-center justify-center my-24">
      <LoadingSpinner classNames=" mb-4" />
      <span>Uploading, parsing and comparing file with current data . . .</span>
    </div>
  ) : (
    <div>
      <div className="text-center font-bold text-lg mb-2">
        <span>Uploaded File vs Current Data</span>
      </div>
      <div className="flex justify-between">
        <div className="flex items-center justify-between space-x-2 font-semibold mb-3">
          <div className="w-6 h-6 bg-[#bde4aa]"></div>
          <span className="text-gray-700">New</span>
          <div className="w-6 h-6 bg-[#ffaba2]"></div>
          <span className="text-gray-700">Removed</span>
          <div className="w-6 h-6 bg-[#E1E0BC]"></div>
          <span className="text-gray-700">Modified</span>
        </div>
        <div className="flex justify-center items-center gap-2">
          <label
            className="mb-0 font-semibold select-none"
            htmlFor="toggle-parse"
          >
            Parse Mode :
          </label>
          <CSwitch
            checked={isParseMode}
            size="lg"
            id="toggle-parse"
            shape="pill"
            color="primary"
            onChange={(event: any) => {
              setIsParseMode(event.target.checked)
            }}
          />
        </div>
      </div>
      {fakeLoadingChangeMode ? (
        <div className="my-24">
          <LoadingSpinner classNames=" mb-4" />
        </div>
      ) : (
        <div className="mb-6 border">
          <table className="w-full ">
            <thead>
              <tr>
                {fields.map(field => (
                  <th
                    key={field.key}
                    className="bg-white w-full h-12 text-black text-center p-[12px]"
                    style={{ width: field._style.width }}
                  >
                    <span>{field.label}</span>
                  </th>
                ))}
              </tr>
            </thead>
          </table>
          <div className="max-h-[340px] overflow-y-auto custom-scrollbar">
            <RvTable
              className="mb-0"
              items={isParseMode ? ParseTsoFromDocumentData : TSODiffReportData}
              itemsPerPage={
                isParseMode
                  ? ParseTsoFromDocumentData?.length
                  : TSODiffReportData?.length
              }
              itemsPerPageSelect={false}
              fields={fields}
              sorter={false}
              striped={false}
              pagination={false}
              clickableRows
              customizedCells={customCells}
              sorterValue={undefined}
            />
          </div>
        </div>
      )}
    </div>
  )
}
export default UploadedFileTable