Untitled

import React, { memo,  useState } from 'react'
import { useToast } from '@abyss/web/hooks/useToast'
import SubmittedFilesDataTable from './DataTableForSubmittedFiles/SubmittedFilesDataTable'
import { fetchDataGrid } from './DataTableForSubmittedFiles/DataTableServices'
import { SubmittedTileDataType } from '../SubmittedFilesDataModel'
import { apisForTileView } from './TileAPIMappings'
import RemittanceTiles from './SubmittedFilesTilesUtils/RemittanceTiles'
import AttachmentTiles from './SubmittedFilesTilesUtils/AttachmentTiles'
import AllTiles from './SubmittedFilesTilesUtils/AllTiles'
import { Button } from '@abyss/web/ui/Button'
import { Divider } from '@abyss/web/ui/Divider'
import { styled } from '@abyss/web/tools/styled'

interface DashboardTileProps {
  tilesData: SubmittedTileDataType
  transactionType: string
  submitterType: string
  tenantId: string
  startDate: string
  endDate: string
  fetchDataForEDI: () => void
  tilesVisible: boolean
  setTilesVisible: (value: boolean) => void
}

const TableHeaderButtons = styled('div', {
  display: 'flex',
  justifyContent: 'space-between'
})

const SubmittedFilesTiles = memo(
  ({ tilesData, transactionType, submitterType, tenantId, startDate, endDate, fetchDataForEDI, tilesVisible, setTilesVisible }: DashboardTileProps) => {
    const [jsonArray, setJsonArray] = useState([])
    const [curHeaderName, setCurHeaderName] = useState('')
    const { toast } = useToast()

    const hideTilesAndShowDT = async (header_val) => {
      setCurHeaderName(header_val)
      const reqBody = {
        tenantId: tenantId,
        startDate: startDate.replaceAll('/', '-'),
        endDate: endDate.replaceAll('/', '-'),
        transactionType: transactionType,
        submitterType: submitterType
      }
      await displayTilesRecords(header_val, reqBody)
    }

    const displayTilesRecords = async (curHeaderName, reqBody) => {
      const apiName = apisForTileView[curHeaderName]
      await fetchDataGrid(apiName, reqBody)
        .then((response) => {
          setJsonArray(response.data)
          setTilesVisible(false)
        })
        .catch(() => {
          setTilesVisible(false)
          toast.show({
            title: 'Internal Server Error',
            message: 'This request could not be completed currently due to some internal server error. Please try again later.',
            autoClose: false
          })
        })
    }

    const getTileValue = (tileName: string) => {
      return '-' != tilesData[tileName] ? tilesData[tileName] : 'loading'
    }

    return (
      <>
        {tilesVisible && renderTilesForTransactionType({ transactionType, getTileValue, hideTilesAndShowDT, submitterType })}

        {!tilesVisible && (
          <>
            <TableHeaderButtons>
              <Button
                onClick={() => {
                  setTilesVisible(true)
                  fetchDataForEDI()
                }}
              >
                Go Back
              </Button>
              <Button
                onClick={() => {
                  hideTilesAndShowDT(curHeaderName)
                }}
              >
                Refresh Table
              </Button>
            </TableHeaderButtons>
            <Divider />
            <SubmittedFilesDataTable json_records={jsonArray} tileheader={curHeaderName} hideTilesAndShowDT={hideTilesAndShowDT} />
          </>
        )}
      </>
    )
  })



// Create a new component for any upcoming transaction type tiles like 275 and add the logic in the switch case to render that component
const renderTilesForTransactionType = ({ transactionType, getTileValue, hideTilesAndShowDT, submitterType }) => {
  switch (transactionType) {
    case '835':
      return <RemittanceTiles getTileValue={getTileValue} hideTilesAndShowDT={hideTilesAndShowDT} submitterType={submitterType} />
    case '275':
      return <AttachmentTiles getTileValue={getTileValue} hideTilesAndShowDT={hideTilesAndShowDT} />
    default:
      return <AllTiles getTileValue={getTileValue} hideTilesAndShowDT={hideTilesAndShowDT} />
  }
}

export default SubmittedFilesTiles
SubmittedFilesTiles.displayName = 'OpsDashboardTiles'