import { IconButton, Stack, useTheme } from '@mui/material';
import { IconClock, IconExclamationCircle, IconX } from '@tabler/icons-react';

import { type TimePickerEndAdornmentProps } from './types';

const preventFocusLoss = (e: React.MouseEvent) => e.preventDefault();

const TimePickerEndAdornment = ({
  noIcon,
  disabled,
  error,
  showClear,
  iconSize,
  iconPadding,
  onOpen,
  onClear,
}: TimePickerEndAdornmentProps) => {
  const { palette } = useTheme();

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        gap: 0.5,
        alignItems: 'center',
        mr: 0.75,
      }}
    >
      {!noIcon && (
        <IconButton
          onMouseDown={preventFocusLoss}
          onClick={onOpen}
          disabled={disabled}
          sx={{ padding: iconPadding }}
        >
          <IconClock
            size={iconSize}
            color={palette.new.text.neutral.lighter}
          />
        </IconButton>
      )}
      {error && (
        <IconExclamationCircle
          size={iconSize}
          color={palette.new.text.feedback.error}
        />
      )}
      {showClear && (
        <IconButton
          onMouseDown={preventFocusLoss}
          onClick={onClear}
          sx={{ padding: iconPadding }}
        >
          <IconX
            size={iconSize}
            color={palette.new.text.neutral.lighter}
          />
        </IconButton>
      )}
    </Stack>
  );
};

export default TimePickerEndAdornment;