<script lang="tsx">
import { defineComponent, type PropType } from 'vue'

/**
 * Пользовательский компонент для отображения и управления состоянием элемента - выбран он или нет.
 * <p>
 *   <a href="https://www.figma.com/file/Q4Z4CnFx4i0qhD5fbgnPpf/%F0%9F%92%BB-%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0-ARK-SPACE?type=design&node-id=6241%3A95548&mode=dev" target="_blank">Дизайн</a>
 * </p>
 */

export default defineComponent({
  props: {
    /**
     * Флаг, указывающий, отключен ли чекбокс
     */
    isDisabled: {
      type: Boolean,
      default: false,
    },
    /**
     * Состояние чекбокса (выбрано/не выбрано)
     */
    modelValue: {
      type: Boolean,
      required: true,
    },
    /**
     * Функция, вызываемая при клике на чекбокс
     */
    onValueChange: {
      type: Function as PropType<() => void>,
      required: true,
    },
  },

  setup(props) {
    const changeValue = () => {
      if (props.isDisabled) return

      if (props.onValueChange) props.onValueChange()
    }

    return () => (
      <div
        class={`ark-ui-checkbox ${props.modelValue ? 'is-active' : ''} ${props.isDisabled ? 'is-disabled' : ''}`}
        onClick={changeValue}
      />
    )
  },
})
</script>

<style lang="scss" scoped>
.ark-ui-checkbox {
  width: 16px;
  min-width: 16px;
  height: 16px;
  background: url('./../../assets/checkbox.svg') center center no-repeat;

  &.is-active {
    background-image: url('./../../assets/checkbox-is-active.svg');
    background-repeat: no-repeat
  }

  &.is-disabled {
    background-image: url('./../../assets/checkbox-is-disabled.svg');
    background-repeat: no-repeat;

    &.is-active {
      background-image: url('./../../assets/checkbox-is-active-and-disabled.svg');
      background-repeat: no-repeat;
    }
  }
}
</style>
