import { Box, Typography } from "@mui/material"
import RaceTime from "../../../../../components/RaceTime.tsx"
import { parseResultStatus } from "../../../../../../../shared/sortingFunctions/sortRunners.ts"
import {
  ProcessedRunnerModel,
  ProcessedTeamRunnerModel,
} from "../../../../../../../components/VirtualTicket/shared/EntityTypes.ts"
import RelayRaceTime from "./RelayRaceTime"

type RelayResultLegItemProps = {
  legParticipant: ProcessedTeamRunnerModel
  runner: ProcessedRunnerModel
  handleRowClick?: (runner: ProcessedRunnerModel, leg: number) => void
}

export default function RelayResultLegItem({
  legParticipant,
  runner,
  handleRowClick,
}: RelayResultLegItemProps) {
  const status = parseResultStatus(legParticipant.stage.status_code as string)
  const hasChipDownload = true //hasChipDownloadFunction(runner) // TODO: Uncomment after backend bug fix

  return (
    <Box
      sx={{
        display: "table-row",
        cursor: "pointer",
        "&:hover": {
          backgroundColor: "#fffbf0",
        },
      }}
      onClick={handleRowClick ? () => handleRowClick(runner, legParticipant.leg_number) : undefined}
    >
      <Box sx={{ display: "table-cell", textAlign: "left", padding: "4px 0px" }}>
        <Typography sx={{ fontSize: "small" }}>{`${legParticipant.leg_number}.`}</Typography>
      </Box>
      <Box sx={{ display: "table-cell", overflow: "hidden", textAlign: "left" }}>
        <Typography sx={{ fontSize: "small" }}>{legParticipant.full_name}</Typography>
      </Box>
      <Box sx={{ display: "table-cell", textAlign: "right" }}>
        <RaceTime
          displayStatus
          isFinalTime={hasChipDownload}
          status={status}
          finish_time={legParticipant.stage.finish_time}
          time_seconds={legParticipant.stage.time_seconds}
          start_time={legParticipant.stage.start_time}
          style={{ fontSize: "small" }}
        />
      </Box>
      <Box sx={{ display: "table-cell", textAlign: "right" }}>
        <RelayRaceTime
          displayStatus
          isFinalTime={hasChipDownload}
          runner={runner}
          style={{ fontSize: "small" }}
          overallLeg={legParticipant.leg_number}
        />
      </Box>
    </Box>
  )
}
