<script setup lang="ts">
import { useCopy } from '@/composable/copy';

const inputValue = ref('');
const outputValue = ref('');
const { copy } = useCopy({ source: outputValue, text: 'Output copied to the clipboard' });

function toSentenceCase(input: string) {
  return input.replace(/.+?[\.\?\!](\s|$)/g, (sentence) => {
    return sentence.charAt(0).toUpperCase() + sentence.substr(1).toLowerCase();
  });
}
function toTitleCase(input: string) {
  return input.toLowerCase().replace(/\b\w/g, char => char.toUpperCase());
}

function toMixedCase(input: string) {
  return input.split('').map((char, index) => {
    return index % 2 === 0 ? char.toUpperCase() : char.toLowerCase();
  }).join('');
}

function toInverseCase(input: string) {
  return input.split('').map((char) => {
    return char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase();
  }).join('');
}
function handleCaseChange(type: string) {
  switch (type) {
    case 'sentence':
      outputValue.value = toSentenceCase(inputValue.value);
      break;
    case 'upper':
      outputValue.value = inputValue.value.toUpperCase();
      break;
    case 'lower':
      outputValue.value = inputValue.value.toLowerCase();
      break;
    case 'title':
      outputValue.value = toTitleCase(inputValue.value);
      break;
    case 'mixed':
      outputValue.value = toMixedCase(inputValue.value);
      break;
    case 'inverse':
      outputValue.value = toInverseCase(inputValue.value);
      break;
  }
}
</script>

<template>
  <div>
    <c-input-text
      v-model:value="inputValue" label="Input" rows="3" placeholder="Enter your text..." multiline monospace
      autosize mt-5
    />
  </div>

  <div flex>
    <div flex flex-wrap gap-5>
      <c-button @click="() => handleCaseChange('sentence')">
        Sentence case
      </c-button>
      <c-button @click="() => handleCaseChange('upper')">
        UPPER CASE
      </c-button>
      <c-button @click="() => handleCaseChange('lower')">
        lower case
      </c-button>
      <c-button @click="() => handleCaseChange('title')">
        Title Case
      </c-button>
      <c-button @click="() => handleCaseChange('mixed')">
        MiXeD CaSe
      </c-button>
      <c-button @click="() => handleCaseChange('inverse')">
        iNvErSecAsE
      </c-button>
    </div>

    <div flex justify-center gap-3>
      <c-button autofocus @click="() => inputValue = ''">
        Reset
      </c-button>
    </div>
  </div>
  <c-input-text :value="outputValue" rows="3" label="Output" readonly multiline monospace autosize mt-5 />
  <div mt-5 flex justify-center>
    <c-button @click="copy()">
      Copy Output
    </c-button>
  </div>
</template>
