<commit_before>import axios from '../lib/axios';
import React from 'react';
import PropTypes from 'prop-types';
import 'react-stepzilla/src/css/main.css';
import qs from 'querystring';
import {hot} from 'react-hot-loader';

import MultiStepForm from './MultiStepForm';
import FormStep from './steps/FormStep';
import ContactStep from './steps/ContactStep';
import LocationStep from './steps/LocationStep';
import ScheduleStep from './steps/ScheduleStep';

import './style.css';


// defined by webpack
const apiEndpoint = API_ENDPOINT; // eslint-disable-line no-undef

const groupTypes = [
  {
    id: 'G',
    label: 'Une réunion de groupe',
    description: 'Une réunion qui concerne principalement les membres du groupes, et non le public de façon générale. ' +
    'Par exemple, la réunion hebdomadaire du groupe, une réunion de travail, ou l\'audition d\'une association'
  },
  {
    id: 'M',
    label: 'Une réunion publique',
    description: 'Une réunion ouverts à tous les publics, au-delà des membres du groupe d\'action, mais qui aura lieu ' +
    'dans un lieu privé. Par exemple, une réunion publique avec un orateur, une projection ou un concert.'
  },
  {
    id: 'A',
    label: 'Une action publique',
    description: 'Une action qui se déroulera dans un lieu public et qui aura comme objectif principal d\'aller à la' +
    'rencontre ou d\'atteindre des personnes extérieures à la FI'
  },
  {
    id: 'O',
    label: 'Un autre type d\'événement',
    description: 'Tout autre type d\'événement qui ne rentre pas dans les catégories ci-dessus.'
  }
];

class CreateEventForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {fields: props.initial || {}};
    this.setFields = this.setFields.bind(this);
  }

  async componentDidMount() {
    let subtypes = (await axios.get(apiEndpoint + '/events_subtypes/')).data;
    this.setState({subtypes});
  }

  setFields(fields) {
    this.setState({fields: Object.assign({}, this.state.fields, fields)});
  }

  render() {
    if (!this.state.subtypes) {
      return null;
    }

    let steps = [
      {
        name: 'Quel type ?',
        component: <EventTypeStep setFields={this.setFields} fields={this.state.fields} subtypes={this.state.subtypes}/>
      },
      {
        name: 'Qui contacter ?',
        component: <ContactStep setFields={this.setFields} fields={this.state.fields}/>
      },
      {name: 'Quand ?', component: <ScheduleStep setFields={this.setFields} fields={this.state.fields}/>},
      {name: 'Où ?', component: <LocationStep setFields={this.setFields} fields={this.state.fields}/>},
      {name: 'Validation et nom', component: <ValidateStep fields={this.state.fields}/>},
    ];

    if (this.props.groups && this.props.groups.length > 0) {
      steps.splice(1, 0, {
        name: 'Qui organise ?',
        component: <OrganizerStep setFields={this.setFields} fields={this.state.fields} groups={this.props.groups} />
      });
    }

    return <MultiStepForm steps={steps}/>;
  }
}

CreateEventForm.propTypes = {
  'groups': PropTypes.array,
  'initial': PropTypes.object
};

function CheckBoxList({children}) {
  return <ul className="nav nav-pills">
    {children}
  </ul>;
}

CheckBoxList.propTypes = {
  children: PropTypes.node
};


function CheckBox({label, active, onClick}) {
  return <li className={active ? 'active' : ''}>
    <a href="#" onClick={(e) => {
      e.preventDefault();
      onClick();
    }}
    >
      <i className={'fa ' + (active ? 'fa-check-circle' : 'fa-circle-o')}/>
      &nbsp;
      {label}
    </a>
  </li>;
}


CheckBox.propTypes = {
  label: PropTypes.string,
  active: PropTypes.bool,
  onClick: PropTypes.func
};


class EventTypeStep extends FormStep {
  constructor(props) {
    super(props);
    this.rankedSubtypes = props.subtypes.reduce((acc, s) => {
      (acc[s.type] = acc[s.type] || []).push(s);
      return acc;
    }, {});
  }

  setSubtype(subtype) {
    this.props.setFields({
      subtype: subtype.label,
    });
  }

  isCurrentSubtype(subtype) {
    return subtype.label === this.props.fields.subtype;
  }

  isValidated() {
    return !!this.props.fields.subtype;
  }

