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

const StyledCard = styled.div<{ themeStatus: 'withBorder' | 'withoutBorder' }>`
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  background: ${({ theme }) => theme.colors.card.background};
  border-radius: ${({ theme }) => theme.radii.card.default};
  margin: 0;
  padding: 0;

  > *:first-child {
    border-top-left-radius: ${({ theme }) => theme.radii.card.default};
    border-top-right-radius: ${({ theme }) => theme.radii.card.default};
  }

  > *:last-child {
    border-bottom-left-radius: ${({ theme }) => theme.radii.card.default};
    border-bottom-right-radius: ${({ theme }) => theme.radii.card.default};
  }

  ${({ themeStatus, theme }) => {
    switch (themeStatus) {
      case 'withBorder':
        return css`
          border-width: ${theme.borderWidths.card.default};
          border-style: solid;
          border-color: ${theme.colors.card.border};
        `;
      case 'withoutBorder':
        return css`
          border-width: ${theme.borderWidths.card.default};
          border-style: solid;
          border-color: transparent;
        `;
    }
  }};
`;

const StyledCardHeader = styled.div<{
  themeSize: 'small' | 'medium';
  themeVariant: 'basic' | 'primary' | 'info' | 'grey';
}>`
  box-sizing: border-box;
  position: relative;
  font-size: ${({ theme }) => theme.fontSizes.card.header};
  font-weight: ${({ theme }) => theme.fontWeights.card.header};
  line-height: ${({ theme }) => theme.lineHeights.card.header};
  border-bottom: ${({ theme }) => theme.borderWidths.card.default} solid;
  margin: 0;

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          padding: ${theme.space.card.headerSmallPadding};
        `;
      case 'medium':
        return css`
          padding: ${theme.space.card.headerMediumPadding};
        `;
    }
  }};

  ${({ themeVariant, theme }) => {
    switch (themeVariant) {
      case 'basic':
        return css`
          background: ${theme.colors.card.headerBasicBackground};
          color: ${theme.colors.card.headerDefaultText};
          border-bottom-color: ${theme.colors.card.border};
        `;
      case 'info':
        return css`
          background: ${theme.colors.card.headerInfoBackground};
          color: ${theme.colors.card.headerInfoText};
          margin: ${theme.space.card.headerMargin};
          border-bottom-color: ${theme.colors.card.headerInfoBackground};
        `;
      case 'grey':
        return css`
          background: ${theme.colors.card.headerGreyBackground};
          color: ${theme.colors.card.headerDefaultText};
          border-bottom-color: ${theme.colors.card.border};
        `;
      case 'primary':
        return css`
          background: ${theme.colors.card.headerPrimaryBackground};
          color: ${theme.colors.card.headerLightText};
          margin: ${theme.space.card.headerMargin};
          border-bottom-color: ${theme.colors.card.headerPrimaryBackground};
        `;
    }
  }};
`;

const StyledCardContent = styled.div<{
  themeSize: 'small' | 'medium';
  themeVariant: 'mainContent' | 'extra';
}>`
  font-weight: ${({ theme }) => theme.fontWeights.card.content};
  box-sizing: border-box;
  margin: 0;

  ${({ themeVariant, theme }) => {
    switch (themeVariant) {
      case 'mainContent':
        return css`
          padding: ${theme.space.card.headerSmallPadding};
          line-height: ${theme.lineHeights.card.content};
          color: ${theme.colors.card.contentText};
          font-size: ${theme.fontSizes.card.content};
        `;
      case 'extra':
        return css`
          padding: ${theme.space.card.headerMediumPadding};
          line-height: ${theme.lineHeights.card.contentExtra};
          color: ${theme.colors.card.contentTextExtra};
          font-size: ${theme.fontSizes.card.contentExtra};
          border-top-width: ${theme.borderWidths.card.default};
          border-top-style: solid;
          border-top-color: ${theme.colors.card.border};
        `;
    }
  }};

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          padding: ${theme.space.card.contentSmallPadding};
        `;
      case 'medium':
        return css`
          padding: ${theme.space.card.contentMediumPadding};
        `;
    }
  }};
`;

const StyledCardImg = styled.img`
  display: block;
  width: calc(100% + 2 * ${({ theme }) => theme.borderWidths.card.default});
  margin: ${({ theme }) => theme.space.card.imgMargin};
  padding: 0;
`;

export { StyledCard, StyledCardHeader, StyledCardContent, StyledCardImg };