<template>
  <SettingsItem :label="label">
    <template #default>
      <InputGroup v-if="allowCopy && isSupported">
        <Button
          :key="copied ? 'copied' : 'copy'"
          :icon="copied ? 'fa fa-check' : 'fa fa-copy'"
          severity="secondary"
          v-tooltip.top="{ value: copied ? 'Скопировано' : 'Скопировать' }"
          @click="copyToClipboard"
        />
        <InputText
          :type="type"
          v-model="model"
          class="form-control"
          :placeholder="placeholder"
          :readonly="readonly"
        />
      </InputGroup>

      <InputText
        v-else
        :type="type"
        v-model="model"
        class="form-control"
        :placeholder="placeholder"
        :readonly="readonly"
      />
    </template>
    <template #help>
      <slot></slot>
    </template>
  </SettingsItem>
</template>

<script setup>
import SettingsItem from "@/components/SettingsItem.vue";
import InputText from 'primevue/inputtext';
import InputGroup from 'primevue/inputgroup';
import Button from 'primevue/button';
import { useClipboard } from '@vueuse/core';

const props = defineProps({
  label: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: 'Введите значение'
  },
  type: {
    type: String,
    default: 'text',
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  allowCopy: {
    type: Boolean,
    default: false,
  },
});
const model = defineModel();

const { copy, copied, isSupported } = useClipboard({ source: model })

function copyToClipboard() {
  copy();
}
</script>