  getRightColumn() {
    if (this.state.isNotCampaign) {
      return (
        <div className="col-sm-6 padbottom">
          <h3>Je veux créer...</h3>
          {
            groupTypes.map(type => (
              <div key={type.id}>
                <h4>{type.label}</h4>
                <CheckBoxList>
                  {
                    this.rankedSubtypes[type.id].map(subtype => (
                      <CheckBox
                        key={subtype.description} active={this.isCurrentSubtype(subtype)}
                        label={subtype.description} onClick={() => this.setSubtype(subtype)}
                      />
                    ))
                  }
                </CheckBoxList>
              </div>
            ))
          }
        </div>
      );
    }

    return (
      <div className="col-sm-6 padbottom">
        <div class="alert alert-danger">
          Attention&nbsp;! Nous sommes désormais officiellement en campagne
          électorale. Cela signifie que vous ne pouvez engager de frais sans
          la validation du mandataire financier de la campagne.
        </div>
        <h3>Je veux créer...</h3>
        <h5>...un événement de campagne avec frais</h5>
        <p>Un événement de campagne qui implique des moyens financiers. S'il remplit certains critères, il peut
        être financé. Sinon, il doit être financé par des dons. Dans tous les cas, les factures doivent être réglées par
          le mandataire financier de la campagne.</p>
        <a className="btn btn-default" href="https://agir.lafranceinsoumise.fr/formulaires/E19-01/">
          Je remplis le formulaire d'accord préalable</a>
        <h5>...un autre événement</h5>
        <p>Ce n'est pas un événement de campagne, ou c'est un événement de campagne qui ne nécessite pas de moyens
        payants. S'il y a un concours gratuit en nature (prêt de matériel, de salle...), vous devez néanmoins
        remplir <a href="https://lafranceinsoumise.fr/app/uploads/2018/10/europennes_dons_en_nature.pdf">
            le formulaire dédié</a> à l'issue de l'événement.</p>
        <button className="btn btn-default" onClick={() => this.setState({isNotCampaign: true})}>Je crée directement mon événement</button>
      </div>
    )
  }

  render() {
    return (
      <div className="row padtopmore">
        <div className="col-sm-6">
          <h2>Quel type d'événement voulez-vous créer ?</h2>
          <p>
            Chaque insoumis·e peut créer un événement sur la plateforme dès lors
            qu’il respecte le cadre et la démarche de la France insoumise dans un esprit
            d’ouverture, de bienveillance et de volonté de se projeter dans l’action.
          </p>
          <p>
            Afin de mieux identifier les événements que vous créez, et de pouvoir mieux les recommander aux autres
            insoumis⋅es, indiquez le type d'événement que vous organisez.
          </p>
          <p><commit_msg>change le lien du formulaire européennes dons en nature<commit_after>import axios from '../lib/axios';
import React from 'react';
import PropTypes from 'prop-types';
import 'react-stepzilla/src/css/main.css';
import qs from 'querystring';
import {hot} from 'react-hot-loader';

import MultiStepForm from './MultiStepForm';
import FormStep from './steps/FormStep';
import ContactStep from './steps/ContactStep';
import LocationStep from './steps/LocationStep';
import ScheduleStep from './steps/ScheduleStep';

import './style.css';


// defined by webpack
const apiEndpoint = API_ENDPOINT; // eslint-disable-line no-undef

const groupTypes = [
  {
    id: 'G',
    label: 'Une réunion de groupe',
    description: 'Une réunion qui concerne principalement les membres du groupes, et non le public de façon générale. ' +
    'Par exemple, la réunion hebdomadaire du groupe, une réunion de travail, ou l\'audition d\'une association'
  },
  {
    id: 'M',
    label: 'Une réunion publique',
    description: 'Une réunion ouverts à tous les publics, au-delà des membres du groupe d\'action, mais qui aura lieu ' +
    'dans un lieu privé. Par exemple, une réunion publique avec un orateur, une projection ou un concert.'
  },
  {
    id: 'A',
    label: 'Une action publique',
    description: 'Une action qui se déroulera dans un lieu public et qui aura comme objectif principal d\'aller à la' +
    'rencontre ou d\'atteindre des personnes extérieures à la FI'
  },
  {
    id: 'O',
    label: 'Un autre type d\'événement',
    description: 'Tout autre type d\'événement qui ne rentre pas dans les catégories ci-dessus.'
  }
];

class CreateEventForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {fields: props.initial || {}};
    this.setFields = this.setFields.bind(this);
  }

  async componentDidMount() {
    let subtypes = (await axios.get(apiEndpoint + '/events_subtypes/')).data;
    this.setState({subtypes});
  }

  setFields(fields) {
    this.setState({fields: Object.assign({}, this.state.fields, fields)});
  }

  render() {
    if (!this.state.subtypes) {
      return null;
    }

    let steps = [
      {
        name: 'Quel type ?',
        component: <EventTypeStep setFields={this.setFields} fields={this.state.fields} subtypes={this.state.subtypes}/>
      },
      {
        name: 'Qui contacter ?',
        component: <ContactStep setFields={this.setFields} fields={this.state.fields}/>
      },
      {name: 'Quand ?', component: <ScheduleStep setFields={this.setFields} fields={this.state.fields}/>},
      {name: 'Où ?', component: <LocationStep setFields={this.setFields} fields={this.state.fields}/>},
      {name: 'Validation et nom', component: <ValidateStep fields={this.state.fields}/>},
    ];

    if (this.props.groups && this.props.groups.length > 0) {
      steps.splice(1, 0, {
        name: 'Qui organise ?',
        component: <OrganizerStep setFields={this.setFields} fields={this.state.fields} groups={this.props.groups} />
      });
    }

    return <MultiStepForm steps={steps}/>;
  }
}

CreateEventForm.propTypes = {
  'groups': PropTypes.array,
  'initial': PropTypes.object
};

function CheckBoxList({children}) {
  return <ul className="nav nav-pills">
    {children}
  </ul>;
}

CheckBoxList.propTypes = {
  children: PropTypes.node
};


function CheckBox({label, active, onClick}) {
  return <li className={active ? 'active' : ''}>
    <a href="#" onClick={(e) => {
      e.preventDefault();
      onClick();
    }}
    >
      <i className={'fa ' + (active ? 'fa-check-circle' : 'fa-circle-o')}/>
      &nbsp;
      {label}
    </a>
  </li>;
}


CheckBox.propTypes = {
  label: PropTypes.string,
  active: PropTypes.bool,
  onClick: PropTypes.func
};


class EventTypeStep extends FormStep {
  constructor(props) {
    super(props);
    this.rankedSubtypes = props.subtypes.reduce((acc, s) => {
      (acc[s.type] = acc[s.type] || []).push(s);
      return acc;
    }, {});
  }

