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

const Wrapper = styled.div `
  align-items: flex-start;
  display: flex;
  flex-flow: row nowrap;
  padding: ${(props) => props.componentName === 'notification'
    ? getSpacing('s04')
    : getSpacing('s04', 's06')};
  border-radius: ${(props) => props.componentName === 'notification' && props.theme.radius.roundedC};
  ${(props) => mapTypeToCss(props.variant)};
  position: relative;
`;
const Actions = styled.div `
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  margin-top: ${getSpacing('s04')};
  margin-right: ${({ compact, showClose }) => compact && showClose && getSpacing('s08')};
  width: 100%;

  & > button + button {
    margin-left: ${getSpacing('s02')};
  }
`;
const Container = styled.div `
  display: flex;
  flex-flow: ${(props) => (props.compact ? 'row' : 'column')} nowrap;
  width: 100%;

  ${(props) => props.compact &&
    css `
      ${Actions} {
        margin-top: 0;
      }
    `}
`;
const IconWrapper = styled.div `
  align-items: center;
  display: flex;
  height: 28px;
  margin-right: ${getSpacing('s04')};

  svg {
    fill: ${getColorAlias('contentDefault')};
    height: 20px;
    width: 20px;
  }
`;
const CloseIcon = styled.div `
  position: absolute;
  right: 16px;
  top: ${({ compact }) => (compact ? '8px' : '4px')};
`;
const Title = styled.h4 `
  ${getFontSize('size20')};
  color: ${getColorAlias('contentDefault')};
  font-weight: ${(props) => props.theme.font.weightExtrabold};
  margin: 0;
  padding: 0;
  width: 100%;
`;
const Content = styled.div `
  color: ${getColorAlias('contentDefault')};
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  min-height: 24px;
  padding-top: 4px;
  width: 100%;
`;

export { Actions, CloseIcon, Container, Content, IconWrapper, Title, Wrapper };
