/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';
import DateTimePicker from 'react-datepicker';
import {theme, paddings} from 'components/shared/theme';
import calendarImage from 'assets/images/calendar-24x24.png';

const {colors, spacing, primaryBorderRadius, primaryBorderColor, primaryFontSize, primaryInputHeight, fontSizeS, formFieldWidth} = theme;

/* Stylelint-disable property-no-vendor-prefix */
export const DatePickerContainer = styled.default.div<{width: number | string}>`
  position: relative;
  width: ${({width}) => (width && isNaN(+width) ? width : (width || formFieldWidth) + 'px')};
  display: flex;
  flex-direction: column;
`;

export const DatePickerElement = styled.default(DateTimePicker).attrs(props => ({
  showTimeSelect: true,
  timeFormat: 'HH:mm',
  timeIntervals: 15,
  dateFormat: 'MMM d, yyyy HH:mm',
  ...props
}))`
  background-color: ${colors.white};
  background-image: url(${calendarImage});
  background-position: left 8px bottom 50%;
  background-size: 20px;
  background-repeat: no-repeat;
  border: 1px solid ${primaryBorderColor};
  border-radius: ${primaryBorderRadius};
  font-size: ${primaryFontSize};
  padding-left: ${paddings.xlarge};
  height: ${primaryInputHeight};
  width: 100%;
`;

export const HelperText = styled.default.p<{error?: boolean}>`
  color: ${({error}) => (error ? colors.lightRed : colors.gray600)};
  font-weight: 400;
  font-size: ${fontSizeS};
  margin-top: ${spacing.xxSmall};
`;
