/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import React, {useState, useEffect, ChangeEvent, useCallback} from 'react';
import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
import {documentationLinks} from 'constants/links';

import {NewTabLink} from 'components/new-tab-link';
import Input from 'components/forms/Input';
import {CopyIconButton} from 'components/buttons/copy-icon-button';
import {DialogForm, Error} from 'components/modal/modal-form-response/style';

const DeleteChannelForm = ({setIsValid, alias}: {setIsValid: (isValid: boolean) => void; alias: string}): React.JSX.Element => {
  const [error, setError] = useState<string | null>(null);
  const [enteredAlias, setEnteredAlias] = useState('');

  const validate = useCallback((): boolean => {
    if (!enteredAlias) {
      setError('Please enter a channel alias');
      setIsValid(false);

      return false;
    }

    if (enteredAlias !== alias) {
      setError('Entered alias does not match the channels alias');
      setIsValid(false);

      return false;
    }

    setError(null);
    setIsValid(true);

    return true;
  }, [enteredAlias, alias, setIsValid]);

  useEffect(() => {
    if (enteredAlias.length) {
      validate();
    }
  }, [enteredAlias, validate]);

  const handleEnteredAlias = (event: ChangeEvent<HTMLInputElement>): void => {
    if (error) {
      setError(null);
    }

    setEnteredAlias(event.target.value);
  };

  return (
    <DialogForm>
      <h3 className="testId-deleteChannelForm">
        Delete Channel <NewTabLink link={documentationLinks.deleteChannel} icon={faQuestionCircle} iconColor="black" />
      </h3>
      <p>To delete channel, please enter the channel alias:</p>
      <strong>
        <CopyIconButton text={alias} quoted />
      </strong>
      <Input name="alias" error={!!error} onChange={handleEnteredAlias} value={enteredAlias} />
      {error && <Error className="error-text testId-displayMessage">{error}</Error>}
    </DialogForm>
  );
};

export default DeleteChannelForm;
