<template>
  <div
    class="playlist-input"
    @keydown.enter="$emit('submit')"
  >
    <UiInput
      v-model="name"
      :placeholder="placeholder"
      :error="error"
      @update:error="$emit('update:error', $event)"
    />
    <button
      type="button"
      class="playlist-input__back"
      @click="$emit('close')"
    >
      <UiIcon
        name="close"
        size="20"
      />
    </button>
    <PlaylistVisibility
      v-model="currentType"
      class="playlist-input__visibility"
    />
  </div>
</template>

<script setup lang="ts">
import type { PlaylistType } from '../../runtime';

const props = withDefaults(defineProps<{
  modelValue: string
  type: PlaylistType
  error?: boolean
  placeholder?: string
}>(), {
  error: false,
  placeholder: '',
});

const emit = defineEmits<{
  (eventName: 'update:modelValue', value: string): void
  (eventName: 'update:type', value: PlaylistType): void
  (eventName: 'update:error', value: boolean): void
  (eventName: 'close'): void
  (eventName: 'submit'): void
}>();

const name = computed({
  get: () => props.modelValue,
  set: (val: string) => emit('update:modelValue', val),
});

const currentType = computed({
  get: () => props.type,
  set: (val: PlaylistType) => emit('update:type', val),
});
</script>

<style lang="scss">
.playlist-input {
  padding: 16px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px;
}

.playlist-input .ui-input {
  --input-bg: #{$playlist-input-bg};
}

.playlist-input .ui-input__input {
  @include from-br(sm) {
    padding-block: 12px;
  }
}

.playlist-input__visibility {
  grid-column: 1;
  margin-top: 12px;
}

.playlist-input__back {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border-radius: $radius-12;
  color: $playlist-input-back;
  background-color: $playlist-input-back-bg;

  @include hover(background-color, color) {
    color: $playlist-input-back--hover;
    background-color: $playlist-input-back-bg--hover;
  }
}

</style>
