import React from 'react';
import {
    Form,
    Row,
    Col,
    SegmentedButton,
    Tooltip,
} from '@theorchard/suite-components';
import {
    contractMechanicalDeductionExistMsg,
    CONTRACT_MECHANICAL_DEDUCTION_TERRITORIES,
} from 'src/apollo/type-constants/contract';
import type { AbacusContractMechDeductionTerritory } from 'src/apollo/definitions/globalTypes';
import type { ContractMechanicalDeduction } from 'src/types/abacus-contract-mechanical-deduction';
import './styles.scss';

export interface ContractMechanicalDeductionTerritoryPropTypes {
    existingMechDeductionTerritories: AbacusContractMechDeductionTerritory[];
    contractMechanicalDeduction: ContractMechanicalDeduction;
    // eslint-disable-next-line no-unused-vars
    setContractMechanicalDeduction: (
        params: ContractMechanicalDeduction
    ) => void;
}

export const ContractMechanicalDeductionTerritory: React.FC<
    ContractMechanicalDeductionTerritoryPropTypes
> = ({
    existingMechDeductionTerritories,
    contractMechanicalDeduction,
    setContractMechanicalDeduction,
}) => {
    const segmentedButton = (territory: any, isDisabled: boolean) => (
        <SegmentedButton.Text
            disabled={isDisabled}
            key={`${territory.value}-territory`}
            id={territory.value}
            testId={`${territory?.value}-territory`}
        >
            {territory.label}
        </SegmentedButton.Text>
    );

    const onChangeHandler = (
        territory: AbacusContractMechDeductionTerritory
    ) => {
        setContractMechanicalDeduction({
            ...contractMechanicalDeduction,
            territory,
        });
    };

    return (
        <Row>
            <Col>
                <Form.Group className="ContractMechanicalDeductionFullScreenModal-Territory">
                    <SegmentedButton
                        key="ContractMechanicalDeductionFullScreenModal-Territory"
                        onChange={onChangeHandler}
                        testId="mech-deduction-territory"
                        variant="primary"
                        value={contractMechanicalDeduction?.territory}
                    >
                        {Object.values(
                            CONTRACT_MECHANICAL_DEDUCTION_TERRITORIES
                        ).map(territory => {
                            const isMechDeductionAlreadyExist =
                                existingMechDeductionTerritories &&
                                existingMechDeductionTerritories?.includes(
                                    territory.value
                                );

                            if (isMechDeductionAlreadyExist) {
                                return (
                                    <Tooltip
                                        id={territory.value}
                                        key={`${territory.value}-tooltip`}
                                        message={contractMechanicalDeductionExistMsg(
                                            territory.label
                                        )}
                                    >
                                        {segmentedButton(
                                            territory,
                                            isMechDeductionAlreadyExist
                                        )}
                                    </Tooltip>
                                );
                            }

                            return segmentedButton(
                                territory,
                                isMechDeductionAlreadyExist
                            );
                        })}
                    </SegmentedButton>
                </Form.Group>
            </Col>
        </Row>
    );
};