  setSubtype(subtype) {
    this.props.setFields({
      subtype: subtype.label,
    });
  }

  isCurrentSubtype(subtype) {
    return subtype.label === this.props.fields.subtype;
  }

  isValidated() {
    return !!this.props.fields.subtype;
  }

  getRightColumn() {
    if (this.state.isNotCampaign) {
      return (
        <div className="col-sm-6 padbottom">
          <h3>Je veux créer...</h3>
          {
            groupTypes.map(type => (
              <div key={type.id}>
                <h4>{type.label}</h4>
                <CheckBoxList>
                  {
                    this.rankedSubtypes[type.id].map(subtype => (
                      <CheckBox
                        key={subtype.description} active={this.isCurrentSubtype(subtype)}
                        label={subtype.description} onClick={() => this.setSubtype(subtype)}
                      />
                    ))
                  }
                </CheckBoxList>
              </div>
            ))
          }
        </div>
      );
    }

    return (
      <div className="col-sm-6 padbottom">
        <div class="alert alert-danger">
          Attention&nbsp;! Nous sommes désormais officiellement en campagne
          électorale. Cela signifie que vous ne pouvez engager de frais sans
          la validation du mandataire financier de la campagne.
        </div>
        <h3>Je veux créer...</h3>
        <h5>...un événement de campagne avec frais</h5>
        <p>Un événement de campagne qui implique des moyens financiers. S'il remplit certains critères, il peut
        être financé. Sinon, il doit être financé par des dons. Dans tous les cas, les factures doivent être réglées par
          le mandataire financier de la campagne.</p>
        <a className="btn btn-default" href="https://agir.lafranceinsoumise.fr/formulaires/E19-01/">
          Je remplis le formulaire d'accord préalable</a>
        <h5>...un autre événement</h5>
        <p>Ce n'est pas un événement de campagne, ou c'est un événement de campagne qui ne nécessite pas de moyens
        payants. S'il y a un concours gratuit en nature (prêt de salle, de matériel...), vous devez néanmoins
        remplir <a href="https://lafranceinsoumise.fr/app/uploads/2018/11/europennes_dons_en_nature.pdf">
            le formulaire dédié</a> à l'issue de l'événement.</p>
        <button className="btn btn-default" onClick={() => this.setState({isNotCampaign: true})}>Je crée directement mon événement</button>
      </div>
    )
  }

  render() {
    return (
      <div className="row padtopmore">
        <div className="col-sm-6">
          <h2>Quel type d'événement voulez-vous créer ?</h2>
          <p>
            Chaque insoumis·e peut créer un événement sur la plateforme dès lors
            qu’il respecte le cadre et la démarche de la France insoumise dans un esprit
            d’ouverture, de bienveillance et de volonté de se projeter dans l’action.
          </p>
          <p>
            Afin de mieux identifier les événements que vous créez, et de pouvoir mieux les recommander aux autres
            insoumis⋅es, indiquez le type d'événement que vous organisez.
          </p>
          <p>
{'fraction_non_alphanumeric': 0.12845711076793487, 'fraction_numerical': 0.003930927979783799, 'mean_word_length': 2.546676624346527, 'pattern_counts': {'":': 0, '<': 111, '<?xml version=': 0, '>': 125, 'https://': 4, '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': '3433418', 'n_tokens_mistral': 4547, 'n_tokens_neox': 4524, 'n_words': 1203}