import { GridTable, Section } from '@theorchard/suite-components';
import React from 'react';
import {
    ContractTermDetailFormattedPresentational,
    ContractTermDetailPresentational,
} from 'src/types/contract-term';
import PresentationalGroupTableColumns from './contract-term-detail-presentational-groups-table-columns';
import { RenderExceptions } from './contract-term-details-presentational-group-exceptions';

export interface SectionPresentationalGroupItemPropTypes {
    detail: ContractTermDetailPresentational;
    detailIndex: number;
    contractTermFormattedDataListIndex: number;
    lastGroup: boolean;
}

const RenderPresentationGroupTable: React.FC<{
    conditions: ContractTermDetailFormattedPresentational[];
}> = ({ conditions }) => (
    <Section.Table>
        <GridTable
            data-testid="ContractTermsConditionsGridTableTestId"
            data={conditions}
            bordered
            variant="zebra"
            rowKey="index"
            columnDefs={PresentationalGroupTableColumns()}
        />
    </Section.Table>
);

export const SectionPresentationalGroupItem: React.FC<
    SectionPresentationalGroupItemPropTypes
> = ({
    detail,
    detailIndex,
    contractTermFormattedDataListIndex,
    lastGroup,
}) => {
    let title: string;
    const { name, defaultLabelShare, exceptions } = detail.presentationalGroup;
    let showExceptions = true;

    if (
        Array.isArray(defaultLabelShare) ||
        (name === 'Digital' && exceptions.length > 0)
    ) {
        title = `${name} • Multiple Rates, Expand for Details`;
        showExceptions = false;
    } else {
        const topRate = defaultLabelShare?.toString() + '%';

        const hasAllCondition = detail.presentationalGroup.conditions.some(
            condition =>
                condition.service[0] === 'All' && condition.country[0] === 'All'
        );

        if (!hasAllCondition && exceptions.length > 0) {
            const firstException = exceptions[0];
            if (
                firstException.service.length > 0 &&
                firstException.service[0] !== 'All' &&
                firstException.country.length > 0 &&
                firstException.country[0] !== 'All'
            ) {
                title = `${name} • ${topRate} for ${firstException.service[0]}, ${firstException.country[0]}`;
            } else {
                title = `${name} • ${topRate}`;
            }
        } else {
            title = `${name} • ${topRate}`;
        }
    }

    return (
        <div data-testid="PresentationalGroupSectionCollapsibleTest">
            <Section
                expandable
                defaultExpanded={false}
                level="sub"
                key={`${detailIndex}-${contractTermFormattedDataListIndex}`}
            >
                <Section.Header>
                    <div
                        className="d-flex flex-column"
                        style={{ gap: '2px', width: '100%' }}
                    >
                        <div
                            className="d-flex flex-row align-items-center ContractTermsConditions-labelInfoBlock-detail-sectionHeader"
                            data-testid="PresentationalGroupSectionHeaderTest"
                        >
                            <Section.Title>{title}</Section.Title>
                        </div>
                        <RenderExceptions
                            exceptions={exceptions}
                            showExceptions={showExceptions}
                        />
                    </div>
                </Section.Header>
                <Section.Body>
                    <RenderPresentationGroupTable
                        conditions={detail.presentationalGroup.conditions}
                    />
                </Section.Body>
            </Section>
            {!lastGroup && <Section.Divider />}
        </div>
    );
};