import React, {useMemo} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {IconDoorEnter, IconDoorExit} from '@tabler/icons-react-native';
import {Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  dateColor?: string;
  isStart: boolean;
  time: string;
  style?: StyleProp<ViewStyle>;
}

function DoorDisplayer({dateColor, isStart, time, style}: Props) {
  const {theme, iconSizes} = useTheme();
  const Icon = isStart ? IconDoorEnter : IconDoorExit;

  const formattedDate = useMemo(() => {
    const date = new Date(time);
    return (
      date.getHours().toString().padStart(2, '0') +
      ':' +
      date.getMinutes().toString().padStart(2, '0')
    );
  }, [time]);

  return (
    <View style={[styles.container, style]}>
      <Icon size={iconSizes.x4} color={theme.text.neutral.lighter} />
      <Typography variant="xxs" color={dateColor || theme.text.neutral.lighter}>
        {formattedDate}
      </Typography>
    </View>
  );
}

export default DoorDisplayer;