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

import { Space } from '../../theme/global/space';
import { BorderWidths, Radii } from '../../theme/global/borders';
import { FontSizes, LineHeights } from '../../theme/global/typography';
import { COLORS_MAP, FONT_WEIGHTS_MAP, KebabColors } from '../common';

const StyledBox = styled.div<{
  themeBgColor?: KebabColors;
  themeBorderColor?: KebabColors;
  themeBorderRadius?: keyof Radii;
  themeBorderStyle?: 'dotted' | 'dashed' | 'solid';
  themeBorderWidth?: keyof BorderWidths;
  themeColor?: KebabColors;
  themeFontSize?: keyof FontSizes;
  themeFontWeight?: 'light' | 'regular' | 'semi-bold' | 'bold';
  themeLineHeight?: keyof LineHeights;
  themeMargin?: keyof Space;
  themeMarginBottom?: keyof Space;
  themeMarginLeft?: keyof Space;
  themeMarginRight?: keyof Space;
  themeMarginTop?: keyof Space;
  themePadding?: keyof Space;
  themePaddingBottom?: keyof Space;
  themePaddingLeft?: keyof Space;
  themePaddingRight?: keyof Space;
  themePaddingTop?: keyof Space;
}>`
  margin: 0;
  padding: 0;

  ${({ themeBgColor, theme }) => {
    switch (themeBgColor) {
      case undefined:
        return css``;
      default:
        return css`
          background-color: ${theme.colors[COLORS_MAP[themeBgColor]]};
        `;
    }
  }};

  ${({ themeBorderColor, theme }) => {
    switch (themeBorderColor) {
      case undefined:
        return css``;
      default:
        return css`
          border-color: ${theme.colors[COLORS_MAP[themeBorderColor]]};
        `;
    }
  }};

  ${({ themeBorderRadius, theme }) => {
    switch (themeBorderRadius) {
      case undefined:
        return css``;
      default:
        return css`
          border-radius: ${theme.radii[themeBorderRadius]}px;
        `;
    }
  }};

  ${({ themeBorderStyle }) => {
    switch (themeBorderStyle) {
      case undefined:
        return css``;
      default:
        return css`
          border-style: ${themeBorderStyle};
        `;
    }
  }};

  ${({ themeBorderWidth, theme }) => {
    switch (themeBorderWidth) {
      case undefined:
        return css``;
      default:
        return css`
          border-width: ${theme.borderWidths[themeBorderWidth]}px;
        `;
    }
  }};

  ${({ themeColor, theme }) => {
    switch (themeColor) {
      case undefined:
        return css``;
      default:
        return css`
          color: ${theme.colors[COLORS_MAP[themeColor]]};
        `;
    }
  }};

  ${({ themeFontSize, theme }) => {
    switch (themeFontSize) {
      case undefined:
        return css``;
      default:
        return css`
          font-size: ${theme.fontSizes[themeFontSize]}px;
        `;
    }
  }};

  ${({ themeFontWeight, theme }) => {
    switch (themeFontWeight) {
      case undefined:
        return css``;
      default:
        return css`
          font-weight: ${theme.fontWeights[FONT_WEIGHTS_MAP[themeFontWeight]]};
        `;
    }
  }};

  ${({ themeLineHeight, theme }) => {
    switch (themeLineHeight) {
      case undefined:
        return css``;
      default:
        return css`
          line-height: ${theme.lineHeights[themeLineHeight]}px;
        `;
    }
  }};

  ${({ themeMargin, theme }) => {
    switch (themeMargin) {
      case undefined:
        return css``;
      default:
        return css`
          margin: ${theme.space[themeMargin]}px;
        `;
    }
  }};

  ${({ themeMarginBottom, theme }) => {
    switch (themeMarginBottom) {
      case undefined:
        return css``;
      default:
        return css`
          margin-bottom: ${theme.space[themeMarginBottom]}px;
        `;
    }
  }};

  ${({ themeMarginLeft, theme }) => {
    switch (themeMarginLeft) {
      case undefined:
        return css``;
      default:
        return css`
          margin-left: ${theme.space[themeMarginLeft]}px;
        `;
    }
  }};

  ${({ themeMarginRight, theme }) => {
    switch (themeMarginRight) {
      case undefined:
        return css``;
      default:
        return css`
          margin-right: ${theme.space[themeMarginRight]}px;
        `;
    }
  }};

  ${({ themeMarginTop, theme }) => {
    switch (themeMarginTop) {
      case undefined:
        return css``;
      default:
        return css`
          margin-top: ${theme.space[themeMarginTop]}px;
        `;
    }
  }};

  ${({ themePadding, theme }) => {
    switch (themePadding) {
      case undefined:
        return css``;
      default:
        return css`
          padding: ${theme.space[themePadding]}px;
        `;
    }
  }};

  ${({ themePaddingBottom, theme }) => {
    switch (themePaddingBottom) {
      case undefined:
        return css``;
      default:
        return css`
          padding-bottom: ${theme.space[themePaddingBottom]}px;
        `;
    }
  }};

  ${({ themePaddingLeft, theme }) => {
    switch (themePaddingLeft) {
      case undefined:
        return css``;
      default:
        return css`
          padding-left: ${theme.space[themePaddingLeft]}px;
        `;
    }
  }};

  ${({ themePaddingRight, theme }) => {
    switch (themePaddingRight) {
      case undefined:
        return css``;
      default:
        return css`
          padding-right: ${theme.space[themePaddingRight]}px;
        `;
    }
  }};

  ${({ themePaddingTop, theme }) => {
    switch (themePaddingTop) {
      case undefined:
        return css``;
      default:
        return css`
          padding-top: ${theme.space[themePaddingTop]}px;
        `;
    }
  }};
`;

export { StyledBox };