<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%3A95549&mode=dev" target="_blank">Дизайн</a>
 * </p>
 */

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

  setup(props) {
    return () => (
      <div class="ark-ui-radiobutton-box">
        <div
          class={`ark-ui-radiobutton ${props.modelValue ? 'is-active' : ''} ${props.isDisabled ? 'is-disabled' : ''}`}
          onClick={props.onValueChange}
        >
          <div class="ark-ui-radiobutton-inner"/>
        </div>
        {props.text
            && <p class="ark-ui-radiobutton-text">{props.text}</p>
        }
      </div>
    )
  },
})
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';

.ark-ui-radiobutton-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;

  .ark-ui-radiobutton {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 18px;
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    cursor: pointer;
    border-radius: 12px;
    border: 1px solid #A3A7B9;

    .ark-ui-radiobutton-inner {
      height: 10px;
      width: 10px;
      min-width: 10px;
      transition: 0.4s;
      border-radius: 8px;
      background: white;
    }

    &.is-active {
      border: 2px solid #77D6DF;

      .ark-ui-radiobutton-inner {
        background: #77D6DF;
      }
    }

    &.is-disabled {
      border: 1px solid #D3D5E5;
      pointer-events: none;
      background: #F6F6FA;

      .ark-ui-radiobutton-inner {
        background: #F6F6FA;
      }
    }
  }

  .ark-ui-radiobutton-text {
    color: #27282E;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    margin: 0;
  }
}
</style>
