<template>
  <div :class="[gridClasses, wrapperClass]">
    <slot />
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "NGridItem",

  props: {
    wrapperClass: {
      type: String,
      default: "",
    },
    fullWidth: {
      type: Boolean,
      default: false,
    },

    xl: {
      type: [Number, String],
      default: "",
    },
    lg: {
      type: [Number, String],
      default: "",
    },
    md: {
      type: [Number, String],
      default: "",
    },
    sm: {
      type: [Number, String],
      default: "",
    },
    xs: {
      type: [Number, String],
      default: "",
    },
    cols: {
      type: [Number, String],
      default: 12,
    },
  },
  computed: {
    gridClasses() {
      const { cols, fullWidth } = this;
      const { xs, sm, md, lg, xl } = this.breakpointClasses;

      if (fullWidth) {
        return "n-col-12";
      }

      return `n-col-${cols} ${xs} ${sm} ${md} ${lg} ${xl}`;
    },
    breakpointClasses() {
      const { xs, sm, md, lg, xl, getBreakpointClass } = this;

      return {
        xs: getBreakpointClass("xs", xs),
        sm: getBreakpointClass("sm", sm),
        md: getBreakpointClass("md", md),
        lg: getBreakpointClass("lg", lg),
        xl: getBreakpointClass("xl", xl),
      };
    },
  },
  methods: {
    getBreakpointClass(breakpoint, value) {
      return value ? `n-col-${breakpoint}-${value}` : "";
    },
  },
});
</script>
