SpeedLimitSection\index.tsx

import { Icons } from '@Assets/icons/Icons'
import { useSpeedLimitStore } from '@Contexts'
import { useSearchParams } from '@Hooks'
import { LoadingSpinner, RvTable } from '@Shared'
import { CButton } from '@coreui/react'
import { useCallback, useEffect, useState } from 'react'

import { useDispatch, useSelector } from 'react-redux'
import PopupModel from './components/PopupModel'
import SpeedLimitFiller from './components/SpeedLimitFiller'
import { useSpeedLimitFilter, useSpeedLimitReviewTable } from './hooks'
import { useSpeedLimitReducer } from './reducer'
import { ActionTypes, speedLimitItemType } from './types'

import {
  fetchSpeedLimitsDataByRouteId,
  fetchTrackCoordinatesByRouteId
} from '@Redux/slices/portalDataSlice'
import SpeedLimitMap from './components/SpeedLimitProfile/Map'

const SpeedLimitSection = () => {
  const [fakeLoading, setFakeLoading] = useState(false)
  const [isFirstLoad, setIsFirstLoad] = useState(true)

  const dispatch = useDispatch()
  const searchParams = useSearchParams()
  const {
    data: { railroadId }
  } = useSelector((state: any) => state.userInfo)

  const {
    addNewTSOSpeedLimit: { loading: addTSOLoading }
  } = useSelector((state: any) => state.portalAction)

  const {
    editTSOSpeedLimitById: { loading: editTSOLoading }
  } = useSelector((state: any) => state.portalAction)

  const {
    deleteTSOSpeedLimitById: { loading: deleteTSOSpeedLimitByIdLoading }
  } = useSelector((state: any) => state.portalAction)

  const speedLimitStore = useSpeedLimitStore

  const speedLimitData = useSpeedLimitStore.use.speedLimits()

  const fetchData = useSpeedLimitStore.use.fetchData()
  const addNewTSOSpeedLimit = useSpeedLimitStore.use.addNewTSOSpeedLimit()
  const editTSOSpeedLimit = useSpeedLimitStore.use.editTSOSpeedLimit()
  const deleteTSOSpeedLimit = useSpeedLimitStore.use.deleteTSOSpeedLimit()

  const [state, actions] = useSpeedLimitReducer()
  const { routes } = useSpeedLimitFilter(state, actions)
  const { fields, customCells, data, loading } = useSpeedLimitReviewTable(
    state,
    actions
  )
  const {
    type,
    actionType,
    page,
    routeId,
    isDeleteModal,
    temporarySpeedLimitIdDelete,
    errorModal,
    isAddModal,
    isEditModal,
    addSpeedLimitData,
    editSpeedLimitData
  } = state

  const handleAddSpeedLimit = () => {
    addNewTSOSpeedLimit(addSpeedLimitData)
    actions.onChangeIsOpenModalAdd(false)
  }

  const handleEditSpeedLimit = () => {
    editTSOSpeedLimit(editSpeedLimitData)
    actions.onChangeIsOpenModalEdit(false)
  }

  const handleDeleteSpeedLimit = () => {
    const payload = {
      temporarySpeedLimitIdDelete,
      onSuccess: () => {
        const routeIdParam = searchParams.getSearchParam('route-id')
        const directionParam = searchParams.getSearchParam('direction')
        const endDestinationId = routeIdParam
          ?.split('_')
          .filter(item => item !== directionParam)
        actions.onSelectedDeleteItem(null)
        actions.onChangeIsOpenModalDelete(false)
        if (routeIdParam) {
          dispatch(
            fetchSpeedLimitsDataByRouteId({
              routeId: routeIdParam,
              railroadId: railroadId,
              startDestinationId: directionParam!,
              endDestinationId: endDestinationId![0]
            })
          )
          dispatch(
            fetchTrackCoordinatesByRouteId({
              routeId: routeIdParam,
              railroadId: railroadId,
              startDestinationId: directionParam!,
              endDestinationId: endDestinationId![0]
            })
          )
        }
        actions.onChangeActionType(ActionTypes.View)
      },
      onFailure: (error: string) => {
        actions.onIsOpenError(error)
        actions.onChangeIsOpenModalDelete(false)
      }
    }
    deleteTSOSpeedLimit(payload)
  }

  const showData = useCallback(() => {
    const typeArr = type?.split(',')
    const updateSpeedLimits =
      data?.filter(
        (speedLimit: speedLimitItemType) =>
          typeArr.includes(speedLimit?.type!) || type === ''
      ) || []
    speedLimitStore.setState({ speedLimits: updateSpeedLimits })
    setFakeLoading(true)
    setTimeout(() => {
      setFakeLoading(false)
    }, 300)
  }, [data, type])

  const onChangePage = useCallback(
    (e: any) => {
      if (!isFirstLoad) {
        setTimeout(() => {
          actions.onChangePage(e.toString())
        }, 20)
      }
    },
    [isFirstLoad]
  )

  const handleRowClick = (item: speedLimitItemType, index: number) => {}

  useEffect(() => {
    const pageParam = searchParams.getSearchParam('page')
    pageParam && actions.onChangePage(pageParam)
    if (data && isFirstLoad) {
      setTimeout(() => {
        setIsFirstLoad(false)
      }, 500)
    }

    // if (data && !isFirstLoad ) {
    //   setTimeout(() => {
    //     actions.onChangePage('')
    //   }, 100)
    // }
  }, [data])

  useEffect(() => {
    data && showData()
    actions.onChangeActionType(ActionTypes.View)
  }, [data, type])
  useEffect(() => {
    const page = searchParams.getSearchParam('page')
    if (actionType === ActionTypes.Add && data) {
      // onChangePage(1)
      actions.onChangePage('')
      searchParams.delSearchParam('page')
      const newSpeedLimitData = [{}, ...(speedLimitData ?? [])]
      speedLimitStore.setState({ speedLimits: newSpeedLimitData })
      if (page && page !== '1') {
        setFakeLoading(true)
        setTimeout(() => {
          setFakeLoading(false)
        }, 100)
      }
    }
  }, [actionType])

  return (
    <div id="rv-portal">
      <h4>Speed limit</h4>
      <SpeedLimitFiller state={state} actions={actions} />

      {loading ? (
        <LoadingSpinner classNames="my-5" />
      ) : fakeLoading ? (
        <LoadingSpinner classNames="my-5" />
      ) : (
        <RvTable
          items={speedLimitData}
          fields={fields}
          itemsPerPage={5}
          sorter={false}
          striped={false}
          onRowClick={(item, index) => {
            handleRowClick(item, index)
          }}
          customizedCells={customCells}
          sorterValue={undefined}
          onPageChange={onChangePage}
          activePage={parseInt(state.page) ?? 1}
        />
      )}

      <SpeedLimitMap />

      <PopupModel isOpen={isDeleteModal}>
        <div className="flex flex-col gap-2  px-4 py-4">
          <div className="flex gap-2 justify-start">
            <Icons.Warning className="w-[42px] h-[42px]" />
            <div>
              <div className=" mb-1">
                <span className="font-medium text-2xl ">
                  Delete Speed Limit
                </span>
              </div>
              <div>
                <span className="w-full font-normal text-[16px]">
                  Are you sure you want to delete this speed limit
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="flex justify-end gap-2 px-4 pb-4">
          <CButton
            color="secondary"
            onClick={() => {
              actions.onChangeIsOpenModalDelete(false)
              actions.onSelectedDeleteItem(null)
            }}
          >
            Cancel
          </CButton>
          <CButton
            color="danger"
            disabled={deleteTSOSpeedLimitByIdLoading}
            onClick={handleDeleteSpeedLimit}
          >
            <div className="flex justify-center items-center gap-2">
              {deleteTSOSpeedLimitByIdLoading && (
                <LoadingSpinner width={20} height={20} color="white" />
              )}
              Delete
            </div>
          </CButton>
        </div>
      </PopupModel>

      <PopupModel isOpen={!!errorModal}>
        <div className="flex flex-col gap-2  px-4 py-4">
          <div className="flex gap-2 justify-start">
            <div>
              <div className=" flex justify-start items-center gap-2 mb-1">
                <Icons.Error className="w-[42px] h-[42px]" />
                <span className="font-medium text-2xl ">Error</span>
              </div>
              <div>
                <span className="w-full font-normal text-[16px]">
                  {errorModal}
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="flex justify-end gap-2 px-4 pb-4">
          <CButton
            color="secondary"
            onClick={() => {
              actions.onIsOpenError('')
            }}
          >
            Close
          </CButton>
        </div>
      </PopupModel>

      <PopupModel isOpen={isAddModal}>
        <div className="flex flex-col gap-2  px-4 py-4">
          <div className="flex gap-3 justify-start">
            <div>
              <div className=" mb-1">
                <span className="font-medium text-xl ">
                  Are you sure you want to add this speed limit ?
                </span>
              </div>
              <div>
                <span className="w-full font-normal text-[16px]">
                  <span className="font-semibold text-lg">Limit</span>:{' '}
                  {addSpeedLimitData?.limit} {' (mph) '}from{' '}
                  {addSpeedLimitData?.startMilepost} to{' '}
                  {addSpeedLimitData?.endMilepost} at Subdivision{' '}
                  {addSpeedLimitData?.subdivision}
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="flex justify-end gap-2 px-4 pb-4">
          <CButton
            color="success"
            className={'px-[15px]'}
            disabled={addTSOLoading}
            onClick={handleAddSpeedLimit}
          >
            <div className="flex justify-center items-center gap-2">YES</div>
          </CButton>
          <CButton
            className={'px-3'}
            color="secondary"
            onClick={() => {
              actions.onChangeIsOpenModalAdd(false)
              actions.onChangeAddSpeedLimitData(null)
            }}
          >
            NO
          </CButton>
        </div>
      </PopupModel>

      <PopupModel isOpen={isEditModal}>
        <div className="flex flex-col gap-2  px-4 py-4">
          <div className="flex gap-3 justify-start">
            {/* <Icons.Warning className="w-[42px] h-[42px]" /> */}
            <div>
              <div className=" mb-1">
                <span className="font-medium text-xl ">
                  Are you sure you want to update this speed limit to:
                </span>
              </div>
              <div>
                <span className="w-full font-normal text-[16px]">
                  <span className="font-semibold text-lg">Limit</span>:{' '}
                  {editSpeedLimitData?.limit} {' (mph) '}from{' '}
                  {editSpeedLimitData?.startMilepost} to{' '}
                  {editSpeedLimitData?.endMilepost} at Subdivision{' '}
                  {editSpeedLimitData?.subdivision}
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="flex justify-end gap-2 px-4 pb-4">
          <CButton
            color="success"
            className={'px-[15px]'}
            disabled={editTSOLoading}
            onClick={handleEditSpeedLimit}
          >
            <div className="flex justify-center items-center gap-2">YES</div>
          </CButton>
          <CButton
            className={'px-3'}
            color="secondary"
            onClick={() => {
              actions.onChangeIsOpenModalEdit(false)
              actions.onChangeEditSpeedLimitData(null)
            }}
          >
            NO
          </CButton>
        </div>
      </PopupModel>
    </div>
  )
}

export default SpeedLimitSection