import React from 'react';
import { Form, Radio } from '@theorchard/suite-components';
import { CONTRACT_MECHANICAL_DEDUCTION_ADMIN_TYPES } from 'src/apollo/type-constants/contract';
import type { AbacusContractMechDeductionAdminType } from 'src/apollo/definitions/globalTypes';

export interface ContractMechanicalDeductionAdminTypesPropTypes {
    /* eslint-disable no-unused-vars */
    adminType: AbacusContractMechDeductionAdminType | null;
    handleFormChange: (
        formField: string,
        inputValue: AbacusContractMechDeductionAdminType | null | undefined
    ) => void;
    /* eslint-enable no-unused-vars */
}

export const ContractMechanicalDeductionAdminTypes: React.FC<
    ContractMechanicalDeductionAdminTypesPropTypes
> = ({ adminType, handleFormChange }) => (
    <>
        <Form.Group className="ContractMechanicalDeductionForm-AdminTypes">
            <Form.Label>Who Pays For The Deductions?</Form.Label>
            {Object.keys(CONTRACT_MECHANICAL_DEDUCTION_ADMIN_TYPES).map(
                (key: string) => {
                    const adminTypeKey =
                        key as keyof typeof CONTRACT_MECHANICAL_DEDUCTION_ADMIN_TYPES;

                    const adminTypeOption =
                        CONTRACT_MECHANICAL_DEDUCTION_ADMIN_TYPES[adminTypeKey];

                    return (
                        <div>
                            <Radio
                                checked={adminType === adminTypeOption.value}
                                className="ContractMechanicalDeductionForm-AdminTypes-radio"
                                key={`AdminTypes-${adminTypeOption.value}-radio`}
                                label={adminTypeOption.label}
                                name="adminTypes"
                                onChange={() =>
                                    handleFormChange(
                                        'adminType',
                                        adminTypeOption.value
                                    )
                                }
                                testId="AdminTypesOptions"
                            />
                            <div
                                className="ContractMechanicalDeductionForm-AdminTypes-description"
                                key={`AdminTypes-${adminTypeOption.value}`}
                            >
                                {adminTypeOption.description}
                            </div>
                        </div>
                    );
                }
            )}
        </Form.Group>
    </>
);