<template>
  <BmsBackButton :fallback="{ path: '/' }" />
  <h1>Platform library VueJS BMS</h1>
  <h2>Composant de formulaire</h2>

  <bms-input-file label="input" v-model="files"></bms-input-file>

  <hr />

  <BmsInputRadio
    :captions="['this is a true caption', 'and an other one']"
    label="label"
    name="label"
    value="toto"
    v-model="selectedRadio"
  />
  <BmsInputRadio
    :captions="['this is a true caption']"
    label="label"
    name="label"
    value="tutu"
    v-model="selectedRadio"
  />
  <BmsInputRadio
    :captions="['titi']"
    value="titi"
    name="label"
    v-model="selectedRadio"
    isError
  >
    <template #label>This is a slot label</template>
  </BmsInputRadio>

  <hr />

  <BmsInputRadioGroup
    label="Radio Buttons"
    v-model="selectedRadio2"
    :values="[
      { value: 'titi', label: 'Titi' },
      { value: 'toto', label: 'Toto' },
    ]"
    align="column"
    :captions="['this is a question']"
    :errors="['Prout']"
  />

  <hr />

  <BmsInputRadioCaption
    v-model="thirdSelectedRadio"
    label="Radio with caption toto"
    value="toto"
    name="nameSelect"
    :captions="['Un caption']"
  />
  <BmsInputRadioCaption
    v-model="thirdSelectedRadio"
    label="Radio with caption titi"
    value="titi"
    name="nameSelect"
    :captions="['Un caption']"
  />

  <hr />

  <BmsInputRadioGroup
    label="Radio Buttons"
    v-model="otherSelectedRadio"
    align="column"
    :captions="['this is a question']"
    required
  >
    <template #default>
      <BmsInputRadio
        v-model="otherSelectedRadio"
        required
        name="aName"
        value="titi"
      >
        <template #label>
          <div>titi</div>
        </template>
      </BmsInputRadio>
      <BmsInputRadio
        v-model="otherSelectedRadio"
        required
        name="aName"
        value="toto"
      >
        <template #label>
          <div>toto</div>
        </template>
      </BmsInputRadio>
    </template>
  </BmsInputRadioGroup>

  <hr />

  <BmsInputRadioCaptionGroup
    label="Radio Buttons"
    v-model="fourthSelectedRadio"
    :options="[
      { value: 'tata', label: 'Tata', captions: ['Caption'] },
      { value: 'titi', label: 'Titi', captions: ['Caption'] },
      { value: 'toto', label: 'Toto', captions: ['Caption'] },
      { value: 'tutu', captions: ['Caption'] },
    ]"
    align="column"
    :captions="['this is a question']"
    required
  />
  <hr />

  <BmsInputToggle name="toggle0" label="Toggle" v-model="firstToggle" />

  <p>Toggle Value : {{ firstToggle }}</p>

  <hr />

  <BmsInputBooleanCheckbox
    name="checkbox0"
    labelValue="IsToto"
    v-model="firstCheckbox"
  />

  <BmsInputBooleanCheckbox
    label="checkbox"
    name="checkbox0"
    labelValue="IsToto"
    v-model="firstCheckbox"
  />
  <p>CheckBox Value : {{ firstCheckbox }}</p>

  <hr />

  <BmsInputCheckboxGroup
    label="Checkbox Buttons"
    v-model="secondCheckbox"
    :values="[
      { value: 'titi', label: 'Titi' },
      { value: 'toto', label: 'Toto' },
    ]"
    align="column"
    :captions="['this is a question']"
    :errors="['Prout']"
  />
  <p>Checked Values : {{ secondCheckbox }}</p>

  <hr />

  <BmsInputCheckboxCaption
    v-model="thirdCheckbox"
    label="Radio with caption toto"
    name="thirdCheckbox"
    :captions="['Un caption']"
  />
  <p>Checked Values : {{ thirdCheckbox }}</p>

  <hr />

  <BmsInputCheckboxCaption
    v-model="fourthCheckbox"
    label="Radio with caption toto"
    value="toto"
    name="fourthCheckbox"
    :captions="['Un caption']"
  />
  <BmsInputCheckboxCaption
    v-model="fourthCheckbox"
    label="Radio with caption titi"
    value="titi"
    name="fourthCheckbox"
    :captions="['Un caption']"
  />
  <p>Checked Values : {{ fourthCheckbox }}</p>

  <hr />

  <BmsInputCheckboxCaption
    v-model="fourthCheckbox"
    label="Radio with caption toto"
    value="toto"
    name="fourthCheckbox"
    :captions="['Un caption']"
  />
  <BmsInputCheckboxCaption
    v-model="fourthCheckbox"
    label="Radio with caption titi"
    value="titi"
    name="fourthCheckbox"
    :captions="['Un caption']"
  />
  <p>Checked Values : {{ fourthCheckbox }}</p>

  <hr />

  <BmsInputCheckboxCaptionGroup
    label="Checkbox Buttons"
    v-model="fifthCheckbox"
    :options="[
      { value: 'tata', label: 'Tata', captions: ['Caption'] },
      { value: 'titi', label: 'Titi', captions: ['Caption'] },
      { value: 'toto', label: 'Toto', captions: ['Caption'] },
      { value: 'tutu', captions: ['Caption'] },
    ]"
    align="column"
    :captions="['this is a question']"
    required
  />
  <p>Checked Values : {{ fifthCheckbox }}</p>

  <hr />

  <BmsInputDateTime v-model="date" label="Date" :has-time="false" />
  <BmsInputDateTime v-model="dateTime" label="Date & Time" />
  <form @submit="onSubmit">
    <BmsInputText
      ref="inputText0"
      label="input"
      required
      v-model="text"
      placeholder="This is a placeholder"
    />

    <hr />

    <BmsInputText
      ref="inputText1"
      label="input whith form validation"
      required
      v-model="text2"
      :captions="captionsText2"
      @blur="onBlurMyInputText"
      placeholder="This is a placeholder in url format"
    />

    <hr />

    <BmsSelect
      label="select"
      required
      @select="console.log('BmsSelect - select', $event)"
      v-model="selected"
      placeholder="This is a placeholder"
      :options="[{ label: 'value1', value: 'value1' }]"
    />

    <hr />

    <BmsSelect
      label="select 2"
      required
      v-model="selected2"
      placeholder="This is a placeholder"
      :options="[{ label: 'value3', value: 'value4' }]"
    />

    <hr />

    <BmsMultiSelect
      label="multi select"
      required
      placeholder="This is a placeholder"
      v-model="multiSelect"
      @select="console.log('BmsMultiSelect - select', $event)"
      @input="console.log('BmsMultiSelect - input', $event)"
      :options="[
        { label: 'toto1', value: 'value1', icon: BellIcon },
        { label: 'titi2', value: 'value2', icon: Magnet },
        { label: 'toto3', value: 'value3', icon: Egg },
        { label: 'toto4', value: 'value4', icon: Egg },
        { label: 'toto5', value: 'value5', icon: Egg },
        { label: 'toto6', value: 'value6', icon: Egg },
        { label: 'toto7', value: 'value7', icon: Egg },
        { label: 'toto8', value: 'value8', icon: Egg },
        { label: 'toto9', value: 'value9', icon: Egg },
      ]"
    />

    <hr />

    <BmsTextArea
      label="textArea"
      required
      placeholder="This is a placeholder"
      :model-value="''"
    />

    <hr />

    <BmsAutocomplete
      label="autocomplete"
      placeholder="This is a placeholder"
      required
      v-model="auto"
      @select="console.log('BmsAutocomplete - select', $event)"
      @input="console.log('BmsAutocomplete - input', $event)"
      :options="[
        { label: 'value1', value: '1' },
        { label: 'value2', value: '2' },
        { label: 'value3', value: '3' },
      ]"
    />
    <BmsInputNumber label="Chiffre" v-model="nbr" :min="5" :max="15" />

    <hr />

    <BmsInputCode
      label="code"
      v-model="code"
      required
      type="json"
      :captions="['caption 1']"
    />
    {{ code }}
    <hr />

    <BmsForm>
      <template #form>
        <BmsInputText label="champ" model-value="This is a cool value" disabled>
          <template #icon-end>
            <BmsIconButton @click="coucou">
              <Copy />
            </BmsIconButton>
          </template>
        </BmsInputText>
      </template>
    </BmsForm>
    <hr />

    <h2>Small components</h2>
    <BmsInputText label="Text" small v-model="text" />
    <BmsInputBooleanCheckbox
      label="Boolean checkbox"
      label-value="Yes"
      name="boolean"
      small
      v-model="firstToggle"
    />
    <BmsSelect
      label="Select"
      small
      v-model="selected"
      :options="[
        { label: 'value1', value: 'value1' },
        { label: 'value2', value: 'value2' },
      ]"
    />
    <BmsTextArea label="Textarea" small v-model="text2" />
    <BmsInputToggle
      name="toggle-name"
      label="Toggle"
      label-value="Yes"
      small
      v-model="firstToggle"
    />
    <hr />

    <BmsButton submit>Submit</BmsButton>
  </form>
