<template>
    <div class="checkbox">
        <input type="checkbox" :checked="value" ref="input" @change="change()" :id="name">
        <label :for="name">
            <span class="checkbox">
                <img :src="checkboxIconSrc">
            </span>
            <span class="tick">
                <img :src="tickIconSrc">
            </span>
        </label>
    </div>
</template>

<script>
    import CheckboxSvg from '../../img/icons/checkbox.svg'
    import TickSvg from '../../img/icons/tick.svg'


    export default {
        props: {
            value: Boolean,
            name: {
                type: String,
                default: "idCheckbox"
            }
        },
        data() {
            return {
                checkboxIconSrc: CheckboxSvg,
                tickIconSrc: TickSvg
            }
        },
        methods: {
            ready() {
                if(this.value) {
                    this.$refs.input.checked = true;
                }
            },
            change() {
                const checked = this.$refs.input.checked;
                this.$emit('input', checked);
                if(checked) {
                    this.$emit('checked');
                } else {
                    this.$emit('unchecked');
                }

            }
        },
        mounted() {
            this.ready();
        }
    }
</script>

<style lang="scss" scoped>
    .checkbox {
        width: 18px;
        height: 18px;

        label {
            width: 18px;
            height: 18px;
            margin-bottom: 0;
        }
    }

    input {
        &:not(:checked), &:checked {
            position: absolute;
            left: -9999px;

            &+label {
                display: block;
                position: relative;
                cursor: pointer;

                .checkbox, .tick {
                    display: block;
                    position: absolute;
                    line-height: 1;
                }

                .checkbox {
                    left: 0;
                    top: 0;
                    width: 18px;
                    height: 18px;
                }

                .tick {
                    left: 0;
                    top: -2px;
                    width: 13px;
                    height: 13px;
                }
            }
        }

        &:not(:checked) {
            &+label {
                .tick {
                    opacity: 0;
                }
            }
        }

        &:checked {
            &+label {
                .tick {
                    opacity: 1;
                }
            }
        }
    }
</style>