/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import React, {useState, useEffect, useCallback} from 'react';
import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
import {CapabilitiesType} from 'constants/capabilities';
import {documentationLinks} from 'constants/links';
import {Label} from 'components/forms/label';
import Checkbox from 'components/forms/Checkbox';
import {NewTabLink} from 'components/new-tab-link';
import {Dropdown} from 'components/drop-down';
import {InputWithTags} from 'components/ui/input-with-tags';
import {DialogForm, Error, Options} from 'components/modal/modal-form-response/style';
import {Capabilities} from 'components/create-token-components';
import Theme from 'theme';

const forkChannelOption = ['force', 'additive'];
const ForkChannelForm = ({setFormData, setIsValid, channelList, alias}: {setFormData: (data: any) => void; setIsValid: (isValid: boolean) => void; channelList: any[]; alias: string}): React.JSX.Element => {
  const [error, setError] = useState<string | null>(null);
  const [tags, setTags] = useState<string[]>([]);
  const [forkOptions, setForkOptions] = useState<string[]>([]);
  const [destinationChannelId, setDestinationChannelId] = useState('');
  const [selectedCapabilities, setSelectedCapabilities] = useState<any[]>([]);
  const [force, additive] = forkChannelOption;
  const destinationChannelsList = channelList.filter(channel => channel.alias !== alias);

  const validate = useCallback((): boolean => {
    if (!destinationChannelId) {
      setIsValid(false);

      return false;
    }

    setError(null);
    setIsValid(true);
    setFormData({
      streamCapabilities: selectedCapabilities.map(({value}) => value),
      streamTags: tags,
      options: forkOptions,
      destinationChannelId
    });

    return true;
  }, [destinationChannelId, selectedCapabilities, tags, forkOptions, setIsValid, setFormData]);

  useEffect(() => {
    validate();
  }, [validate]);

  const handleForkOptions = (value: string) => {
    if (forkOptions.indexOf(value) > -1) {
      const currentForkOptions = forkOptions.filter(item => item !== value);

      setForkOptions(currentForkOptions);
    } else {
      setForkOptions([...forkOptions, value]);
    }
  };

  const handleSetDestinationChannelId = (channelAlias: string): void => {
    const channels = channelList.filter(channel => channel.alias === channelAlias);

    if (channels[0]) {
      const {channelId} = channels[0];

      setDestinationChannelId(channelId);
      setError(null);
    }
  };

  return (
    <DialogForm>
      <h3 className="testId-forkChannelForm">
        Fork Channel <NewTabLink link={documentationLinks.forkChannel} icon={faQuestionCircle} iconColor="black" />
      </h3>
      <p>
        Fork <strong>"{alias}"</strong> to destination channel:
      </p>
      <Dropdown
        name={'alias'}
        label="Destination Channel Alias"
        items={destinationChannelsList}
        itemKey={'alias'}
        onSelect={handleSetDestinationChannelId}
        className="testId-destinationChannelAlias"
      />
      {error && <Error>Please select a Channel from the list</Error>}
      <Capabilities
        label="Capabilities:"
        labelColor={Theme.colors.gray900}
        iconColor={Theme.colors.gray900}
        capabilitiesSetTitle={CapabilitiesType.Forking}
        selectedItems={selectedCapabilities}
        setSelectedItems={setSelectedCapabilities}
      />
      <Label text="Options" />
      <Options>
        <Checkbox value={force} id={force} onChange={() => handleForkOptions(force)} checked={forkOptions.indexOf(force) > -1} label={force} />
        <Checkbox value={additive} id={additive} onChange={() => handleForkOptions(additive)} checked={forkOptions.indexOf(additive) > -1} label={additive} />
      </Options>
      <Label htmlFor="input-tag" text="Stream Tags" />
      <InputWithTags id="input-tag" onTagListChange={setTags} defaultValue={tags} />
    </DialogForm>
  );
};

export default ForkChannelForm;
