import React from 'react';
import { Form, SegmentedInput, Field } from '@theorchard/suite-components';
import type { AbacusContractFlowthrough } from 'src/types/abacus-contract-flowthrough';
import './styles.scss';

export interface ContractFlowthroughRatePropTypes {
    abacusContractFlowthrough: Partial<AbacusContractFlowthrough>;
    errors: any;
    handleFormChange: (
        // eslint-disable-next-line no-unused-vars
        fieldName: string,
        // eslint-disable-next-line no-unused-vars
        inputValue: string | null | undefined
    ) => void;
    handleFormChangeValidation: (
        // eslint-disable-next-line no-unused-vars
        fieldName: string,
        // eslint-disable-next-line no-unused-vars
        inputValue: string | null | undefined
    ) => void;
}
export const ContractFlowthroughRate: React.FC<
    ContractFlowthroughRatePropTypes
> = ({
    abacusContractFlowthrough,
    errors,
    handleFormChange,
    handleFormChangeValidation,
}) => {
    return (
        <>
            <Form.Group className="ContractFlowthroughFormFields-Rate">
                <Field
                    controlId="flowthroughRate"
                    labelText="Rate"
                    errorMessage={errors?.flowthroughRate || undefined}
                >
                    <SegmentedInput testId="contractFlowthroughRate-segmentedInput">
                        <Form.Control
                            data-testid="contractFlowthroughRate"
                            name="flowthroughRate"
                            type="text"
                            isInvalid={!!errors?.flowthroughRate}
                            value={
                                abacusContractFlowthrough?.flowthroughRate?.toString() ||
                                ''
                            }
                            onBlur={(e: React.FocusEvent<HTMLInputElement>) =>
                                handleFormChangeValidation(
                                    e.target.name,
                                    e.target.value
                                )
                            }
                            onChange={e =>
                                handleFormChange(e.target.name, e.target.value)
                            }
                            placeholder="Input Value"
                        />
                        <SegmentedInput.Static>%</SegmentedInput.Static>
                    </SegmentedInput>
                </Field>
            </Form.Group>
        </>
    );
};