import React from 'react';
import { Alert, Button, Col, Row } from '@theorchard/suite-components';
import { useFeatureFlag } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import { PRIMARY_CONTRACT_TERMINATION_WARNING } from 'src/apollo/type-constants/contract';
import { TerminationFormFields } from 'src/components/contract-lifecycle-shared/termination-form-fields';
import { USER_FEATURES } from 'src/constants';
import type { ContractLifecycle } from 'src/types/abacus-contract-lifecycle';
import './styles.scss';

export interface ContractLifecycleTerminationPropTypes {
    contractInitialStartDate?: string;
    contractLifecycle: ContractLifecycle;
    errors: Partial<ContractLifecycle>;
    isPrimaryContract: boolean;
    isTerminatingContract: boolean;
    setContractLifecycle: (params: any) => void;
    setErrors: (params: any) => void;
    setIsTerminatingContract: (params: any) => void;
}

export const ContractLifecycleTermination: React.FC<
    ContractLifecycleTerminationPropTypes
> = ({
    contractInitialStartDate,
    contractLifecycle,
    errors,
    isPrimaryContract,
    isTerminatingContract,
    setContractLifecycle,
    setErrors,
    setIsTerminatingContract,
}) => {
    // ACC-9395: TODO remove FF abacus_primary_contract
    const isFeaturePrimaryContractEnabled = useFeatureFlag(
        USER_FEATURES.ABACUS_PRIMARY_CONTRACT
    );

    const handleFormChange = (
        formField: string,
        inputValue: string | null | undefined
    ) => {
        setErrors({});
        setContractLifecycle({ ...contractLifecycle, [formField]: inputValue });
    };

    return (
        <>
            <Row>
                <Col>
                    <h2 className="ContractLifecycleTermination-header">
                        Termination
                    </h2>
                </Col>
                <Col>
                    <Button
                        className="ContractLifecycleTermination-link"
                        onClick={() => {
                            setIsTerminatingContract(!isTerminatingContract);
                        }}
                        size="lg"
                        variant="quartenary"
                    >
                        {isTerminatingContract ? (
                            <div>
                                <GlyphIcon name="minus" size={12} /> Cancel
                                Termination
                            </div>
                        ) : (
                            <div>
                                <GlyphIcon name="plus" size={12} /> Add
                                Termination
                            </div>
                        )}
                    </Button>
                </Col>
            </Row>
            <Row>
                <Col>
                    {!contractLifecycle?.terminationEffective &&
                        !isTerminatingContract && (
                            <div>No Termination date specified.</div>
                        )}
                </Col>
            </Row>
            {isTerminatingContract && (
                <>
                    <TerminationFormFields
                        contractInitialStartDate={contractInitialStartDate}
                        contractLifecycle={contractLifecycle}
                        errors={errors}
                        handleFormChange={handleFormChange}
                    />
                    {isPrimaryContract && isFeaturePrimaryContractEnabled && (
                        <Alert
                            title="Terminating the Primary Contract"
                            variant="warn"
                            text={PRIMARY_CONTRACT_TERMINATION_WARNING}
                        />
                    )}
                </>
            )}
        </>
    );
};