// This file is part of Coog. The COPYRIGHT file at the top level of
// this repository contains the full copyright notices and license terms.

import React, { FC, useState } from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';

import cn from 'classnames';

import ConfirmationButton from '../ConfirmationButton';
import Select from '../Select';

import { DuplicateButtonProps } from './DuplicateButton.types';

import './DuplicateButton.scss';

/**
 * DuplicateButton component
 * @param props
 * @returns {XML}
 * @constructor
 */
const DuplicateButton: FC<DuplicateButtonProps> = ({
  label,
  validateLabel = 'Valider',
  cancelLabel = 'Annuler',
  isLoadingValidate = false,
  disabled = false,
  selection = [],
  eventEmitter,
  styleSelect = {},
  placeholder = undefined,
}: DuplicateButtonProps): JSX.Element => {
  const [btnState, setBtnState] = useState(false);
  const [localValue, setLocalValue] = useState<string | string[]>();
  const [hasValidated, setHasValidated] = useState(false);
  const [canResetState, setCanResetState] = useState(false);

  if (hasValidated && isLoadingValidate) {
    setCanResetState(true);
    setHasValidated(false);
  } else if (canResetState && !isLoadingValidate) {
    setCanResetState(false);
    setBtnState(false);
    setLocalValue(null);
  }

  const clickMainButton = () => {
    setBtnState(true);
  };

  const clickCancel = () => {
    setLocalValue(null);
    setBtnState(false);
  };

  const clickValidate = () => {
    eventEmitter(localValue);
    setHasValidated(true);
  };

  return (
    <div className={cn('duplicate-6c0710df-9202-4f17-be12-5f7287995c47', { 'button-expanded': btnState })}>
      <ConfirmationButton label={label} disabled={disabled} isBtnOpen={btnState} handlerMainButton={clickMainButton}>
        <>
          <Select
            field={{ name: 'duplicate', value: localValue }}
            placeholder={placeholder}
            options={selection}
            disabled={isLoadingValidate}
            width={styleSelect.width}
            height={styleSelect.height}
            minWidthMenu={styleSelect.minWidthMenu}
            eventEmitter={val => setLocalValue(val)}
          />
          <button
            className={cn(`button button-primary`, { disabled: !localValue || isLoadingValidate })}
            type="button"
            disabled={!localValue || isLoadingValidate}
            onClick={clickValidate}
          >
            {isLoadingValidate ? (
              <FontAwesomeIcon className="spinner-button-style" icon={faCircleNotch} spin size="lg" />
            ) : (
              validateLabel
            )}
          </button>
          <button
            className={cn(`button button-error`, { disabled: isLoadingValidate })}
            type="button"
            disabled={isLoadingValidate}
            onClick={clickCancel}
          >
            {cancelLabel}
          </button>
        </>
      </ConfirmationButton>
    </div>
  );
};

export default DuplicateButton;

export { DuplicateButtonProps };