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

// Styled CSS
const Margin = css`
  margin: ${(p) => p.m};
`;
const MarginZero = css`
  margin: 0;
`;
const MarginTop = css`
  margin-top: ${(p) => p.mt};
`;
const MarginRight = css`
  margin-right: ${(p) => p.mr};
`;
const MarginBottom = css`
  margin-bottom: ${(p) => p.mb};
`;
const MarginLeft = css`
  margin-left: ${(p) => p.ml};
`;
const MarginHorizontal = css`
  margin-left: ${(p) => p.mx};
  margin-right: ${(p) => p.mx};
`;
const MarginVertical = css`
  margin-top: ${(p) => p.my};
  margin-bottom: ${(p) => p.my};
`;
const Padding = css`
  padding: ${(p) => p.p};
`;
const PaddingTop = css`
  padding-top: ${(p) => p.pt};
`;
const PaddingRight = css`
  padding-right: ${(p) => p.pr};
`;
const PaddingBottom = css`
  padding-bottom: ${(p) => p.pb};
`;
const PaddingLeft = css`
  padding-left: ${(p) => p.pl};
`;
const PaddingZero = css`
  padding: 0;
`;
const PaddingX = css`
  padding-left: ${(p) => p.px};
  padding-right: ${(p) => p.px};
`;
const PaddingY = css`
  padding-top: ${(p) => p.py};
  padding-bottom: ${(p) => p.py};
`;

const FullWidth = css`
  display: block;
  width: 100%;
  /* reset */
  margin-left: 0;
  margin-right: 0;
`;

// Styles
const View = styled.div`
  /* -------------- */
  /* Default Values */
  /* -------------- */

  border: unset;
  background: unset;
  font: unset;
  font-family: unset;
  font-size: 100%;
  box-sizing: border-box;
  color: ${(p) => (p.textColor ? p.textColor : `unset`)};
  border-radius: ${(p) => (p.borderRadius ? p.borderRadius : `unset`)};
  background-color: ${(p) => (p.bgcolor ? p.bgcolor : `unset`)};
  ${(p) => p.fontRes && p.fontRes};

  /* ---------------- */
  /* Custom Modifiers */
  /* ---------------- */

  /* positions */
  position: ${(p) => (p.position ? p.position : `unset`)};
  ${(p) =>
    p.top &&
    css`
      top: ${p.top};
    `}
  ${(p) =>
    p.right &&
    css`
      right: ${p.right};
    `}
  ${(p) =>
    p.bottom &&
    css`
      bottom: ${p.bottom};
    `}
  ${(p) =>
    p.left &&
    css`
      left: ${p.left};
    `}

  /* Margin */
  ${(p) => p.m && Margin}
  ${(p) => p.mz && MarginZero}
  ${(p) => p.mt && MarginTop}
  ${(p) => p.mr && MarginRight}
  ${(p) => p.mb && MarginBottom}
  ${(p) => p.ml && MarginLeft}
  ${(p) => p.mx && MarginHorizontal}
  ${(p) => p.my && MarginVertical}

  /* Padding */
  ${(p) => p.p && Padding}
  ${(p) => p.pz && PaddingZero}
  ${(p) => p.pt && PaddingTop}
  ${(p) => p.pr && PaddingRight}
  ${(p) => p.pr && PaddingBottom}
  ${(p) => p.pl && PaddingLeft}
  ${(p) => p.px && PaddingX}
  ${(p) => p.py && PaddingY}

  /* Fullwidth */
  ${(p) => p.fullWidth && FullWidth}

  /* styled component css */
  ${(p) =>
    p.css &&
    css`
      ${p.css};
    `}

`;

export default View;