<template>
  <label class="ns-checkbox" :class="{ 'nsc-enabled': enabled }" :style="{ 'display': inline ? 'inline-flex' : '', 'line-height': size + 'px' }">
    <span class="nsc-input" :style="{ width: size + 'px', height: size + 'px' }">
      <input type="checkbox" :disabled="!enabled" :value="value" @input="$emit('input', $event.target.checked)" />
      <span class="nsc-icon" :style="{ 'background-color': value ? boxColor : 'transparent', 'border-color': boxColor }">
        <NsIcon class="nsc-icon-check" :icon-name="iconName" :color="textColor" />
      </span>
    </span>
    <span v-if="$slots.label">
      <slot name="label"></slot>
    </span>
  </label>
</template>

<script>

import { NsIcon } from '@nuskin/ns-icon';

export default {
  name: 'ns-checkbox',
  components: {
    NsIcon
  },
  props: {
    boxColor: {
      type: String,
      default: '#000000'
    },
    textColor: {
      type: String,
      default: '#FFFFFF'
    },
    enabled: {
      type: Boolean,
      default: true
    },
    iconName: {
      type: String,
      default: 'icon-checkmark'
    },
    inline: {
      type: Boolean,
      default: false
    },
    size: {
      type: Number,
      default: 24
    },
    /**
     * Indicates if the checkbox is checked.
     */
    value: {
      type: Boolean,
      default: false
    }
  }
}

</script>

<style lang="scss" scoped>

@use "sass:map";
@use '~@nuskin/ns-core-styles/src/scss/colors';

$background-color: #FFFFFF;

$transition-duration: 250ms;
$transition-function: ease-in-out;

.ns-checkbox {
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  margin: 0;
  padding: 0;

  input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
  }

  .nsc-input {
    user-select: none;
    opacity: 0.25;
    display: inline-block;
    flex-grow: 0;
    flex-shrink: 0;
    overflow: visible;
    position: relative;
    margin-right: 0.50em;
  }

  .nsc-icon {
    transition: background-color $transition-duration $transition-function;

    display: inline-flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;

    .nsc-icon-check {
      transition: opacity $transition-duration $transition-function;

      opacity: 0;
      width: 83.33%;
      height: 83.33%;
    }
  }

  &.nsc-enabled {
    .nsc-input {
      opacity: 1;
    }

    input[type="checkbox"]:checked ~ .nsc-icon .nsc-icon-check {
      opacity: 1;
    }
  }
}

</style>
