export default {
    props: {
        flex: {
            type: Boolean,
            default: false
        },
        weight: {
          type: Number
        },
        direction: {
            type: String,
            default: 'column'
        },
        position: {
            type: Object
        },
        zIndex: {
            type: [Number, String]
        },
        width: {
            type: [Number, String]
        },
        height: {
            type: [Number, String]
        },
        padding: {
            type: Boolean,
            default: false
        },
        backgroundImage: {
            type: String,
        },
        backgroundColor: {
            type: String
        }
    },
    computed: {
        commonContainerClasses () {
          const classes = [];

          if (this.padding) {
              classes.push('content-padding');
          }
          if (this.flex) {
              classes.push('flex');
          }
          return classes;
        },
        commonContainerStyles () {
            const styles = {};

            if (this.zIndex) {
                styles.zIndex = this.zIndex;
            }
            if (this.width !== null && this.width !== undefined) {
                styles.width = this.width;
            }
            if (this.height !== null && this.height !== undefined) {
                styles.height = this.height;
            }
            if (this.position) {
                styles.position = 'absolute';
                if (this.position.left !== null && this.position.left !== undefined) {
                    styles.left = this.position.left + 'px';
                }
                if (this.position.right !== null && this.position.right !== undefined) {
                    styles.right = this.position.right + 'px';
                }
                if (this.position.top !== null && this.position.top !== undefined) {
                    styles.top = this.position.top + 'px';
                }
                if (this.position.bottom !== null && this.position.bottom !== undefined) {
                    styles.bottom = this.position.bottom + 'px';
                }
            }
            if (this.flex) {
                styles.display = 'flex';
                if (this.direction) {
                    styles['flex-direction'] = this.direction;
                }
            }
            if (this.weight) {
                styles.flex = this.weight;
            }
            if (this.backgroundImage) {
                styles.backgroundImage = `url(${this.backgroundImage})`;
            }
            if (this.backgroundColor) {
                styles.backgroundColor = this.backgroundColor;
            }
            return styles;
        }
    }
}
