import React from 'react';
import Typography from '../Typography';
import {
  StyledCalendarCell,
  StyledCalendarRowItem,
  StyledMark,
} from './StyledCalendar';

const getCellVariant = (
  isSelected = false,
  isCurrent = false,
  isHighlighted = false
) => {
  if (isSelected) return 'selected';
  if (isCurrent) return 'current';
  if (isHighlighted) return 'highlighted';

  return 'default';
};

interface CalendarRowItemProps {
  date?: Date;
  onPress?: () => void;
  isCurrent?: boolean;
  isSelected?: boolean;
  textIntent?: 'body' | 'subdued';
  marked?: boolean;
  itemWidth?: number;
  isHighlighted?: boolean;
}

const CalendarRowItem = ({
  date,
  onPress,
  isCurrent,
  isSelected,
  textIntent = 'body',
  marked = false,
  itemWidth,
  isHighlighted,
}: CalendarRowItemProps) => (
  <StyledCalendarRowItem
    testID="calendar-date-cell"
    themeItemWidth={itemWidth}
    isHighlighted={isHighlighted}
  >
    <StyledCalendarCell
      variant={getCellVariant(isSelected, isCurrent, isHighlighted)}
      onPress={onPress}
    >
      <Typography.Body
        variant="small"
        intent={isSelected ? 'inverted' : textIntent}
      >
        {date ? date.getDate() : ''}
      </Typography.Body>
      {marked ? (
        <StyledMark
          testID="calendar-date-mark"
          variant={isSelected ? 'inverted' : 'primary'}
        />
      ) : null}
    </StyledCalendarCell>
  </StyledCalendarRowItem>
);

export default CalendarRowItem;