<template>
  <div class="bill-two-column" :class="wrapperClass" :style="wrapperStyle">
    <div class="bill-two-column__left" :style="leftStyle">
      <slot name="left" />
    </div>
    <div class="bill-two-column__right" :style="rightStyle">
      <slot name="right" />
    </div>
  </div>
</template>

<script>
const BILL_DEFAULT_LEFT_WIDTH = 1064
const BILL_DEFAULT_RIGHT_WIDTH = 520
const BILL_DEFAULT_COLUMN_GAP = 16
const BILL_DEFAULT_MIN_STACK_WIDTH = 1660

export default {
  name: 'BillTwoColumn',
  props: {
    leftWidth: {
      type: Number,
      default: BILL_DEFAULT_LEFT_WIDTH
    },
    rightWidth: {
      type: Number,
      default: BILL_DEFAULT_RIGHT_WIDTH
    },
    gap: {
      type: Number,
      default: BILL_DEFAULT_COLUMN_GAP
    },
    minStackWidth: {
      type: Number,
      default: BILL_DEFAULT_MIN_STACK_WIDTH
    },
    stackOnNarrow: {
      type: Boolean,
      default: true
    },
    wrapperClass: {
      type: [String, Array, Object],
      default: ''
    }
  },
  computed: {
    shouldStack() {
      if (!this.stackOnNarrow || typeof window === 'undefined') {
        return false
      }
      return window.innerWidth < this.minStackWidth
    },
    wrapperStyle() {
      if (this.shouldStack) {
        return {
          display: 'flex',
          flexDirection: 'column',
          gap: `${this.gap}px`
        }
      }

      return {
        display: 'grid',
        gridTemplateColumns: `${this.leftWidth}px ${this.rightWidth}px`,
        columnGap: `${this.gap}px`,
        alignItems: 'start'
      }
    },
    leftStyle() {
      if (this.shouldStack) {
        return {
          width: '100%'
        }
      }

      return {
        minWidth: '0'
      }
    },
    rightStyle() {
      if (this.shouldStack) {
        return {
          width: '100%'
        }
      }

      return {
        minWidth: '0'
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/bill-tokens.scss';

.bill-two-column {
  width: 100%;
  min-width: 0;
  color: $bill-text-primary;
}

.bill-two-column__left,
.bill-two-column__right {
  min-width: 0;
}
</style>
