import styled from "styled-components";

import {
  rem
} from '../style/function.style'
import { Props } from './type';

export const Box = styled.div<{
  borderRadius?: Props['borderRadius'],
  margin?: Props['margin'],
  padding?: Props['padding'],
  background?: Props['background'],
}>`
  ${({
    borderRadius,
    margin,
    padding,
    background
  }) => (
    `
      ${padding ? (
        `padding: ${rem(padding.top || 0)} ${rem(padding.right || 0)} ${rem(padding.bottom || 0)} ${rem(padding.left || 0)};`
      ): ''}
      ${margin ? (
        `margin: ${margin.top ? rem(margin.top) : 'auto'} ${margin.right ? rem(margin.right) : 'auto'} ${margin.bottom ? rem(margin.bottom) : 'auto'} ${margin.left ? rem(margin.left) : 'auto'};`
      ): 'margin: auto;'}
      ${borderRadius ? (
        `border-radius: ${rem(borderRadius.topLeft || 0)} ${rem(borderRadius.topRight || 0)} ${rem(borderRadius.bottomRight || 0)} ${rem(borderRadius.bottomLeft || 0)};`
      ): ''}

      position: relative;
      background-size: 100% auto;
      overflow: hidden;

      ${
        background ? (
          `
            ${
              background.color
                ? `background-color: ${background.color};`
                : ''
            }
            background-image: ${
              [
                background.repeatImage && `url(${background.repeatImage.url})`,
                background.headerImage && `url(${background.headerImage.url})`,
                background.footerImage && `url(${background.footerImage.url})`,
              ].filter((image) => !!image).join(',')
            };
            background-repeat: ${
              [
                background.repeatImage && 'repeat-y',
                background.headerImage && 'no-repeat',
                background.footerImage && 'no-repeat',
              ].filter((repeat) => !!repeat).join(',')
            };
            background-position: ${
              [
                background.repeatImage && 'top left',
                background.headerImage && 'top left',
                background.footerImage && 'bottom left',
              ].filter((repeat) => !!repeat).join(',')
            };
          `
        ): ''
      }
    `
  )}
`