import React from 'react';
import {
    Alert,
    Checkbox,
    Form,
    HelpTooltip,
} from '@theorchard/suite-components';
import { AbacusContractMechDeductionTerritory } from 'src/apollo/definitions/globalTypes';
import { AbacusContractMechDeductionMechanicalType } from 'src/apollo/definitions/globalTypes';
import {
    CONTRACT_MECHANICAL_DEDUCTION_PRODUCT_TYPES,
    CONTRACT_MECHANICAL_DEDUCTION_TERRITORIES,
    TOOLTIP_PHYSICAL_PRODUCT_TYPE,
} from 'src/apollo/type-constants/contract';

export interface ContractMechanicalDeductionProductTypesPropTypes {
    /* eslint-disable no-unused-vars */
    handleFormChange: (
        formField: string,
        inputValue: AbacusContractMechDeductionMechanicalType | null | undefined
    ) => void;
    isEditForm?: boolean;
    productTypes: AbacusContractMechDeductionMechanicalType[];
    territory: AbacusContractMechDeductionTerritory | null;
    /* eslint-enable no-unused-vars */
}

export const ContractMechanicalDeductionProductTypes: React.FC<
    ContractMechanicalDeductionProductTypesPropTypes
> = ({ handleFormChange, isEditForm, productTypes, territory }) => {
    const physicalOnlyTerritories: AbacusContractMechDeductionTerritory[] = [
        AbacusContractMechDeductionTerritory.CAN,
        AbacusContractMechDeductionTerritory.ROW,
    ];
    const territoryLabel =
        territory && CONTRACT_MECHANICAL_DEDUCTION_TERRITORIES[territory].label;

    const showPhysicalOnlyProductType = () => {
        return isEditForm ? (
            <>
                <Form.Label>Product Types</Form.Label>
                <HelpTooltip
                    className="ContractMechanicalDeductionForm-ProductTypes-Tooltip"
                    id="ProductTypes-Tooltip"
                    message={TOOLTIP_PHYSICAL_PRODUCT_TYPE}
                    testId="ProductTypes-Tooltip"
                    tooltipPlacement="right"
                />
                <div className="ContractMechanicalDeductionForm-ProductTypes-Text">
                    {
                        CONTRACT_MECHANICAL_DEDUCTION_PRODUCT_TYPES[
                            AbacusContractMechDeductionMechanicalType.PHYSICAL
                        ].label
                    }
                </div>
            </>
        ) : (
            <Alert
                testId={'ProductTypesAlert'}
                text={
                    <div>
                        <b>{territoryLabel}</b> only accepts Mechanical
                        Deductions for <b>Physical</b> products.
                    </div>
                }
                variant="information"
            />
        );
    };

    return (
        <>
            <Form.Group className="ContractMechanicalDeductionForm-ProductTypes">
                {territory && physicalOnlyTerritories.includes(territory) ? (
                    showPhysicalOnlyProductType()
                ) : (
                    <>
                        <Form.Label>
                            Product Types {!territory && '(US Only)'}
                        </Form.Label>
                        {Object.values(
                            CONTRACT_MECHANICAL_DEDUCTION_PRODUCT_TYPES
                        ).map(productType => (
                            <Checkbox
                                checked={productTypes.includes(
                                    productType.value
                                )}
                                className="ContractMechanicalDeductionForm-ProductTypes-checkbox"
                                key={`ProductTypes-${productType.value}`}
                                label={productType.label}
                                onChange={() =>
                                    handleFormChange(
                                        'mechanicalType',
                                        productType.value
                                    )
                                }
                                testId="ProductTypesOptions"
                            />
                        ))}
                    </>
                )}
            </Form.Group>
        </>
    );
};