<template>
    <div class="gba-control-draw btn-group-vertical map-control">
        <!-- <button type="button" class="button is-light is-small" (click)="locateUser()" [ngClass]="isToggled ? 'is-primary': 'is-active'">
      <fa-icon [icon]="faSearchLocation"></fa-icon>
    </button> -->
    <!--  -->
        <button
            ref="inputDraw"
            class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
            type="button"
            :class="[isToggled ? 'cursor-not-allowed bg-gray-200' : 'bg-teal-50 is-active']"
            @click.prevent="draw"
        >
            <BaseIcon v-if="mdiDrawPen" :path="mdiDrawPen" />
        </button>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-facing-decorator';

import BaseIcon from '@/Components/BaseIcon.vue';
import { mdiDrawPen } from '@mdi/js';

@Component({
    name: 'zoom-control',
    components: {
        BaseIcon,
    },
})
export default class DrawControlComponent extends Vue {
    mdiDrawPen = mdiDrawPen;



    /**
     * Connect map id.
     */
    @Prop() public mapId: string;

    public isToggled = false;

    // @Ref('inputDraw') private _inputDraw: HTMLElement;

    public draw() {
        this.isToggled = !this.isToggled;
    }
}
</script>

<style lang="css">
.gba-control-draw {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    border-radius: 4px;
    position: absolute;
    left: 10px;
    top: 100px;
    z-index: 500;
}

.btn-group-vertical button {
    display: block;

    margin-left: 0;
    margin-top: 0.5em;
}
</style>
