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

const StyledIconWrapper = styled.div<{
  themeSize: 'default' | 'compact';
}>`
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  color: inherit;

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

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

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

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

const StyledAlert = styled.div<{
  themeIntent: 'success' | 'info' | 'warning' | 'danger' | 'error';
  themeSize: 'default' | 'compact';
}>`
  display: flex;
  align-items: flex-start;
  border-style: solid;
  margin: 0;

  font-weight: ${({ theme }) => theme.fontWeights.alert.text};
  border-radius: ${({ theme }) => theme.radii.alert.wrapper};
  color: ${({ theme }) => theme.colors.alert.text};
  border-width: ${({ theme }) => theme.borderWidths.alert.wrapper};

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

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

const StyledCloseButton = styled.div<{
  themeSize: 'default' | 'compact';
}>`
  margin: 0;
  padding: 0;
  margin-left: auto;
  color: inherit;

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

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