import {Controls, Canvas, Meta, Source, Story} from '@storybook/blocks';
import '../../stories/styles/shared.css';
import * as ContextualMenuStories from './ContextualMenu.stories';

<Meta of={ContextualMenuStories} />

<div className="header">
  <h1>ContextualMenu</h1>
  <p>L’élément `ContextualMenu` est utilisé pour afficher un menu avec une liste d’ancres pour la navigation.</p>
</div>

<Canvas of={ContextualMenuStories.Default}  />

# API

<Controls of={ContextualMenuStories.Default} />

# Exemple d'utilisation

<Source dark code={`
<script setup lang="ts">
    import { ContextualMenu } from '@cnamts/synapse'
    import { ref } from 'vue'

    const items = [{
        text: 'section 1',
        hash: '#section-1',
    }, {
        text: 'section 2',
        hash: '#section-2',
    }, {
        text: 'section 3',
        hash: '#section-3',
    }, {
        text: 'section 4',
        hash: '#section-4',
    }, {
        text: 'section 5',
        hash: '#section-5',
    }]

    const hash = ref<string | null>
(null)
</script>

<template>
    <div class="wrapper">
        <div class="menu">
            <ContextualMenu
                v-model="hash"
                :items
            />
        </div>
        <div class="content">
            <section id="section-1">
                <h2>section 1</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
                    Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
                </p>
            </section>
            <section id="section-2">
                <h2>section 2</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
                    Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
                </p>
            </section>
            <section id="section-3">
                <h2>section 3</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
                    Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
                </p>
            </section>
            <section id="section-4">
                <h2>section 4</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
                    Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
                </p>
            </section>
            <section id="section-5">
                <h2>section 5</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
                    Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
                </p>
            </section>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  place-items: center;
  height: 100dvh;
  width: 500px;
}
.menu {
  width: 200px;
}
.content {
  border: 1px solid black;
  height: 500px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

section {
  padding: 20px;
}

section p {
  max-width: 300px;
}
</style>
`} />