import BaseButton from '@elements/BaseButton/index.vue';

export default {
  name: 'BaseAspectRatio',
  components: {
    BaseButton,
  },
  props: {
    nameWidth: {
      type: String,
    },
    nameHeight: {
      type: String,
    },
    minRange: {
      type: Number | String,
    },
    maxRange: {
      type: Number | String,
    },
    fixedWidth: {
      type: Number | String,
    },
    fixedHeight: {
      type: Number | String,
    },
    initalWidth: {
      type: Number | String,
    },
    initalHeight: {
      type: Number | String,
    },
    label: {
      type: String,
    },
    description: {
      type: String,
    },
    required: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      width: this.fixedWidth || this.initalWidth || 0,
      height: this.fixedHeight || this.initalHeight || 0,
    };
  },
  methods: {
    onChangeAspectRadio(proportion) {
      const [first, second] = proportion.split(':');
      proportion = Number(second) / Number(first);

      if (this.fixedWidth) {
        this.height = parseInt(proportion * this.width);
      }

      if (this.fixedHeight) {
        console.log('fixedHeight');
        this.width = parseInt(proportion * this.height);
      }

      if (!this.fixedWidth && !this.fixedHeight) {
        const newHeight = parseInt(proportion * this.width);

        this.height = newHeight > this.maxRange ? this.maxRange : newHeight;
      }

      this.onEmitProportion();
    },
    onEmitProportion() {
      this.$emit('width', Number(this.width));
      this.$emit('height', Number(this.height));
    },
  },
};
