<template>
    <div>
        <div>
            <v-list dense shaped subheader>

                <v-list-item>
                    <v-list-item-content>
                        <v-autocomplete
                                class="vselect"
                                :items="lists.top"
                                v-model="selected"
                                label="Countries"
                                outlined
                                dense
                                hide-details
                        ></v-autocomplete>
                    </v-list-item-content>
                </v-list-item>


                <v-list-item v-for="(cinfo,id) in configs.selected" :key="id" class="countryLine">
                    <v-list-item-action>
                        <v-btn fab dark x-small
                               @click="removeCountry(cinfo.name)">
                            <v-icon dark>mdi-close</v-icon>
                        </v-btn>
                    </v-list-item-action>

                    <v-list-item-content>
                        <v-list-item-title>
                            <v-chip :style="{background:cinfo.color}"><span> &nbsp; </span></v-chip>
                            {{cinfo.name}}
                        </v-list-item-title>
                    </v-list-item-content>
                </v-list-item>

            </v-list>

        </div>

    </div>
</template>

<script>

    import Palette from './html/Palette'
    import {getPalette} from '../libs/thpalette'
    import SelectO from './html/SelectO'

    Palette, SelectO

    export default {
        name: "CountriesConfig",
        props: ['lists', 'configs'],
        components: {},
        data() {
            return {
                addCountry: false,
                selected: '',
                // TODO : change the base list used for countries
            }
        },
        created() {
            this.setColors();
        },
        watch: {
            selected() {
                if (this.selected === '') return   // prevent the reset in this function
                if (this.configs.selected.map(d => d.name).indexOf(this.selected) === -1) {
                    this.configs.selected.push({name: this.selected})
                    this.setColors()
                }
                this.addCountry = !this.addCountry
                this.selected = ''
            }
        },
        methods: {
            setColors() {
                let colors = getPalette(this.configs.basePalette, this.configs.selected.length)
                this.configs.selected = this.configs.selected.map((d, i) => {
                    d.color = colors[i]
                    return d
                })
            },
            addCountryClick() {
                this.addCountry = !this.addCountry
            },
            removeCountry(country) {
                this.configs.selected = this.configs.selected.filter(d => d.name !== country)
            },
        },
        computed: {
            getActiveCountries() {
                // TODO filter out selected countries
                return []
            }
        },

    }
</script>

<style scoped>

    .countryLine {
        display: flex;
    }

    .countryItem {
        display: inline-block;
        width: 70px;
        padding-left: 3px;
    }

    .countryBtn {
        line-height: 15px;
        width: 20px;
        text-align: center;
        padding: 0px;
    }

    .countryColor {
        display: inline-block;
        border: 1px solid #2c3e50;
        border-radius: 10px;
        width: 15px;
        height: 15px;
        margin: 2px 7px 0px 2px;
    }

    .countryLine .v-list-item__action {
        margin: 2px;
    }

    .countryLine .v-list-item__content {
        padding: 2px;
    }

    .countryLine .v-btn {
        width: 20px;
        height: 20px;
        font-size: 8px;
    }

    .countryLine .v-chip {
        height: 20px;
        font-size: 8px;
    }

    .countryLine.v-list-item {
        min-height: 24px;
        font-size: 8px;
    }


</style>

