<template>
  <h1>Platform library VueJS BMS</h1>
  <h2>H2 title</h2>
  <h3>H3 title</h3>
  <bms-loader :size="50" :mode="StatusType.Danger" />
  <bms-button>coucou</bms-button>

  <hr />

  <bms-button @click="notifySuccess">Notify Success</bms-button>

  <hr />

  <bms-button @click="notifyError">Notify Error</bms-button>

  <hr />

  <bms-button @click="onConfirm">Confirm Dialog</bms-button>

  <hr />

  <bms-button :to="{ name: 'tabs' }">Navigation vers Tabs w/obj </bms-button>

  <hr />

  <bms-button to="/tabs">Navigation vers Tabs</bms-button>

  <hr />

  <bms-button to="http://google.fr">Navigation vers Extérieur</bms-button>

  <hr />

  <BmsIconButton :mode="StatusType.Danger" tooltipText="Icon tooltip">
    ICON
  </BmsIconButton>

  <hr />

  <BmsIconButton>Normal</BmsIconButton>

  <hr />

  <div class="tooltip-flex">
    <bms-tooltip tooltipText="This is a very large text" direction="top">
      top Tooltip
    </bms-tooltip>
    <bms-tooltip tooltipText="This is a very large text" direction="right">
      right Tooltip
    </bms-tooltip>
    <bms-tooltip tooltipText="This is a very large text" direction="bottom">
      bottom Tooltip
    </bms-tooltip>
    <bms-tooltip tooltipText="This is a very large text" direction="left">
      left Tooltip
    </bms-tooltip>
    <bms-tooltip
      tooltipText="This is a very large text that overflows because it's too much longer"
    >
      Longer tooltip
    </bms-tooltip>
  </div>

  <hr />

  <bms-button @click="modal = !modal">Toggle modal</bms-button>

  <bms-modal v-model="modal" :loading="isLoading" loading-text="Chargement...">
    <p>
      <bms-tooltip tooltipText="Tooltip">Content !</bms-tooltip>
    </p>
    <bms-button @click="isLoading = true">Toggle loading</bms-button>
  </bms-modal>

  <hr />

  <BmsButton submit>Submit</BmsButton>

  <hr />

  <bms-loader></bms-loader>

  <hr />

  <BmsTag @click="onTagClick">
    <Activity />
    message
  </BmsTag>
  <BmsTag @click="onTagClick" :dismissable="false">
    <Activity />
    message
  </BmsTag>
  <BmsTag @click="onTagClick" :active="true">
    <Activity />
    message
  </BmsTag>
  <BmsTag @click="onTagClick" :active="true" :disabled="true">
    <Activity />
    message
  </BmsTag>
  <BmsTag @click="onTagClick" :active="false" :disabled="true">
    <Activity />
    message
  </BmsTag>

  <hr />

  <div class="chips">
    <BmsChip>Content</BmsChip>
    <BmsChip :color="ChipColor.Blue">Content</BmsChip>
    <BmsChip :color="ChipColor.Green">Content</BmsChip>
    <BmsChip :color="ChipColor.Grey">Content</BmsChip>
    <BmsChip :color="ChipColor.Orange">Content</BmsChip>
    <BmsChip :color="ChipColor.Red">Content</BmsChip>
    <BmsChip :color="'tata' as any">Content</BmsChip>
  </div>

  <hr />

  <p>FeatureA is On : {{ isFeatureEnabled('featureA') }}</p>
</template>

<script lang="ts" setup>
import { useNotifications } from '@/plugins/notifications';
import { useConfirm } from '@/plugins/confirm';
import { onMounted, Ref, ref } from 'vue';
import {
  BmsButton,
  BmsIconButton,
  BmsInputText,
  BmsTag,
  ChipColor,
  StatusType,
  useFeatureFlipper,
} from '@/index';
import { Activity } from 'lucide-vue-next';
import BmsChip from '@/components/form/BmsChip.vue';

const { success, error } = useNotifications();
const { isFeatureEnabled } = useFeatureFlipper();
const isLoading = ref(false);
const modal = ref(false);
const text = ref('');
const selected = ref('');
const { confirm } = useConfirm();
const files: Ref<File[]> = ref([]);
const inputText0 = ref(null);
const dateTime = ref('');

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 onSubmit = (e: any) => {
  e.preventDefault();
  success(text.value + ' ' + selected.value);
};

const notifySuccess = () => {
  success('This is a success', 'This is a details message');
};

const notifyError = () => {
  error(
    'This is an error This is an error This is an error This is an error This is an error This is an error This is an error',
    {
      type: 'https://problems.bms.live/fake-problem/bo/loop-problem',
      title: '[FAKE] Une boucle de redirection a été detectée',
      status: 400,
      loop: '/ -> /another-url -> /',
    } as any,
  );
};

const onConfirm = async () => {
  if (await confirm('Coucou', 'This is an optional confirm title')) {
    console.log('it was confirmed');
  } else {
    console.log('it was discard');
  }
};

const onTagClick = () => {
  console.log('tag clicked');
};
</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>
