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

const fadeIn = keyframes `
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
`;
const fadeOut = keyframes `
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
`;
const Wrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['isVisible']),
}) `
  display: flex;
  background-color: ${getColorAlias('containerDefault')};
  box-shadow: ${(props) => props.theme.elevation.e3};
  border-radius: ${(props) => props.theme.radius.roundedB};
  font-family: ${(props) => props.theme.font.familyPrimary};
  animation: ${(props) => (props.isVisible ? fadeIn : fadeOut)} 0.4s ease-in-out;
  z-index: 1000;
`;
const Content = styled.div ``;
const CalendarsWrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['narrow']),
}) `
  display: flex;
  flex-direction: ${({ narrow }) => (narrow ? 'column' : 'row')};
`;
const DatePickerWrapper = styled.div `
  margin: ${getSpacing('s02', 's00')};
`;
const PeriodWrapper = styled.div `
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: ${getSpacing('s02')};
  padding: ${getSpacing('s00', 's07')};
`;
const PeriodName = styled.div `
  align-content: center;
`;

export { CalendarsWrapper, Content, DatePickerWrapper, PeriodName, PeriodWrapper, Wrapper };
