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

const CalendarWrapper = styled.div `
  min-width: 312px;

  @media (max-width: 420px) {
    min-width: 0;
  }
`;
styled.div `
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: ${getSpacing('s04', 's05')};
  font-weight: ${(props) => props.theme.font.weightExtrabold};
  ${getFontSize('size16')};
  color: ${getColorAlias('contentDefault')};
`;
styled.div `
  display: flex;
`;
styled.span `
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  ${getFontSize('size14')};
  font-weight: ${(props) => props.theme.font.weightRegular};
  color: ${getColorAlias('contentDisabled')};
  margin: ${getSpacing('s00', 's02')};
`;
function getNthChild(startColumn, isRight) {
    if (startColumn === 0) {
        if (isRight)
            return '7n';
        return '7n + 1';
    }
    if (isRight)
        return `7n - ${startColumn - 1}`;
    return `7n - ${startColumn - 2}`;
}
const Dates = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['startColumn']),
}) `
  padding: ${getSpacing('s00', 's04', 's04')};
  display: grid;
  grid-template-columns: repeat(7, 1fr);

  ${({ startColumn }) => css `
      ${Wrapper}:nth-child(${getNthChild(startColumn, true)}) {
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
      }
      ${Wrapper}:nth-child(${getNthChild(startColumn, false)}) {
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
      }
      ${Wrapper}:first-of-type {
        grid-column: ${startColumn};
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
      }
    `}
  ${Wrapper}:last-child {
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
  }
`;
const NarrowMonth = styled.div `
  padding: ${getSpacing('s04')};
  margin-left: ${getSpacing('s02')};
  font-weight: ${(props) => props.theme.font.weightExtrabold};
`;

export { CalendarWrapper, Dates, NarrowMonth };
