import React, { useContext } from 'react';
import {
    Button,
    Col,
    Container,
    Label,
    Row,
} from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { AbacusContractLifecycleStatus } from 'src/apollo/definitions/globalTypes';
import { ContractLifecycleEditRenewal } from 'src/components/contract-lifecycle-edit/contract-lifecycle-edit-renewal';
import RestrictedByAbacusProfileWrapper from 'src/components/restricted-by-abacus-profile-wrapper';
import { CONTRACT_TYPES } from 'src/constants';
import { ContractLifecycleContext } from '../../contexts/contract-lifecycle-context';
import { generalSectionStyling } from './constants';
import {
    formatCollectionPeriod,
    formatTerminationPeriod,
    RenewalDescription,
} from './contract-renewal-section-utils';

export interface ContractRenewalSectionNRProps {
    classPrefix: string;
}

export const ContractRenewalSectionNR: React.FC<
    ContractRenewalSectionNRProps
> = ({ classPrefix }) => {
    const {
        contract,
        isEditingContractRenewalRules,
        setIsEditingContractRenewalRules,
    } = useContext(ContractLifecycleContext);

    const lifecycle = contract?.lifecycle;
    if (!lifecycle) return null;

    const statuses = [
        AbacusContractLifecycleStatus.TO_BE_TERMINATED,
        AbacusContractLifecycleStatus.TERMINATED,
        AbacusContractLifecycleStatus.IN_COLLECTION_PERIOD,
    ] as AbacusContractLifecycleStatus[];

    const renewalStyling = !classPrefix?.includes('editable')
        ? generalSectionStyling
        : {};

    return (
        <div className={classPrefix} style={renewalStyling}>
            <h3 className={`${classPrefix}-header-block`}>
                Renewal &amp; Collection Rules
            </h3>
            <RestrictedByAbacusProfileWrapper>
                <Button
                    className="ContractDetail-general-details-editButton"
                    disabled={statuses.includes(lifecycle?.lifecycleStatus)}
                    onClick={() =>
                        setIsEditingContractRenewalRules(
                            !isEditingContractRenewalRules
                        )
                    }
                    variant="secondary"
                    size="sm"
                >
                    <GlyphIcon name="edit" size={16} />
                </Button>
            </RestrictedByAbacusProfileWrapper>
            <ContractLifecycleEditRenewal
                isSidecarOpen={isEditingContractRenewalRules}
                setIsSidecarOpen={setIsEditingContractRenewalRules}
            />
            <Container>
                <Row>
                    <Col md={3}>
                        <Label text="Current Period Start Date" />
                        <div data-testid="current-period-start-date">
                            {lifecycle.lifecycleTermStart}
                        </div>
                    </Col>
                    <Col md={3}>
                        <Label text="Current Period End Date" />
                        <div data-testid="current-period-end-date">
                            {lifecycle.lifecycleTermEnd || '-'}
                        </div>
                    </Col>
                    <Col md={3}>
                        <Label text="Termination Notice Period" />
                        <div data-testid="termination-notice-period">
                            {formatTerminationPeriod(contract) || '-'}
                        </div>
                    </Col>
                    <Col md={3}>
                        <Label text="Collection Period" />
                        <div data-testid="collection-period">
                            {formatCollectionPeriod(contract) || '-'}
                        </div>
                    </Col>
                </Row>
            </Container>
            <div
                className={`${classPrefix}-description`}
                data-testid="renewal-section-description"
            >
                <RenewalDescription
                    contract={contract}
                    contractType={CONTRACT_TYPES.NEIGHBOURING_RIGHTS}
                />
            </div>
        </div>
    );
};

export default ContractRenewalSectionNR;