import React, { useEffect, useState, type PropsWithChildren } from 'react';
import { Alert, Button, GridTable } from '@theorchard/suite-components';
import { isEmpty } from 'lodash-es';
import { Page } from '@theorchard/suite-frontend';
import { Illustration } from '@theorchard/suite-icons';
import { useSigningEntitiesByProfitCenter } from 'src/apollo/queries/reference-sap-profit-center';
import { SIGNING_ENTITIES_NOT_MAPPED } from 'src/apollo/type-constants/reference-sap-profit-center';
import { ReferenceSigningEntityMultiDropdown } from 'src/components/shared/reference-signing-entity-multi-dropdown';
import { ConfirmDeletePopoverIcon } from 'src/components/reference-sap-profit-center-edit/confirm-delete-popover-icon';
import { useSidecarActivity } from 'src/components/reference-sap-profit-center-edit/sidecar-activity-context';

import type {
    ReferenceSapProfitCenterEditForm,
    SigningEntityByProfitCenterFilter,
} from 'src/types/reference-sap-profit-center';
import type { GridTableColumnDefinition } from '@theorchard/suite-components';
import type { CellProps } from '@theorchard/suite-components/dist/esm/src/components/table/base/types';

export interface EditMappedSigningEntitiesFormFieldsPropTypes {
    changeHandler: (
        fieldName: string,
        value: string | undefined | null | string[]
    ) => void;
    error: string | null;
    formData: ReferenceSapProfitCenterEditForm;
    submitHandler: () => void;
}

const ProfitCenterCell = ({
    data: { signingEntity },
}: PropsWithChildren<CellProps<any>>) => <>{signingEntity.legalName}</>;

export const EditMappedSigningEntitiesFormFields: React.FC<
    EditMappedSigningEntitiesFormFieldsPropTypes
> = ({ changeHandler, error, formData, submitHandler }) => {
    const { isSavingFormData, deleteError, setDeleteError } =
        useSidecarActivity();
    const [pageSize, setPageSize] = useState<number>(5);
    const [page, setPage] = useState<number>(0);
    const [requestParams, setRequestParams] =
        useState<SigningEntityByProfitCenterFilter>({
            limit: 5,
            offset: 0,
            referenceSapProfitCenterId:
                formData.referenceSapProfitCenterId ?? '',
        });

    useEffect(() => {
        setRequestParams({
            ...requestParams,
            limit: pageSize,
            offset: page * pageSize,
        });
    }, [page, pageSize]);

    const {
        data,
        error: ListError,
        loading,
    } = useSigningEntitiesByProfitCenter(requestParams);

    const mappedSigningEntities =
        data?.abacusSigningEntitiesBySapProfitCenter?.items || [];

    const handleDeleteSuccess = () => {
        if (page > 0 && mappedSigningEntities.length === 1) {
            setPage(page - 1);
        }
    };

    const columnDefs: GridTableColumnDefinition<unknown>[] = [
        {
            name: 'legalName',
            title: 'Profit Center',
            Cell: ProfitCenterCell,
        },
    ];

    return (
        <div className="EditSapProfitCenterForm">
            <Page>
                <Page.Grid className="SigningEntityDropdown">
                    <Page.Col md={8}>
                        <ReferenceSigningEntityMultiDropdown
                            id="signingEntity"
                            onChange={(e: any) =>
                                changeHandler(
                                    'referenceSigningEntityIds',
                                    e?.map(({ value }: any) => value) ??
                                        undefined
                                )
                            }
                            placeholder="Select Signing Entity"
                            value={
                                formData?.referenceSigningEntityIds
                                    ? formData?.referenceSigningEntityIds.map(
                                          String
                                      )
                                    : undefined
                            }
                            requireApply={false}
                            testId="signingEntityMultiSelect"
                        />
                    </Page.Col>
                    <Page.Col md={4}>
                        <Button
                            className="EditSapProfitCenterForm-Add-Button"
                            disabled={
                                isSavingFormData ||
                                isEmpty(formData?.referenceSigningEntityIds)
                            }
                            onClick={submitHandler}
                            variant="primary"
                        >
                            {isSavingFormData ? 'Adding...' : 'Add'}
                        </Button>
                    </Page.Col>
                </Page.Grid>
                <Page.Grid className="EditSapProfitCenterForm-MappedSigningEntitiesTableGrid">
                    {ListError && (
                        <Alert
                            className="errorMsg"
                            text={ListError.message}
                            variant="error"
                        />
                    )}
                    <GridTable
                        bordered
                        className="MappedSigningEntitiesTable"
                        columnDefs={columnDefs}
                        data={mappedSigningEntities}
                        hideColumnHeaders
                        emptyStateIcon={
                            <Illustration name="noResults" size={50} />
                        }
                        emptyStateTitle={SIGNING_ENTITIES_NOT_MAPPED}
                        loading={loading}
                        loadingRows={5}
                        page={page}
                        pageSize={pageSize}
                        paginated
                        onPageChange={setPage}
                        onPageSizeChange={setPageSize}
                        rowActions={{
                            delete: {
                                renderIcon: (row: any) => (
                                    <ConfirmDeletePopoverIcon
                                        id={row.signingEntitySapProfitCenterId}
                                        legalName={row.signingEntity.legalName}
                                        onDeleteSuccess={handleDeleteSuccess}
                                        setError={setDeleteError}
                                    />
                                ),
                                variant: 'danger',
                            },
                        }}
                        rowKey="signingEntitySapProfitCenterId"
                        showUpdateIndicator
                        stickyHeader
                        testId="SigningEntitiesGridTable"
                        totalCount={
                            data?.abacusSigningEntitiesBySapProfitCenter
                                ?.totalCount || 0
                        }
                    />
                </Page.Grid>
                {(error || deleteError) && (
                    <Alert
                        className="SapProfitCenterForm-Error"
                        variant="error"
                        text={error || deleteError}
                    />
                )}
            </Page>
        </div>
    );
};

export default EditMappedSigningEntitiesFormFields;