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

interface SelectedDateProps {
  date: Date;
  onPress?: () => void;
  marked?: boolean;
  isStart?: boolean;
  showConnector?: boolean;
  itemWidth?: number;
}

const SelectedDate = ({
  date,
  onPress,
  marked,
  isStart,
  showConnector,
  itemWidth,
}: SelectedDateProps) => {
  return (
    <StyledCalendarRowItem
      themeItemWidth={itemWidth}
      testID="calendar-date-cell"
    >
      {showConnector ? (
        <Box
          testID="range-connector"
          style={{
            width: '50%',
            height: '100%',
            ...StyleSheet.absoluteFillObject,
            transform: isStart
              ? [
                  {
                    translateX: itemWidth ? itemWidth / 2 : 0,
                  },
                ]
              : undefined,
          }}
          bgColor="highlightedSurface"
        />
      ) : null}

      <StyledCalendarCell
        testID="selected-date-cell"
        variant="selected"
        onPress={onPress}
      >
        <Typography.Body variant="small" intent="inverted">
          {date ? date.getDate() : ''}
        </Typography.Body>
        {marked ? (
          <StyledMark testID="calendar-date-mark" variant="inverted" />
        ) : null}
      </StyledCalendarCell>
    </StyledCalendarRowItem>
  );
};

export default SelectedDate;