import { Meta, Story, Primary } from '@storybook/addon-docs';
import * as Stories from '../MonthPicker.stories.ts';
import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
import {
	AccessibilityGuideLayout,
	CriteriaSection,
	CriteriaCard,
	DemoSection,
	BestPracticesSection,
	ResourcesSection,
} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';

<Meta of={Stories} />

<AccessibilityGuideLayout
    componentName="MonthPicker"
    iconSrc={AccessibilityIcon}
    apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/datepicker/examples/datepicker-month/"
>
    <CriteriaSection>
        <CriteriaCard icon="🔤" title="Labels accessibles">
            <ul>
                <li><strong>Selection du mois</strong> : les boutons de selection de mois sont affichés sous forme de abrégé, une alternative complète est fournie pour les lecteurs d'écran.</li>
                <li><strong>Bouton d'ouverture du picker</strong> : Le bouton toggle d'ouverture du picker affiché sous forme d'icône possède un label accessible décrivant son action.</li>
            </ul>
        </CriteriaCard>
        <CriteriaCard icon="🔍" title="Structure sémantique">
            <ul>
                <li><strong>Rôles ARIA appropriés</strong> : Utilisation de rôles <code>role="grid"</code> pour les grilles de sélection des mois et années.</li>
                <li><strong>Relations entre éléments</strong> : Connexion entre le bouton d'ouverture et la grille de mois via <code>aria-expanded</code>, <code>aria-controls</code> et <code>aria-haspopup</code>.</li>

            </ul>
        </CriteriaCard>
        <CriteriaCard icon="⌨️" title="Navigation clavier complète">
            <ul>
                <li><strong>Touches Espace et Entrée</strong> : Pour ouvrir/fermer le picker et sélectionner un mois, une année.</li>
                <li><strong>Touches fléchées</strong> : Navigation entre les mois (↑, ↓, ←, →)</li>
            </ul>
        </CriteriaCard>

        <DemoSection componentName="MonthPicker">
            <Primary />
        </DemoSection>

        <BestPracticesSection>
            <ul>
                <li><strong>Labels clairs</strong> : Utiliser des labels explicites pour le champ afin de faciliter la compréhension de sa fonction.</li>
                <li><strong>Gestion des erreurs</strong> : Fournir des messages d'erreur explicites en cas de sélection invalide.</li>
            </ul>
        </BestPracticesSection>

        <ResourcesSection>
            <ul>
                <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/" target="_blank" rel="noopener noreferrer">Guide de conception de datepicker</a></li>
                <li><a href="https://material.angular.dev/components/datepicker/overview" target="_blank" rel="noopener noreferrer">Exemple de datepicker</a></li>
            </ul>
        </ResourcesSection>
    </CriteriaSection>
</AccessibilityGuideLayout>