import React, { useCallback, ChangeEvent } from 'react';
import { StepProps, FormData } from './types';
import {
  SectionHeader,
  Field,
  Label,
  Input,
  TextArea,
  FieldDescription,
  SliderContainer,
  SliderTrack,
  SliderRange,
  SliderHandle,
  SliderValues,
  SubSectionLabel,
  NewsletterCheckboxLabel,
  NewsletterCheckboxWrapper,
  CheckboxInput
} from './styles';
import { BUDGET_MAX } from './constants';
import { formatCurrency } from './utils';
import { CheckmarkSvg } from './CheckmarkSvg';

export const BudgetExtrasStep: React.FC<StepProps> = ({
  isApp,
  formData,
  updateField
}) => {
  const minPercent = (formData.budgetMin / BUDGET_MAX) * 100;
  const maxPercent = (formData.budgetMax / BUDGET_MAX) * 100;

  const handleSliderChange = useCallback(
    (
      field: 'budgetMin' | 'budgetMax',
      limit: number,
      compareFn: (val: number, lim: number) => boolean
    ) => (e: ChangeEvent<HTMLInputElement>) => {
      const val = Number(e.target.value);
      if (compareFn(val, limit)) {
        updateField(field, val);
      }
    },
    [updateField]
  );

  const handleTextChange = useCallback(
    (field: keyof FormData) => (
      e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
    ) => {
      updateField(field, e.target.value);
    },
    [updateField]
  );

  const onBudgetMinChange = handleSliderChange(
    'budgetMin',
    formData.budgetMax,
    (val, lim) => val < lim
  );
  const onBudgetMaxChange = handleSliderChange(
    'budgetMax',
    formData.budgetMin,
    (val, lim) => val > lim
  );
  const onSubscriberChange = handleTextChange('subscriberCode');
  const onCommentsChange = handleTextChange('comments');

  return (
    <>
      <SectionHeader isApp={isApp}>Budget &amp; extras</SectionHeader>
      <Field>
        <Label isApp={isApp}>How much would you like to spend?</Label>
        <SliderContainer>
          <SliderTrack>
            <SliderRange $left={minPercent} $width={maxPercent - minPercent} />
            <SliderHandle
              type="range"
              min={0}
              max={BUDGET_MAX}
              step={500}
              value={formData.budgetMin}
              onChange={onBudgetMinChange}
              style={{ zIndex: 3 }}
            />
            <SliderHandle
              type="range"
              min={0}
              max={BUDGET_MAX}
              step={500}
              value={formData.budgetMax}
              onChange={onBudgetMaxChange}
              style={{ zIndex: 4 }}
            />
          </SliderTrack>
          <SliderValues>
            <span>{formatCurrency(formData.budgetMin)}</span>
            <span>–</span>
            <span>{formatCurrency(formData.budgetMax)}</span>
          </SliderValues>
        </SliderContainer>
      </Field>
      <Field>
        <Label isApp={isApp} htmlFor="eq-subscriber">
          If you have a Times + Subscriber Discount code please enter it here
        </Label>
        <Input
          id="eq-subscriber"
          type="text"
          value={formData.subscriberCode}
          onChange={onSubscriberChange}
          isApp={isApp}
        />
      </Field>
      <Field>
        <Label isApp={isApp} htmlFor="eq-comments">
          Any other requirements?
        </Label>
        <FieldDescription isApp={isApp}>
          Please give us any extra details that will help us tailor your trip to
          perfection, such as added extras.
        </FieldDescription>
        <TextArea
          id="eq-comments"
          value={formData.comments}
          onChange={onCommentsChange}
          isApp={isApp}
          rows={5}
        />
      </Field>
      <Field>
        <SubSectionLabel isApp={isApp}>Your latest news</SubSectionLabel>
        <NewsletterCheckboxLabel isApp={isApp}>
          <NewsletterCheckboxWrapper
            className={formData.newsletterOptIn ? 'checked' : ''}
          >
            <CheckboxInput
              type="checkbox"
              checked={formData.newsletterOptIn}
              onChange={() =>
                updateField('newsletterOptIn', !formData.newsletterOptIn)
              }
            />
            {formData.newsletterOptIn && <CheckmarkSvg />}
          </NewsletterCheckboxWrapper>
          <span>
            Tick here to sign up for travel inspiration and holiday offers from
            Times Holidays. We take your privacy seriously and you can
            unsubscribe at any time. Please find the terms of our cookie and
            privacy policy{' '}
            <a
              href="https://www.thetimes.com/holidays/privacy-policy/"
              target="_blank"
              rel="noopener noreferrer"
            >
              here
            </a>
          </span>
        </NewsletterCheckboxLabel>
      </Field>
    </>
  );
};