/**
 * 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 Checkbox from 'components/forms/Checkbox';
import {Label} from 'components/label';
import {NewTabLink} from 'components/new-tab-link';
import {DialogForm, Error, Options} from 'components/modal/modal-form-response/style';
import {CopyIconButton} from 'components/buttons/copy-icon-button';
import {Tooltip, Position} from 'components/tooltip';
import {Input} from 'components/ui';

const keepStreams = 'keep-streams';
const keepStreamsTooltipMessage = 'Keeps the removed streams alive';
const destroyRequired = 'destroy-required';
const destroyRequiredTooltipMessage = 'Returns an error if destroying of a stream fails';
const defaultReason = 'portal:killed';
const KillChannelForm = ({setFormData, setIsValid, alias}: {setFormData: (data: any) => void; setIsValid: (isValid: boolean) => void; alias: string}): React.JSX.Element => {
  const [error, setError] = useState<string | null>(null);
  const [enteredAlias, setEnteredAlias] = useState('');
  const [reason, setReason] = useState(defaultReason);
  const [options, setOptions] = useState<string[]>([]);

  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);
    setFormData({
      reason,
      options,
      enteredAlias
    });

    return true;
  }, [enteredAlias, alias, reason, options, setIsValid, setFormData, setError]);

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

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

    setEnteredAlias(event.target.value);
  };

  const handleKillOptions = (value: string) => {
    if (options.indexOf(value) > -1) {
      const currentOptions = options.filter(item => item !== value);

      setOptions(currentOptions);
    } else {
      setOptions([...options, value]);
    }
  };

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

    setReason(event.target.value);
  };

  return (
    <DialogForm>
      <h3 className="testId-killChannelForm">
        Kill Channel <NewTabLink link={documentationLinks.killChannel} icon={faQuestionCircle} iconColor="black" />
      </h3>
      <p>Terminates all streams and removes them from the channel.</p>
      <p>To kill the channel, please enter the channel alias:</p>
      <strong>
        <CopyIconButton text={alias} quoted />
      </strong>
      <Input error={!!error} onChange={handleAlias} value={enteredAlias} name="alias" />
      {error && (
        <Error className="error-text">
          Please enter the channel alias <i>{alias}</i>
        </Error>
      )}
      <h5>Kill options:</h5>
      <Options>
        <Tooltip position={Position.Bottom} message={keepStreamsTooltipMessage}>
          <Checkbox
            value={keepStreams}
            id={keepStreams}
            onChange={() => handleKillOptions(keepStreams)}
            checked={options.indexOf(keepStreams) > -1}
            label={keepStreams}
          />
        </Tooltip>
        <Tooltip position={Position.Bottom} message={destroyRequiredTooltipMessage}>
          <Checkbox
            value={destroyRequired}
            id={destroyRequired}
            onChange={() => handleKillOptions(destroyRequired)}
            checked={options.indexOf(destroyRequired) > -1}
            label={destroyRequired}
          />
        </Tooltip>
      </Options>
      <Label htmlFor="reason" text="Reason:" />
      <Input id="reason" error={!!error} onChange={handleReason} value={reason} />
    </DialogForm>
  );
};

export default KillChannelForm;
