import React from 'react';
import { Field } from 'react-final-form';
import classNames from 'classnames/bind';
import Input from 'components/formItems/Input';
import ModuleButton from 'components/items/ModuleButton';
import { required, email, composeValidators } from 'store/utils/validation';
import CustomSelect from 'components/formItems/CustomSelect/CustomSelect';
import GenericFields from 'components/formHelpers/GenericFields';
import config from 'config/general';
import styleIdentifiers from './participantForm.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type ParticipantFormProps = StateProps & DispatchProps & OwnProps;

const ParticipantForm = (props: ParticipantFormProps) => {
  const {
    handleSubmit,
    submitting,
    valid,
    tickets,
    privateEvent,
    participantFields,
    noLanguage,
    noTicket,
  } = props;

  function renderListTicket() {
    const array = [];

    if (tickets) {
      for (let index = 0; index < tickets.length; index++) {
        const element = tickets[index];
        array.push({
          label: element.title,
          value: element._id,
        });
      }
    }

    return array;
  }

  function renderListLanguage() {
    const array = [];
    if (config && config.availableLanguages) {
      config.availableLanguages.forEach(element => {
        array.push({
          value: element,
          label: element,
        });
      });
    }

    return array;
  }

  const fields = [...participantFields];
  if (!noLanguage) {
    fields.push({
      label: 'language',
      name: 'language',
      type: 'select',
      values: renderListLanguage(),
      required: true,
    });
  }
  if (!noTicket) {
    fields.push({
      type: 'select',
      name: 'productId',
      required: !privateEvent && true,
      label: 'ticket',
      values: renderListTicket(),
    });
  }

  return (
    <form className={styles('ParticipantForm')} onSubmit={handleSubmit}>
      <div className={styles('fields')}>
        <GenericFields
          finalForm
          propsInput={{
            className: styles('field-form-elem'),
          }}
          fields={fields}
        />
      </div>

      <div className={styles('button')}>
        <ModuleButton disabled={submitting || !valid} label="Add participant" type="submit" />
      </div>
    </form>
  );
};

export default ParticipantForm;
