import React from 'react';
import { StepProps } from './types';
import {
  SectionHeader,
  FieldRow,
  Field,
  Label,
  Input,
  SubSectionLabel,
  CheckboxGroup,
  CheckboxLabel,
  CheckboxWrapper,
  CheckboxInput,
  AppointmentFields,
  TimeSelectRow,
  TimeSeparator
} from './styles';
import { FormField } from './FormField';
import { CheckmarkSvg } from './CheckmarkSvg';
import { CustomSelect } from './CustomSelect';
import { HOUR_OPTIONS, MINUTE_OPTIONS } from './constants';

export const PersonalDetailsStep: React.FC<StepProps> = ({
  isApp,
  formData,
  errors,
  updateField
}) => {
  const showAppointmentFields =
    formData.appointmentVideoCall || formData.appointmentTelephoneCall;

  return (
    <>
      <SectionHeader isApp={isApp}>Your details</SectionHeader>
      <FieldRow>
        <FormField
          isApp={isApp}
          id="eq-firstName"
          label="First Name"
          required
          value={formData.firstName}
          field="firstName"
          error={errors.firstName}
          updateField={updateField}
        />
        <FormField
          isApp={isApp}
          id="eq-lastName"
          label="Last Name"
          required
          value={formData.lastName}
          field="lastName"
          error={errors.lastName}
          updateField={updateField}
        />
      </FieldRow>
      <FieldRow>
        <FormField
          isApp={isApp}
          id="eq-telephone"
          label="Telephone Number"
          required
          type="tel"
          value={formData.telephone}
          field="telephone"
          error={errors.telephone}
          updateField={updateField}
        />
        <FormField
          isApp={isApp}
          id="eq-email"
          label="Email Address"
          required
          type="email"
          value={formData.email}
          field="email"
          error={errors.email}
          updateField={updateField}
        />
      </FieldRow>

      <Field>
        <SubSectionLabel isApp={isApp}>
          How would you like us to contact you?
        </SubSectionLabel>
        <CheckboxGroup>
          <CheckboxLabel isApp={isApp}>
            <CheckboxWrapper
              className={formData.contactByTelephone ? 'checked' : ''}
            >
              <CheckboxInput
                type="checkbox"
                checked={formData.contactByTelephone}
                onChange={() =>
                  updateField(
                    'contactByTelephone',
                    !formData.contactByTelephone
                  )
                }
              />
              {formData.contactByTelephone && <CheckmarkSvg />}
            </CheckboxWrapper>
            Telephone
          </CheckboxLabel>
          <CheckboxLabel isApp={isApp}>
            <CheckboxWrapper
              className={formData.contactByEmail ? 'checked' : ''}
            >
              <CheckboxInput
                type="checkbox"
                checked={formData.contactByEmail}
                onChange={() =>
                  updateField('contactByEmail', !formData.contactByEmail)
                }
              />
              {formData.contactByEmail && <CheckmarkSvg />}
            </CheckboxWrapper>
            Email
          </CheckboxLabel>
        </CheckboxGroup>
      </Field>

      <Field>
        <SubSectionLabel isApp={isApp}>Or book an appointment?</SubSectionLabel>
        <CheckboxGroup>
          <CheckboxLabel isApp={isApp}>
            <CheckboxWrapper
              className={formData.appointmentVideoCall ? 'checked' : ''}
            >
              <CheckboxInput
                type="checkbox"
                checked={formData.appointmentVideoCall}
                onChange={() =>
                  updateField(
                    'appointmentVideoCall',
                    !formData.appointmentVideoCall
                  )
                }
              />
              {formData.appointmentVideoCall && <CheckmarkSvg />}
            </CheckboxWrapper>
            Video call
          </CheckboxLabel>
          <CheckboxLabel isApp={isApp}>
            <CheckboxWrapper
              className={formData.appointmentTelephoneCall ? 'checked' : ''}
            >
              <CheckboxInput
                type="checkbox"
                checked={formData.appointmentTelephoneCall}
                onChange={() =>
                  updateField(
                    'appointmentTelephoneCall',
                    !formData.appointmentTelephoneCall
                  )
                }
              />
              {formData.appointmentTelephoneCall && <CheckmarkSvg />}
            </CheckboxWrapper>
            Telephone call
          </CheckboxLabel>
        </CheckboxGroup>
      </Field>

      {showAppointmentFields && (
        <AppointmentFields>
          <Field>
            <Label isApp={isApp} htmlFor="eq-preferredDate">
              Your preferred date
            </Label>
            <Input
              id="eq-preferredDate"
              type="date"
              value={formData.preferredDate}
              min={new Date().toISOString().split('T')[0]}
              onChange={e => updateField('preferredDate', e.target.value)}
              isApp={isApp}
            />
          </Field>
          <Field>
            <Label isApp={isApp}>Your preferred time</Label>
            <TimeSelectRow>
              <CustomSelect
                id="eq-preferredHour"
                value={(formData.preferredTime || '').split(':')[0] || ''}
                options={HOUR_OPTIONS}
                onChange={val => {
                  const [, mins = '00'] = (formData.preferredTime || '').split(
                    ':'
                  );
                  updateField('preferredTime', `${val}:${mins}`);
                }}
                isApp={isApp}
              />
              <TimeSeparator isApp={isApp}>:</TimeSeparator>
              <CustomSelect
                id="eq-preferredMinute"
                value={(formData.preferredTime || '').split(':')[1] || ''}
                options={MINUTE_OPTIONS}
                onChange={val => {
                  const [hrs = '00'] = (formData.preferredTime || '').split(
                    ':'
                  );
                  updateField('preferredTime', `${hrs}:${val}`);
                }}
                isApp={isApp}
              />
            </TimeSelectRow>
          </Field>
        </AppointmentFields>
      )}
    </>
  );
};