import styled, { css } from 'styled-components';

const StyledIconWrapper = styled.div<{
  themeIntent: 'success' | 'info' | 'warning' | 'danger' | 'error';
  themeSize: 'default' | 'compact';
}>`
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;

  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'success':
        return css`
          color: ${theme.colors.banner.success};
        `;
      case 'info':
        return css`
          color: ${theme.colors.banner.info};
        `;
      case 'warning':
        return css`
          color: ${theme.colors.banner.warning};
        `;
      case 'danger':
        return css`
          color: ${theme.colors.banner.danger};
        `;
      case 'error':
        return css`
          color: ${theme.colors.banner.error};
        `;
    }
  }};

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'default':
        return css`
          margin-top: ${theme.space.banner.iconDefaultMarginTop};
          margin-right: ${theme.space.banner.iconDefaultMarginRight};
          line-height: ${theme.lineHeights.banner.iconDefault};
        `;
      case 'compact':
        return css`
          margin-top: ${theme.space.banner.iconCompactMarginTop};
          margin-right: ${theme.space.banner.iconCompactMarginRight};
          line-height: ${theme.lineHeights.banner.iconCompact};
        `;
    }
  }};
`;

const StyledInner = styled.div`
  flex: 1;
  margin: 0;
  padding: 0;
`;

const StyledTitle = styled.div`
  font-size: ${({ theme }) => theme.fontSizes.banner.title};
  line-height: ${({ theme }) => theme.lineHeights.banner.title};
  font-weight: ${({ theme }) => theme.fontWeights.banner.title};
  margin: 0;
  padding: 0;
  margin-bottom: ${({ theme }) => theme.space.banner.titleMarginBottom};
`;

const StyledContent = styled.div`
  font-size: ${({ theme }) => theme.fontSizes.banner.content};
  line-height: ${({ theme }) => theme.lineHeights.banner.content};
  margin: 0;
  padding: 0;
`;

const StyledBanner = styled.div<{
  themeIntent: 'info' | 'success' | 'warning' | 'danger' | 'error';
  themeSize: 'default' | 'compact';
}>`
  display: flex;
  margin: 0;
  align-items: flex-start;
  color: ${({ theme }) => theme.colors.banner.text};

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'default':
        return css`
          padding: ${theme.space.banner.defaultPadding};
        `;
      case 'compact':
        return css`
          padding: ${theme.space.banner.compactPadding};
        `;
    }
  }};

  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'info':
        return css`
          background-color: ${theme.colors.banner.bgInfo};
        `;
      case 'success':
        return css`
          background-color: ${theme.colors.banner.bgSuccess};
        `;
      case 'warning':
        return css`
          background-color: ${theme.colors.banner.bgWarning};
        `;
      case 'danger':
        return css`
          background-color: ${theme.colors.banner.bgDanger};
        `;
      case 'error':
        return css`
          background-color: ${theme.colors.banner.bgError};
        `;
    }
  }};
`;

const StyledCloseButton = styled.div<{ themeSize: 'default' | 'compact' }>`
  margin: 0;
  padding: 0;
  margin-left: auto;
  color: ${({ theme }) => theme.colors.banner.text};

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'default':
        return css`
          margin-top: ${theme.space.banner.iconDefaultMarginTop};
          line-height: ${theme.lineHeights.banner.iconDefault};
        `;
      case 'compact':
        return css`
          margin-top: ${theme.space.banner.iconCompactMarginTop};
          line-height: ${theme.lineHeights.banner.iconCompact};
        `;
    }
  }};
`;

export {
  StyledTitle,
  StyledInner,
  StyledContent,
  StyledIconWrapper,
  StyledCloseButton,
  StyledBanner,
};