import { useEffect, useState } from 'react';
import { getOperationName } from '@apollo/client/utilities';
import styled from '@emotion/styled';
import debounce from 'lodash.debounce';
import { useRecoilValue } from 'recoil';

import { currentUserState } from '@/auth/states/currentUserState';
import { TextInput } from '@/ui/input/components/TextInput';
import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
import { useUpdateUserMutation } from '~/generated/graphql';
import { logError } from '~/utils/logError';

const StyledComboInputContainer = styled.div`
  display: flex;
  flex-direction: row;
  > * + * {
    margin-left: ${({ theme }) => theme.spacing(4)};
  }
`;

type NameFieldsProps = {
  autoSave?: boolean;
  onFirstNameUpdate?: (firstName: string) => void;
  onLastNameUpdate?: (lastName: string) => void;
};

export const NameFields = ({
  autoSave = true,
  onFirstNameUpdate,
  onLastNameUpdate,
}: NameFieldsProps) => {
  const currentUser = useRecoilValue(currentUserState);

  const [firstName, setFirstName] = useState(currentUser?.firstName ?? '');
  const [lastName, setLastName] = useState(currentUser?.lastName ?? '');

  const [updateUser] = useUpdateUserMutation();

  // TODO: Enhance this with react-hook-form (https://www.react-hook-form.com)
  const debouncedUpdate = debounce(async () => {
    if (onFirstNameUpdate) {
      onFirstNameUpdate(firstName);
    }
    if (onLastNameUpdate) {
      onLastNameUpdate(lastName);
    }
    try {
      if (autoSave) {
        const { data, errors } = await updateUser({
          variables: {
            where: {
              id: currentUser?.id,
            },
            data: {
              firstName,
              lastName,
            },
          },
          refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
        });

        if (errors || !data?.updateUser) {
          throw errors;
        }
      }
    } catch (error) {
      logError(error);
    }
  }, 500);

  useEffect(() => {
    if (!currentUser) {
      return;
    }

    if (
      currentUser.firstName !== firstName ||
      currentUser.lastName !== lastName
    ) {
      debouncedUpdate();
    }

    return () => {
      debouncedUpdate.cancel();
    };
  }, [firstName, lastName, currentUser, debouncedUpdate, autoSave]);

  return (
    <StyledComboInputContainer>
      <TextInput
        label="First Name"
        value={firstName}
        onChange={setFirstName}
        placeholder="Tim"
        fullWidth
      />
      <TextInput
        label="Last Name"
        value={lastName}
        onChange={setLastName}
        placeholder="Cook"
        fullWidth
      />
    </StyledComboInputContainer>
  );
};