import { IconDoorEnter, IconDoorExit } from '@material-hu/icons/tabler';
import Chip from '@material-hu/mui/Chip';
import Stack from '@material-hu/mui/Stack';
import { type SxProps, type Theme, useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

export type EntryExitPairChipProps = {
  endTime: string | null;
  startTime: string | null;
};

const labelTypographySx: SxProps<Theme> = {
  fontWeight: 'fontWeightSemiBold',
  color: theme => theme.palette.new.text.neutral.lighter,
};

const EntryExitPairChip = ({ endTime, startTime }: EntryExitPairChipProps) => {
  const { palette } = useTheme();
  const iconColor = palette.new.text.neutral.lighter;

  if (!startTime && !endTime) {
    return null;
  }

  return (
    <Chip
      clickable={false}
      label={
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 0.5 }}>
          {startTime && (
            <>
              <IconDoorEnter
                size={16}
                style={{ color: iconColor, flexShrink: 0 }}
              />
              <Typography
                variant="globalXXS"
                sx={labelTypographySx}
              >
                {startTime}
              </Typography>
            </>
          )}
          {startTime && endTime && (
            <Typography
              variant="globalXXS"
              sx={labelTypographySx}
            >
              {' - '}
            </Typography>
          )}
          {endTime && (
            <>
              <IconDoorExit
                size={16}
                style={{ color: iconColor, flexShrink: 0 }}
              />
              <Typography
                variant="globalXXS"
                sx={labelTypographySx}
              >
                {endTime}
              </Typography>
            </>
          )}
        </Stack>
      }
      sx={[
        {
          backgroundColor: palette.new.background.elements.default,
          border: `1px solid ${palette.new.border.neutral.default}`,
          borderRadius: ({ shape }) => shape.borderRadiusL,
          px: 1,
          py: 0.5,
          '& .MuiChip-label': {
            px: 0,
          },
        },
      ]}
    />
  );
};

export default EntryExitPairChip;