<template>
    <div>
        <div class="wrapper">
            <label>{{ trans('KMS::properties').required_properties }}</label>
            <table>
                <tbody>
                <tr v-for="displayProperty in this.displayPropertiesForPropertizable(this.iso_2, true)" :class="{ 'u-hidden': (displayProperty.state === 4) }">
                    <td><span :list="keysId">{{ displayProperty.key }}</span></td>
                    <td><input aria-label="property" type="text" :value="displayProperty.value" @input="updatePropertyValue($event, displayProperty)" :list="valuesId" /></td>
                </tr>
                </tbody>
            </table>
        </div>

        <datalist :id="valuesId">
            <option v-for="valueTranslation in this.valueTranslations()" :value="valueTranslation.name"/>
        </datalist>
    </div>
</template>

<style lang="scss" scoped>
    .wrapper {
        margin-top: 16px;
        padding-left: 45px;
    }

    label {
        display: block;
        font-size: .7rem;
        color: #9ba0ae;
        text-transform: uppercase;
        font-weight: 500;
        white-space: nowrap;
        margin: 0;
    }

    table {
        margin-bottom: 8px;
    }

    td {
        &:first-child {
            display: block;
            margin-top: 9px;
            margin-right: 60px;
            font-size: .7rem;
            color: #70778c;
            font-weight: 700;
            text-transform: uppercase;
            white-space: nowrap;
        }
    }

    input[type="text"] {
        min-height: 40px;
        background-color: #fff;
        text-indent: 10px;
        font-size: .7rem;
        z-index: 99999;
        display: block;
        color: #32343a;
        box-sizing: border-box;
        width: 100%;
        max-width: 500px;
        border: 1px solid #d8dae2;
        border-radius: 5px;
        transition: border-color .25s ease-in-out,box-shadow .25s ease-in-out;

        &:focus {
            border-color: #3c8bf5;
            outline: 0;
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), inset 0 0 12px rgba(120,169,236,.3);
        }

    }

    .button {
        display: inline-block;
        height: 40px;
        padding: 0 40px;
        background-color: #3289ff;
        color: #fff;
        font-size: .7rem;
        font-family: Rubik, sans-serif;
        vertical-align: top;
        border-radius: 4px;
        appearance: none;
        border: none;
        cursor: pointer;
        transition: background-color .3s;

        &:hover {
            background-color: #006cfe;
        }
    }

    .button--subtle {
        color: #1d2433;
        background-color: #eceef3;

        &:hover {
            background-color: #d5d9e4;
        }
    }

    .button-row {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
    }

    .new-properties {

    }

    .radio {
        margin-top: 8px;
        margin-bottom: 8px;
    }

</style>

<script>
    import {mapGetters, mapState} from "vuex";
    import PropertyService from "../../../services/propertyService";
    import { States } from "./resources/baseResource";
    import Multiselect from "../forms/multiselect";

    let propertyService = new PropertyService();

    export default {
        components: {
            Multiselect
        },
        props: {
            attributeKey: {
                required: true,
                type: String
            },
            iso_2: {
                required: true,
                type: String
            },
        },
        data: function() {
            return {
            }
        },
        methods: {
            updatePropertyValue(event, property) {
                property.value = event.target.value;
                if(property.state !== States.NEW) property.state = States.DIRTY
                this.$store.commit('properties/updateDisplayProperty', property)
            },
        },
        computed: {
            ...mapGetters({
                trans: "g11n/translation/translation",
                propertiesForPropertizableAsStringyfiedJson: "properties/propertiesForPropertizableAsStringyfiedJson",
                displayPropertiesForPropertizable: "properties/displayPropertiesForPropertizable",
                valueTranslations: "properties/valueTranslations",
            }),
            valuesId: function() {
                return this.attributeKey + '|values'
            },
            keysId: function() {
                return this.attributeKey + '|keys'
            },
        },
    };
</script>