</template>

<script lang="ts" setup>
import { useNotifications } from '@/plugins/notifications';
import { onMounted, Ref, ref } from 'vue';
import {
  BmsAutocomplete,
  BmsBackButton,
  BmsButton,
  BmsForm,
  BmsInputBooleanCheckbox,
  BmsInputCode,
  BmsInputFile,
  BmsInputNumber,
  BmsInputText,
  BmsSelect,
  BmsTextArea,
  StatusType,
} from '@/index';
import BmsInputToggle from '@/components/form/BmsInputToggle.vue';
import BmsInputRadio from '@/components/form/BmsInputRadio.vue';
import BmsInputRadioGroup from '@/components/form/BmsInputRadioGroup.vue';
import BmsInputRadioCaption from '@/components/form/BmsInputRadioCaption.vue';
import BmsInputRadioCaptionGroup from '@/components/form/BmsInputRadioCaptionGroup.vue';
import BmsInputDateTime from '@/components/form/BmsInputDateTime.vue';
import BmsInputCheckboxGroup from '@/components/form/BmsInputCheckboxGroup.vue';
import BmsInputCheckboxCaption from '@/components/form/BmsInputCheckboxCaption.vue';
import BmsInputCheckboxCaptionGroup from '@/components/form/BmsInputCheckboxCaptionGroup.vue';
import { Copy, BellIcon, Egg, Magnet } from 'lucide-vue-next';
import BmsIconButton from '@/components/button/BmsIconButton.vue';
import { BMS_FORM_VALID_URL_REGEX } from '@/helpers/form.helper';
import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';

