import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { IconButton, Card, CardContent, Typography, Grid, Chip, } from "@material-ui/core"; import "../../styles/SelectedRoute.scss"; import { METRO_STATION_ID, Segment, Station, Train as TrainType, } from "../../types"; import { getHeadingDirectionId, getLineTypeLabel, getStation, getStationName, getTrainsFromSegment, } from "../../services/util.service"; import { getStationIconStyle } from "../../services/ui-style.service"; import { SegmentCardHeader } from "./SegmentCardHeader"; // TODO: change siam icon type SingleSegmentCardProps = { segment: Segment; }; export const SingleSegmentCard = ({ segment }: SingleSegmentCardProps) => { const { t: translate } = useTranslation(); const lineTypeLabel = getLineTypeLabel(segment.lineType); const trains = getTrainsFromSegment(segment); return ( <Card> <CardContent> <Grid container> <SegmentCardHeader label={lineTypeLabel} fareLabel={`${segment.fare} ${translate("currency.baht")}`} /> {/* TODO: handle convert segments to train */} {trains.map((train, index) => { return ( <Train train={train} showLastStation={trains.length === 1 || index !== 0} key={"train" + index} /> ); })} </Grid> </CardContent> </Card> ); }; type TrainProps = { train: TrainType; showLastStation?: boolean; }; const Train = ({ train, showLastStation }: TrainProps) => { const { t: translate, i18n: { language }, } = useTranslation(); const intermediateStations = train.stations.slice( 1, train.stations.length - 1 ); const [showExpandButton, setShowExpandButton] = useState<boolean>( intermediateStations.length > 1 ); const firstStation = getStation(train.stations[0]); const lastStation = getStation(train.stations[train.stations.length - 1]); const headingStationId = getHeadingDirectionId(train); const headingStation = getStation(headingStationId); const handleExpandButtonClick = () => { setShowExpandButton(false); }; return ( <> <TransferStation station={firstStation} /> <Grid container> <Grid container style={{ marginBottom: "5px" }}> <div style={{ marginLeft: "8px", marginRight: "12px", width: "2px", borderLeft: "solid 1px black", height: "100%", }} ></div> <Grid item> {headingStation && ( <Grid xs={12}> <Chip label={`${getLineTypeLabel( headingStation.lineType )} ${getStationName(headingStation, language)}`} /> </Grid> )} {showExpandButton ? ( <IconButton> <Typography variant="body1" onClick={handleExpandButtonClick}> {translate("route.intermediateStationText", { count: intermediateStations.length, })} </Typography> </IconButton> ) : ( <Typography variant="body1" style={{ padding: "12px", color: "rgba(0, 0, 0, 0.54)" }} > {intermediateStations.map( (stationId: METRO_STATION_ID, index: number) => { const showNewLine = index < train.stations.length - 1; const station = getStation(stationId); return ( <> <StationLabel station={station} /> {showNewLine && <br />} </> ); } )} </Typography> )} </Grid> </Grid> {showLastStation && <TransferStation station={lastStation} />} </Grid> </> ); }; type TransferStationProps = { station: Station | undefined; }; const TransferStation = ({ station }: TransferStationProps) => { const stationIconStyle = station ? getStationIconStyle(station.lineType) : ""; return ( <Grid container> <div className={`station-icon ${stationIconStyle}`}></div> <Typography variant="body1"> <StationLabel station={station} /> </Typography> </Grid> ); }; type StationLabelProps = { station: Station | undefined; }; const StationLabel = ({ station }: StationLabelProps) => { const { i18n: { language }, } = useTranslation(); if (!station) { return null; } const lineTypeLabel = getLineTypeLabel(station.lineType); return <>{`${lineTypeLabel} ${getStationName(station, language)}`}</>; };