<commit_before>import React, { useState, useEffect } from 'react';
import { GetStaticProps, GetStaticPaths } from 'next';
import RichReactMarkdown from '../../../components/richReactMarkdown';
import { logParcoursDemandeAcces } from '../../../utils/client/analytics';

import {
  getAPI,
  getAllAPIs,
  IAccessCondition,
  IAccessConditionWithVisitorType,
  ELIGIBLE,
} from '../../../model';
import Page from '../../../layouts';

import { HEADER_PAGE } from '../../../components';

import { MultiChoice } from '../../../uiComponents';
import Loader from '../../../uiComponents/loader';

interface IAccessConditionOption extends IAccessCondition {
  label: string;
  value: string;
}

interface IProps {
  title: string;
  slug: string;
  accessConditionOptions: IAccessConditionOption[];
}

const IsEligible: React.FC<{ isEligible: ELIGIBLE }> = ({ isEligible }) => {
  switch (isEligible) {
    case ELIGIBLE.YES:
      return (
        <>
          Vous êtes éligible{' '}
          <span role="img" aria-label="émoji oui">
            👌
          </span>
        </>
      );
    case ELIGIBLE.MAYBE:
      return (
        <>
          Vous êtes peut-être éligible{' '}
          <span role="img" aria-label="émoji peut-etre">
            🧐
          </span>
        </>
      );
    default:
    case ELIGIBLE.NO:
      return (
        <>
          Désolé, vous n’êtes pas éligible{' '}
          <span role="img" aria-label="émoji non">
            🚫
          </span>
        </>
      );
  }
};

const AccessCondition: React.FC<IProps> = ({
  title,
  slug,
  accessConditionOptions,
}) => {
  const [visitorType, setVisitorType] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const updateVisitorType = (visitorType: any) => {
    setIsLoading(true);
    setVisitorType(visitorType);

    window.setTimeout(() => setIsLoading(false), 500);
  };

  useEffect(() => {
    if (visitorType === null) {
      logParcoursDemandeAcces('1. Commence le parcours client', title);
    }
  }, []);

  useEffect(() => {
    if (visitorType !== null) {
      logParcoursDemandeAcces('2. Renseigne un statut de visiteur', title, visitorType);
    }
  }, [visitorType]);

  return (
    <Page
      headerKey={HEADER_PAGE.APIS}
      title={`Demande d’accès ${title}`}
      description={`${title} est une des APIs du service public. Découvrez ses conditions d’accès.`}
      canonical={`https://api.gouv.fr/les-api/${slug}/demande-acces`}
      noIndex={true}
      usePreFooter={false}
    >
      <div className="fr-container">
        <div className="breadcrumb">
          <a href={`/les-api/${slug}`}>⇠ Fiche {title}</a>
        </div>
      </div>

      <div className="text-wrapper text-style"><commit_msg>fixed warnings<commit_after>import React, { useState, useEffect } from 'react';
import { GetStaticProps, GetStaticPaths } from 'next';
import RichReactMarkdown from '../../../components/richReactMarkdown';
import { logParcoursDemandeAcces } from '../../../utils/client/analytics';

import {
  getAPI,
  getAllAPIs,
  IAccessCondition,
  IAccessConditionWithVisitorType,
  ELIGIBLE,
} from '../../../model';
import Page from '../../../layouts';

import { HEADER_PAGE } from '../../../components';

import { MultiChoice } from '../../../uiComponents';
import Loader from '../../../uiComponents/loader';

interface IAccessConditionOption extends IAccessCondition {
  label: string;
  value: string;
}

interface IProps {
  title: string;
  slug: string;
  accessConditionOptions: IAccessConditionOption[];
}

const IsEligible: React.FC<{ isEligible: ELIGIBLE }> = ({ isEligible }) => {
  switch (isEligible) {
    case ELIGIBLE.YES:
      return (
        <>
          Vous êtes éligible{' '}
          <span role="img" aria-label="émoji oui">
            👌
          </span>
        </>
      );
    case ELIGIBLE.MAYBE:
      return (
        <>
          Vous êtes peut-être éligible{' '}
          <span role="img" aria-label="émoji peut-etre">
            🧐
          </span>
        </>
      );
    default:
    case ELIGIBLE.NO:
      return (
        <>
          Désolé, vous n’êtes pas éligible{' '}
          <span role="img" aria-label="émoji non">
            🚫
          </span>
        </>
      );
  }
};

const AccessCondition: React.FC<IProps> = ({
  title,
  slug,
  accessConditionOptions,
}) => {
  const [visitorType, setVisitorType] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const updateVisitorType = (visitorType: any) => {
    setIsLoading(true);
    setVisitorType(visitorType);

    window.setTimeout(() => setIsLoading(false), 500);
  };

  useEffect(() => {
    if (visitorType === null) {
      logParcoursDemandeAcces('1. Commence le parcours client', title);
    }
  }, [title, visitorType]);

  useEffect(() => {
    if (visitorType !== null) {
      logParcoursDemandeAcces('2. Renseigne un statut de visiteur', title, visitorType);
    }
  }, [title, visitorType]);

  return (
    <Page
      headerKey={HEADER_PAGE.APIS}
      title={`Demande d’accès ${title}`}
      description={`${title} est une des APIs du service public. Découvrez ses conditions d’accès.`}
      canonical={`https://api.gouv.fr/les-api/${slug}/demande-acces`}
      noIndex={true}
      usePreFooter={false}
    >
      <div className="fr-container">
        <div className="breadcrumb">
          <a href={`/les-api/${slug}`}>⇠ Fiche {title}</a>
        </div>
      </div>

      <div className="text-wrapper text-style">
{'fraction_non_alphanumeric': 0.1610909090909091, 'fraction_numerical': 0.0018181818181818182, 'mean_word_length': 2.5398970398970397, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 59, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3384454', 'n_tokens_mistral': 1808, 'n_tokens_neox': 1811, 'n_words': 377}