const { success } = useNotifications();
const text = ref('');
const text2 = ref('');
const captionsText2 = ref();
const selected = ref('value1');
const selected2 = ref('');
const multiSelect = ref([]);
const files: Ref<File[]> = ref([]);
const selectedRadio = ref('titi');
const selectedRadio2 = ref('titi');
const otherSelectedRadio = ref('toto');
const thirdSelectedRadio = ref('titi');
const fourthSelectedRadio = ref('toto');
const firstCheckbox = ref([]);
const firstToggle = ref(false);
const secondCheckbox = ref([]);
const thirdCheckbox = ref(false);
const fourthCheckbox = ref([]);
const fifthCheckbox = ref([]);
const nbr = ref(10);
const inputText0 = ref(null);
const dateTime = ref('');
const date = ref('');
const code = ref('');
const auto = ref<string | undefined>(undefined);

onMounted(async () => {
  const response = await fetch(
    'https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png',
  );
  const blob = await response.blob();
  files.value = [
    new File([blob], 'image.jpeg', {
      type: blob.type,
    }),
  ];
  if (inputText0.value) {
    (inputText0.value as typeof BmsInputText).setFocus();
  }
});

const coucou = () => {
  console.log('coucou');
  alert('coucou');
};

const onSubmit = (e: any) => {
  e.preventDefault();
  success(text.value + ' ' + selected.value);
};

const onBlurMyInputText = () => {
  if (!text2.value || BMS_FORM_VALID_URL_REGEX.test(text2.value)) {
    captionsText2.value = [];
  } else {
    captionsText2.value = [
      { label: 'Veuillez entrer une URL valide', mode: StatusType.Warning },
    ];
  }
};
</script>

<style lang="scss" scoped>
.tooltip-flex {
  display: flex;
  gap: 16px;
}

.chips {
  display: flex;
  gap: 8px;
}

hr {
  border: none;
  border-top: 3px double var(--bms-grey-140);
  color: var(--bms-grey-140);
  overflow: visible;
  text-align: center;
  height: 5px;
}
</style>
