const largeMaxWidth = (props) => {
  switch (props.size) {
    case 'large': {
      return `${props.theme.container.size.large}px`;
    }
    case 'medium': {
      return `${props.theme.container.size.medium}px`;
    }
    case 'small': {
      return `${props.theme.container.size.small}px`;
    }
    case 'full': {
      return '100%';
    }
    default: {
      throw new Error(`Unexpected container size ${props.size}`);
    }
  }
};

const mediumMaxWidth = (props) => {
  switch (props.size) {
    case 'medium':
    case 'large': {
      return `${props.theme.container.size.medium}px`;
    }
    case 'small': {
      return `${props.theme.container.size.small}px`;
    }
    case 'full': {
      return '100%';
    }
    default: {
      throw new Error(`Unexpected container size ${props.size}`);
    }
  }
};

const smallMaxWidth = (props) => {
  switch (props.size) {
    case 'medium':
    case 'large':
    case 'small': {
      return `${props.theme.container.size.small}px`;
    }
    case 'full': {
      return '100%';
    }
    default: {
      throw new Error(`Unexpected container size ${props.size}`);
    }
  }
}

const WithContainerStyle = styled(Wrapper)`
    margin-right: auto;
    margin-left: auto;

    padding-right: ${offset}px;
    padding-left: ${offset}px;

    max-width: ${largeMaxWidth};
    width: 100%;

    @media ${lessThanContainer('large')} {
      max-width: ${mediumMaxWidth};
    }

    @media ${lessThanContainer('medium')} {
      max-width: ${smallMaxWidth};
    }

    @media ${lessThanContainer('small')} {
      max-width: 100%;
    }
  `;