import React from 'react';
import { StepProps } from './types';
import { SectionHeader, FieldRow } from './styles';
import { FormField } from './FormField';
import { SelectField } from './SelectField';
import {
  DURATIONS,
  MONTH_OPTIONS,
  YEAR_OPTIONS,
  ADULTS_OPTIONS,
  CHILDREN_OPTIONS
} from './constants';

export const TripDetailsStep: React.FC<StepProps> = ({
  isApp,
  formData,
  errors,
  updateField
}) => (
  <>
    <SectionHeader isApp={isApp}>Your trip</SectionHeader>
    <FieldRow>
      <FormField
        isApp={isApp}
        id="eq-departure"
        label="Which port/airport would you like to go from?"
        required
        value={formData.departurePort}
        field="departurePort"
        error={errors.departurePort}
        updateField={updateField}
      />
      <FormField
        isApp={isApp}
        id="eq-destination"
        label="Where would you like to go?"
        required
        value={formData.destination}
        field="destination"
        error={errors.destination}
        updateField={updateField}
      />
    </FieldRow>
    <FieldRow>
      <SelectField
        isApp={isApp}
        id="eq-month"
        label="When would you like to go?"
        required
        value={formData.month}
        field="month"
        error={errors.month}
        options={MONTH_OPTIONS}
        placeholder="Select month"
        updateField={updateField}
      />
      <SelectField
        isApp={isApp}
        id="eq-year"
        label=""
        value={formData.year}
        field="year"
        error={errors.year}
        options={YEAR_OPTIONS}
        placeholder="Select year"
        updateField={updateField}
      />
      <SelectField
        isApp={isApp}
        id="eq-duration"
        label="How long for?"
        required
        value={formData.duration}
        field="duration"
        error={errors.duration}
        options={DURATIONS}
        placeholder="Duration (days)"
        updateField={updateField}
      />
    </FieldRow>
    <FieldRow>
      <SelectField
        isApp={isApp}
        id="eq-adults"
        label="How many adults are travelling?"
        required
        value={formData.adults}
        field="adults"
        error={errors.adults}
        options={ADULTS_OPTIONS}
        updateField={updateField}
      />
    </FieldRow>
    <FieldRow>
      <SelectField
        isApp={isApp}
        id="eq-children"
        label="How many children (under 16 years) are travelling?"
        required
        value={formData.children}
        field="children"
        error={errors.children}
        options={CHILDREN_OPTIONS}
        updateField={updateField}
      />
    </FieldRow>
  </>
);