import styled, { css } from 'styled-components';
import { convertToTransientProps, getFontSize, getSpacing, getColorAlias } from '../../../../utils/index.js';

const Wrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps([
        'isInRange',
        'isStartDay',
        'isEndDay',
        'disabled',
    ]),
}) `
  display: flex;
  justify-content: center;
  align-items: center;
  ${getFontSize('size16')};
  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
  margin: ${getSpacing('s02', 's00')};
  padding: 0 1px;

  ${({ isInRange, isStartDay, isEndDay }) => css `
      background: ${isInRange || (isStartDay && !isEndDay)
    ? getColorAlias('interactiveSecondary')
    : 'transparent'};
      border-bottom-right-radius: ${isEndDay ? '20px' : '0'};
      border-top-right-radius: ${isEndDay ? '20px' : '0'};
      border-bottom-left-radius: ${isStartDay ? '20px' : '0'};
      border-top-left-radius: ${isStartDay ? '20px' : '0'};
    `}
`;
function getBackgroundColor(isToday, isStartEndDay, disabled) {
    if (isToday && disabled)
        return getColorAlias('backgroundDefault');
    if (isStartEndDay)
        return getColorAlias('interactivePrimary');
    if (isToday)
        return getColorAlias('containerStrong');
    return 'transparent';
}
function getColor(isStartEndDay, isCurrentMonth, disabled) {
    if (disabled)
        return getColorAlias('disabled01');
    if (isStartEndDay)
        return getColorAlias('contentInteractivePrimary');
    if (!isCurrentMonth)
        return getColorAlias('contentDisabled');
    return getColorAlias('contentInteractiveTertiary');
}
const DayNum = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps([
        'isStartEndDay',
        'isToday',
        'isCurrentMonth',
        'width',
    ]),
}) `
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: ${(props) => props.width}px;
  height: ${(props) => props.width}px;
  font-weight: ${(props) => props.isToday
    ? props.theme.font.weightExtrabold
    : props.theme.font.weightRegular};
  color: ${(props) => getColor(props.isStartEndDay, props.isCurrentMonth, props.disabled)};
  border-radius: ${(props) => props.isToday || props.isStartEndDay
    ? props.theme.radius.roundedE
    : props.theme.radius.roundedNone};
  background: ${(props) => getBackgroundColor(props.isToday, props.isStartEndDay, props.disabled)};
  position: relative;

  &:focus {
    border-radius: ${(props) => props.theme.radius.roundedE};
  }

  @media (max-width: 325px) {
    padding: 1px 3px;
  }
`;
const Event = styled.div `
  height: 4px;
  width: 4px;
  background-color: ${getColorAlias('interactiveBrand')};
  border-radius: ${(props) => props.theme.radius.roundedE};
  position: absolute;
  top: min(30px, 85%);
`;

export { DayNum, Event, Wrapper };
