import React, { useRef } from 'react';
import cx from 'classnames';
import {
    Form,
    Help
} from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';
import Currency from 'src/components/currency/currency';
import CurrencyInput from 'src/components/currency-input/currency-input';
import { Quote } from 'src/types/Quote';
import { Collaborator } from './queries/collaborators';
import { formatCollaboratorName } from '../../utils/formatters';
import messages from './i18n';

const CLASS_NAME = 'PaymentsPage';

type Props = {
    collaborator: Collaborator;
    amount?: string;
    isAmountInvalid?: boolean;
    onAmountChange(value: number | null): void;
    onSelectedToggle(): void;
    isSelected?: boolean;
    quote?: Quote;
    vendorCurrency: string;
    hasCurrencyMismatch?: boolean;
};

const CollaboratorRow: React.FC<Props> = ({
    collaborator,
    amount,
    isAmountInvalid,
    onAmountChange,
    onSelectedToggle,
    isSelected,
    quote,
    vendorCurrency,
    hasCurrencyMismatch = true
}) => {
    const inputRef = useRef<HTMLInputElement>(null);
    const checkboxRef = useRef<HTMLInputElement>(null);

    const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        if (event.target !== checkboxRef.current && inputRef?.current) inputRef.current.focus();
    };

    const renderRemainingBalance = () => {
        if (amount)
            return (
                <div
                    className={
                        `${CLASS_NAME}-collaborator-row-data
                        ${CLASS_NAME}-remaining-balance-column`
                    }
                >
                    <Currency
                        amount={ collaborator.balance - parseFloat(amount) }
                        code={ collaborator.currency }
                        renderSpace={ true }
                    />
                </div>
            );
        return (
            <div
                className={
                    `${CLASS_NAME}-collaborator-row-data
                    ${CLASS_NAME}-remaining-balance-column
                    ${CLASS_NAME}-collaborator-row-na`
                }
            >
                <span>-</span>
            </div>
        );
    };

    const renderContent = () => (
        <>
            <div
                className={ `${CLASS_NAME}-column ${CLASS_NAME}-collaborator-row-data ${CLASS_NAME}-collaborator-name-column` }
            >
                { hasCurrencyMismatch ? (
                    <Help
                        id={ `${CLASS_NAME}-disabled-tooltip-${collaborator.id}` }
                        message={ formatMessage(messages.vendorCurrencyMismatch) }
                    >
                        <div>
                            { formatCollaboratorName(collaborator.name, collaborator.collaboratorType) }
                        </div>
                    </Help>
                ) : (
                    formatCollaboratorName(collaborator.name, collaborator.collaboratorType)
                ) }
            </div>
            <div
                className={
                    `${CLASS_NAME}-column ${CLASS_NAME}-collaborator-row-data ${CLASS_NAME}-original-balance-column`
                }
            >
                <Currency
                    amount={ collaborator.balance }
                    code={ collaborator.currency }
                    renderSpace={ true }
                />
            </div>
            <div
                className={ `${CLASS_NAME}-column ${CLASS_NAME}-collaborator-row-data ${CLASS_NAME}-source-column` }
            >
                <CurrencyInput
                    type="text"
                    size="sm"
                    placeholder={ formatMessage(messages.enterAmount) }
                    value={ amount && parseFloat(amount) }
                    onChange={ onAmountChange }
                    data-testid="payment-amount-input"
                    isInvalid={ isAmountInvalid }
                    inputGroupClass={ `${CLASS_NAME}-payment-amount-input-group` }
                    currency={ vendorCurrency }
                    ref={ inputRef }
                    disabled={ hasCurrencyMismatch }
                />
            </div>
            <div
                className={ `${CLASS_NAME}-column ${CLASS_NAME}-collaborator-row-data ${CLASS_NAME}-target-column` }
            >
                <CurrencyInput
                    type="text"
                    size="sm"
                    placeholder=""
                    value={ quote && quote.targetAmount }
                    onChange={ onAmountChange }
                    data-testid="payment-amount-input"
                    isInvalid={ isAmountInvalid }
                    inputGroupClass={ `${CLASS_NAME}-payment-amount-input-group` }
                    currency={ quote ? quote.targetCurrency : collaborator?.recipient?.currency }
                    ref={ inputRef }
                    disabled
                />
            </div>
            { renderRemainingBalance() }
        </>
    );

    return (
        <div
            key={ collaborator.id }
            className={ cx(`${CLASS_NAME}-collaborator-row`, {
                [`${CLASS_NAME}-collaborator-row-active`]: Boolean(amount),
                [`${CLASS_NAME}-collaborator-row-selected`]: isSelected,
                [`${CLASS_NAME}-collaborator-row-disabled`]: hasCurrencyMismatch,
            }) }
            onClick={ handleClick }
        >
            <div className={ `${CLASS_NAME}-column ${CLASS_NAME}-checkmark-column` }>
                <Form.Check
                    disabled={ hasCurrencyMismatch }
                    id={ `select-collaborator-checkbox-${collaborator.id}` }
                    data-testid={ `select-collaborator-checkbox-${collaborator.id}` }
                    type="checkbox"
                    onChange={ onSelectedToggle }
                    checked={ isSelected }
                    ref={ checkboxRef }
                />
            </div>
            { renderContent() }
        </div>
    );
};

export default CollaboratorRow;