/* eslint-disable react/jsx-props-no-spreading */

import WideHeadline, {
  WideHeadlineSizes,
} from '@ewarren/persist/lib/components/WideHeadline';
import { Button } from '@ewarren/persist';
import { Form, Formik } from 'formik';
import { useContext, useState } from 'react';
import { useRouter } from 'next/router';
import AuthContext from '../../contexts/AuthContext';
import AuthPolicies from '../../constants/AuthPolicies';
import FormikField from '../../components/FormikField';
// import PushNotificationToggle from '../../components/PushNotificationToggle';
import RouteGuard from '../../components/RouteGuard';
import WallLayout from '../../components/WallLayout';
import getFormattedPhone from '../../util/getFormattedPhone';
import useErrorMessage from '../../hooks/useErrorMessage';
import { Themes } from '../../constants/formElements';

const UpdateDetails = () => {
  return (
    <RouteGuard authPolicy={AuthPolicies.AUTHENTICATED_ONLY}>
      <WallLayout simple={false} metaTitle="Update Profile">
        <div className="max-w-lg p-4 py-8 md:py-20 mx-auto">
          <div className="mb-8 pb-8 border-liberty border-b-4">
            <WideHeadline as="h1" size={WideHeadlineSizes.MD} className="mb-4">
              Update your information
            </WideHeadline>
            <p>
              Welcome to Switchboard! To get started using Switchboard, please
              let us know your name, location, and contact info. These will not
              be shared with the people you are calling.
            </p>
          </div>
          <UserProfileForm />
        </div>
      </WallLayout>
    </RouteGuard>
  );
};

const UserProfileForm = () => {
  const { profile, updateProfile } = useContext(AuthContext);
  const [error, setError] = useState(null);
  const formData = profile || {};
  const router = useRouter();
  useErrorMessage(!!error, error);

  const handleSubmit = async (values, actions) => {
    setError(null);
    actions.setStatus(null);
    actions.setSubmitting(true);
    try {
      await updateProfile(values);
      router.push('/');
    } catch (err) {
      if (err.response) {
        // There was a validation error. Show field-level errors.
        actions.setStatus(err.response.data);
      } else {
        // Something else funky happened. Show a top-level error notification.
        setError(err.message);
      }
      actions.setSubmitting(false);
    }
  };

  const fields = [
    { label: 'First Name', name: 'first_name' },
    { label: 'Last Name', name: 'last_name' },
    { label: 'Phone Number', type: 'tel', name: 'phone' },
    { label: 'Address', name: 'address' },
    { label: 'City', name: 'city' },
    { label: 'State', name: 'state' },
    { label: 'Zip Code', name: 'zip5', maxLength: '5', pattern: '[0-9]{5}' },
    {
      label: 'Team Name (not required)',
      name: 'self_reported_team_name',
      required: false,
    },
  ];
  return (
    <Formik
      initialValues={{
        ...formData,
        phone: getFormattedPhone(formData.phone, true),
      }}
      onSubmit={handleSubmit}
    >
      {({ isSubmitting, status }) => (
        <Form data-tracking="form-user-profile">
          {fields.map(item => (
            <FormikField
              className="mb-8"
              theme={Themes.INVERTED}
              key={item.name}
              error={status && status[item.name]}
              {...item}
            />
          ))}
          {/* <PushNotificationToggle className="mb-8" /> */}
          <Button
            type="submit"
            disabled={isSubmitting}
            className="hover:text-white"
          >
            Update Details
          </Button>
        </Form>
      )}
    </Formik>
  );
};

export default UpdateDetails;