<script>
/**
 * EVENTS 
 * @input, for text input changes
 * @change, for select changes
 * 
 * PROPS
 * append: Array or String, side information, showing a select or static text
 * color: String, background color for side information
 * value: String, value of text input
 * 
 * SLOTS
 * default(selected), tiny space between text input and append value. Receives selected value
 * 
 * As usual, v-model joins :value prop and @input event
 */
import SimpleInput from '@/components/simpleinput/SimpleInput';
import { readTransform, writeTransform } from '@/components/simpleinput/MoneyFormat';

export default {
  extends: SimpleInput, 
  props: {
    append: {
      type: [String, Array],
      default: null
    },
    color: {
      type: String,
      default: "lightgrey"
    },
    label: {
      type: String,
      required: false
    },
    prefix: {
      type: String,
      required: false
    },
    precisionMapping: {
      type: Function,
      default: () => 2
    },
    selected: {
      required: false
    }
  },
  data: () => ({
    selection: null
  }),
  computed: {
    precision() {
      let precision = 2;

      if (this.selected) {
        precision = this.precisionMapping(this.selected);
      }

      return precision;
    },
  },
  methods: {
    readTransform(value) {
      return readTransform(this.precision, value);
    },
    writeTransform(value) {
      return writeTransform(this.precision, value);
    }
  },
}
</script>
<template>
  <div class="landing-input" :style="{
    borderWidth: '2px',
    borderStyle: 'solid',
    borderColor: color
  }">
    <div class="input-area">
      <div class="label">
        {{ label }}
      </div>
      <div class="prefix-input">
        <label v-if="prefix" :for="id">{{ prefix }}</label>
        <input :id="id" class="input" type="text" 
        @focus="$emit('focus', $event)"
        @blur="$emit('blur', $event)"
        v-model="model">
      </div>
    </div>
    <div class="suffix" :style="{
      backgroundColor: color
    }">
      <div class="middle">
        <slot :selected="selected"></slot>
      </div>
      <v-select class="append" v-if="Array.isArray(append)" 
      @change="$emit('update:selected', $event); $emit('change', $event)"
      :loading="append.length == 0" 
      :items="append" 
      :value="selected"></v-select>
      <h3 class="append" v-else-if="append !== null">{{ append }}</h3>
    </div>
  </div>
</template>
<style scoped lang="scss">
$padding: 6px;
%flex {
  display: flex;
  padding: 0;
  box-sizing: border-box;
}
%flex-row {
  @extend %flex;
  flex-direction: row;
}
%flex-column {
  @extend %flex;
  flex-direction: column;
}
%flex-center {
  justify-content: center;
  align-items: center;
}
%flex-stretch {
  justify-content: stretch;
  align-items: stretch;
}

.landing-input {
  @extend %flex-row;
  width: auto;
  max-width: 100%;
  background-color: transparent;
  border-radius: 4px;
  padding: 0;
}
.input-area, .suffix {
  padding: $padding;
  flex: 1 1 0;
  width: 0;
}
.input-area {
  @extend %flex-column;
  

  .label {
    flex: 0 0 auto;
    font-size: 2*$padding;
  }
  .prefix-input {
    @extend %flex-row;
    flex: 1 1 100%;

    &> input {
      outline: none;
      flex: 1 1 0;
      width: 0;
    }
    &> label {
      flex: 0 0 auto;
      padding-right: $padding;
    }
    &>* {
      @extend %flex-row;
      align-items: center;
    }
  }
}

.suffix {
  @extend %flex-row;
  
  font-weight: bold;
  color: white;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 180px;

  .middle {
    @extend %flex-row, %flex-center;

    &> *{
      // fallbacks
      width: 35px;
      height: 35px;

      $size: calc(50px - #{2*$padding});
      width: $size;
      height: $size;
    }
  }
}
.append {
  text-align: center;
  flex: 0 0 100px;
  font-size: 1.2em;
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  /deep/ {
    * {
      color: white !important;
    }
    .input-group__details {
      display: none !important;
    }
    .input-group__selections__comma {
      font-size: inherit;
    }
  }
}
</style>
