import React from 'react';
import { Form, InputGroup, Radio } from '@theorchard/suite-components';
import cx from 'classnames';
import type { ContractMechanicalDeduction } from 'src/types/abacus-contract-mechanical-deduction';
import './styles.scss';

export interface ContractMechanicalDeductionAdminFeePropTypes {
    contractMechanicalDeduction: ContractMechanicalDeduction;
    errors: any;
    handleFormChange: (
        formField: string,
        inputValue: string | null | undefined
    ) => void;
    onAdminFeeSelect: (params: any) => void;
}

export const ContractMechanicalDeductionAdminFee: React.FC<
    ContractMechanicalDeductionAdminFeePropTypes
> = ({
    contractMechanicalDeduction,
    errors,
    handleFormChange,
    onAdminFeeSelect,
}) => {
    return (
        <>
            <Form.Group className="ContractMechanicalDeductionForm-AdminFee">
                <Form.Label>Admin Fee</Form.Label>
                <div className="ContractMechanicalDeductionForm-AdminFee-description">
                    Admin fees are publishing fees taken by the business.
                </div>
                <Radio
                    checked={!contractMechanicalDeduction?.isAdminFeeSelected}
                    className="ContractMechanicalDeductionForm-AdminFee-radio"
                    key="AdminFee-no-radio"
                    label="No"
                    onChange={() => onAdminFeeSelect(false)}
                    testId="AdminFeeOptions"
                />
                <Radio
                    checked={contractMechanicalDeduction?.isAdminFeeSelected}
                    className="ContractMechanicalDeductionForm-AdminFee-radio"
                    key="AdminFee-yes-radio"
                    label="Yes"
                    onChange={() => onAdminFeeSelect(true)}
                    testId="AdminFeeOptions"
                />
            </Form.Group>
            {contractMechanicalDeduction?.isAdminFeeSelected && (
                <>
                    <Form.Label>Fee</Form.Label>
                    <InputGroup className="ContractMechanicalDeductionForm-AdminFee">
                        <Form.Control
                            data-testid="AdminFeeInput"
                            className={cx({
                                'ContractMechanicalDeductionForm-AdminFee-input': true,
                                'input-error': errors.adminFee,
                            })}
                            name="adminFee"
                            onChange={(
                                e: React.ChangeEvent<HTMLInputElement>
                            ) => {
                                handleFormChange(e.target.name, e.target.value);
                            }}
                            type="text"
                            value={contractMechanicalDeduction?.adminFee || ''}
                        />
                        <InputGroup.Append>
                            <InputGroup.Text id="basic-addon2">
                                %
                            </InputGroup.Text>
                        </InputGroup.Append>
                    </InputGroup>
                    <div className="ContractMechanicalDeductionForm-AdminFee-description">
                        Fees are based on publishing paid.
                    </div>
                    <div className="error">{errors?.adminFee}</div>
                </>
            )}
        </>
    );
};