/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React, { useState } from 'react';
import * as Yup from 'yup';
import { func } from 'prop-types';
import Flexbox from 'flexbox-react';
import dayjs from 'dayjs';
import { Formik, Form } from 'formik';
import { useRouter } from 'next/router';
import DatePicker from 'react-mobile-datepicker';

import * as S from './styles';
import Input from '../Input/Input';
import DownloadApp from '../DownloadApp';
import Checkbox from '../Checkbox/Checkbox';

const VALIDATION_SCHEMA = Yup.object().shape({
  firstName: Yup.string()
    .required('First name is Required'),
  lastName: Yup.string()
    .required('Last name is Required'),
  email: Yup.string()
    .email('Invalid email')
    .required('Required'),
  dob: Yup.string()
    .required('Date of birth is Required'),
});

const monthMap = {
  1: 'Jan',
  2: 'Feb',
  3: 'Mar',
  4: 'Apr',
  5: 'May',
  6: 'Jun',
  7: 'Jul',
  8: 'Aug',
  9: 'Sep',
  10: 'Oct',
  11: 'Nov',
  12: 'Dec',
};

const SignUpForm = ({ signUp }) => {
  const { query, back, push } = useRouter();
  const { userId, country, phoneNumber } = query;
  const [check, setCheck] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const dateConfig = {
    date: {
      format: 'DD',
      caption: 'Day',
      step: 1,
    },
    month: {
      format: (value) => monthMap[value.getMonth() + 1],
      caption: 'Mon',
      step: 2,
    },
    year: {
      format: 'YYYY',
      caption: 'Year',
      step: 3,
    },
  };
  const handleClick = () => setIsOpen(true);

  const handleCancel = () => setIsOpen(false);

  return (
    <Flexbox
      padding="20px"
      flexDirection="column"
      backgroundColor="#000f1f"
      height="calc(100vh - 40px)"
    >
      <Flexbox marginBottom="18px" justifyContent="space-between">
        <div
          style={{
            color: '#fff',
            border: 'none',
            background: 'none',
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            fontFamily: 'CooperHewitt',
            fontWeight: 'bold',
            marginTop: '5px',
            fontSize: '14px',
          }}
          onClick={() => back()}
        >
          back
        </div>
        <div
          style={{
            color: '#A0B1C5',
            border: 'none',
            marginTop: '5px',
            fontSize: '14px',
            background: 'none',
            letterSpacing: '2px',
            textTransform: 'uppercase',
            fontWeight: 'bold',
            fontFamily: 'CooperHewitt',
          }}
          onClick={() => push({ pathname: '/download-app', query: { userId } })}
        >
          I got an account
        </div>
      </Flexbox>
      <div>
        <h1 style={{ color: '#FFFFFF', marginBottom: '3px' }}>
          In order to win €25K fill in this form
        </h1>
        <span
          style={{
            display: 'block',
            color: '#FFFFFF',
            maxWidth: '245px',
            marginBottom: '30px',
          }}
        >
          To save predicitions, we need your full name and e-mail address.
        </span>
      </div>
      <S.FormikWrapper>
        <Formik
          initialValues={{
            firstName: '',
            lastName: '',
            email: '',
            dob: null,
          }}
          validationSchema={VALIDATION_SCHEMA}
          onSubmit={(values) => {
            signUp({
              ...values,
              userId,
              country,
              dob: dayjs(values.dob).format('MM/DD/YYYY'),
            });
            push({
              pathname: '/download-app',
              query: {
                userId,
                firstName: values.firstName,
                lastName: values.lastName,
              },
            });
          }}
        >
          {({
            errors,
            touched,
            setFieldValue,
            values: { dob },
          }) => (
            <Form style={{ width: '100%' }}>
              <Flexbox marginBottom="15px" width="100%" justifyContent="space-between">
                <Flexbox flexBasis="calc(50% - 3px)" flexDirection="column">
                  <S.Label top>First name</S.Label>
                  <Input
                    type="text"
                    inlineCss={`
                      width: 100%;
                      & input {
                        padding: 10px;
                        font-size: 16px;
                        width: calc(100% - 26px);
                        background-color: transparent;
                      }
                    `}
                    name="firstName"
                    err={errors.firstName && touched.firstName}
                  />
                </Flexbox>
                <Flexbox flexBasis="calc(50% - 10px)" flexDirection="column">
                  <S.Label>Last name</S.Label>
                  <Input
                    type="text"
                    inlineCss={`
                      width: 100%;
                      & input {
                        padding: 10px;
                        font-size: 16px;
                        width: calc(100% - 26px);
                        background-color: transparent;
                      }
                    `}
                    name="lastName"
                    err={errors.lastName && touched.lastName}
                  />
                </Flexbox>
              </Flexbox>
              <S.Label>E-mail</S.Label>
              <Input
                name="email"
                type="email"
                inlineCss={`
                  width: 100%;
                  & input {
                    padding: 10px;
                    font-size: 16px;
                    width: calc(100% - 26px);
                    background-color: transparent;
                    margin-bottom: 15px;
                  }
                `}
                err={errors.email && touched.email}
              />

              <S.Label>Date of birth</S.Label>
              <DatePicker
                dateConfig={dateConfig}
                headerFormat="DD/MM/YYYY"
                value={dob || new Date(2002, 4, 4)}
                isOpen={isOpen}
                max={new Date(2002, 4, 4)}
                confirmText="Select"
                cancelText="Cancel"
                theme="ios"
                onSelect={(v) => {
                  setFieldValue('dob', v);
                  setIsOpen(false);
                }}
                onCancel={handleCancel}
              />
              <S.DatePicker onClick={handleClick}>
                {dob ? dayjs(dob).format('DD/MM/YYYY') : ''}
              </S.DatePicker>
              <Flexbox width="100%" margin="15px 0 25px 0" alignItems="center">
                <Checkbox
                  name="agree"
                  checked={check}
                  label="I agree to receive marketing e-mail & news"
                  onChange={() => setCheck(!check)}
                />
              </Flexbox>
              <S.Submit disabled={!check} type="submit">Save Prediction</S.Submit>
            </Form>
          )}
        </Formik>
      </S.FormikWrapper>
      <S.Copy style={{ marginTop: '20px', marginBottom: '20px' }}>
        By signing up, you agree to our
        {' '}
        <b style={{ color: '#fff' }}>Terms of Service</b>
      </S.Copy>
      <DownloadApp userId={userId} userName="You!" />
    </Flexbox>
  );
};

SignUpForm.propTypes = {
  signUp: func.isRequired,
};

export default SignUpForm;